vue文件时怎样编译运行到浏览器的

http://www.manongjc.com/article/21832.html

通过vue-loader，解析.vue文件，在webpack解析，拆解vue组件

  1. 编译模板，

    • 生成可复用的render function code，
    • 这一步在vue实例的整个生命周期中只会执行一次甚至零次，
    • 因为我们可以在打包的时候可以预编译

  2. 生成watcher等核心渲染监听，

    • 在整个vue实例的生命过程中持续发生着作用，
    • 对view和modal进行双向绑定

  3. 虚拟dom的diff比较，

    • 当watcher监听到data的变更的时候，
    • 就会根据注入新的data执行render function code，
    • 生成新的虚拟dom，
    • 跟老的虚拟dom（第一次执行的时候可能为空）进行diff比对，
    • 不同的部分将写入真实的dom

VUE学习-编译到浏览器的更多相关文章

  1. Vue学习笔记：编译过程

    碰到是否有template选项时,会询问是否要对template进行编译: 在template编译(渲染成UI)有一个过程.模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据生成 ...

  2. vue学习笔记

    来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点 新一代 Vue.js 框架非常关注如何用极少的外部特性 ...

  3. Vue 学习顺序

    起步: 1.扎实的 JavaScript / HTML / CSS 基本功,ES6 最好过一遍 2.通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script&g ...

  4. vue学习之路 - 4.基本操作（下）

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  5. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  6. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  7. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  8. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  9. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  10. vue学习起步：了解下

    渐进式 有这么一句话,vue是渐进式框架. 抽取“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?中的解释: 渐进式代表的含义是:主张(主张指使用时的硬性要求)最少.来个对比就知道什么叫主张 ...

随机推荐

  1. PHP 网页 apache24+php8 yii basic

    PHP官网下载 https://windows.php.net/download/ 在PHP官网点击Download下载时不管选择哪个版本的都有两个类型 : Non Thread Safe(非线程安全 ...

  2. 别再写一堆的 for 循环了！Java 8 中的 Stream 轻松遍历树形结构，是真的牛逼

    实体类:Menu.java /** * Menu * * @author lcry */ @Data @Builder public class Menu { /** * id */ public I ...

  3. Oracle常用的日期操作函数 to_char()和to_date

    https://www.cnblogs.com/zhangliang88/p/12924407.html

  4. CentOS 7关闭防火墙 SElinux 配ip

    屏蔽出站 iptables -t filter -A OUTPUT --dst 192.168.0.191/32 -j DROP iptables -t filter -A OUTPUT --dst ...

  5. 【DM论文阅读杂记】复杂社区网络

    Paper Title Community Structure in Time-Dependent, Multiscale, and Multiplex Networks Basic algorith ...

  6. Vmware-workstation - Centos8.0扩容磁盘空间 / 目录

    1. 软件版本 vmware workstation  15 pro 虚拟机: centos8.0 2.将虚拟机关机选择扩容到多大 3. 进入操作系统,执行lsblk查看sda盘的情况.下图所示,需要 ...

  7. springcloud(四) - 服务治理Hystrix

    功能介绍 调用下游服务,下游因为超时.异常等原因报错的时候.hystrix保证不会出现整体异常,避免雪崩.主要策略是服务的熔断.降级   应用场景 降级:异常.超时.熔断等情况发生后,不让客户端等待返 ...

  8. 基于Mybatis Plus的一种查询条件构建方案

    ! 重要: 遐(瞎)想的思路, 希望各位多多建议 record为jdk17写法, 使用class也不会有问题 背景 身为资深程序员, 上班最重要的事当然是增删改查(bushi). 比如今天, 组长甩给 ...

  9. go 使用mysql

    package main /* 下划线(如:import _ hello/imp)的作用:当导入一个包时,该包下的文件里所有init()函数都会被执行, 然而,有些时候我们并不需要把整个包都导入进来, ...

  10. excel数字转日期

    import datetime delta = datetime.timedelta() today = datetime.datetime.strptime('1899/12/30', '%Y/%m ...