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,性能更好

猜你喜欢

转载自www.cnblogs.com/wyongz/p/12725738.html