VUE学习-编译到浏览器

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