vue的工作机制

Vue工作机制：

1、 new Vue()的时候执行了一个init函数

2、 $mount，在main.js中

3、 Compile含有编译器的话就执行，没有的话就不执行，字符串写的模板需要编译，直接用template标签写的就不用编译器，平时使用的没有编译器，vue.js里边有编译器

4、 Render函数，渲染函数，上边的template转换成了render函数，所以如果直接写的render函数的话就不用写template了，，，jsx就是相当于这部分

5、 生成虚拟dom，

a)       生成虚拟dom后直接渲染页面了

b)       对数据进行监听

                     i.            生成虚拟dom后将数据通过getter挂载到watcher上，如果修改的时候触发setter

                    ii.            如果数据进行了变化的时候就会进行patch（），将最新的虚拟dom和原来的虚拟dom进行比对，通过diff算法后更新dom

解释：

 

1、 mount生命周期函数就是在虚拟dom渲染完成后执行的

2、 上边的watcher和组件中写的watch不相同，那是小的独立的watch，和渲染watcher不同，每个组件只存在一个上边的渲染watcher，

3、 Created只是有组件中的数据还没有生成虚拟dom，所以在页面中初始化相关的数据最好放在created中，那样就不会触发两个mounted

4、 Vue2中的响应式的原理是Object.defineProperty,通过get和set来触发的获取数据和重新设置数据。Vue3中使用的更底层的proxy，性能更好