Vue_源码简单分析,数据代理、模板解析、数据绑定

分析vue作为一个MVVM框架的基本实现原理
1.数据代理
2.模板解析
3.数据绑定

数据代理
数据代理:通过一个对象代理另一个对象中属性的操作(读/写)
vue数据代理:通过vm对象来代理data对象中所有属性的操作
好处:更方便的操作data中的数据
基本实现流程:
1.通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符
2.所有添加的属性都包含getter/setter
3.getter/setter内部去操作data中对应的属性数据

模板解析
模板:就是html里面嵌套的js代码
js以指令属性和表达式的形式存在于页面里

数据绑定
一旦更新了data中的某个属性数据,所有界面上直接使用或间接使用了此属性的节点都会更新
数据绑定涉及到两方面,一个是界面显示,一个是内存数据
数据劫持
数据劫持是vue中用来实现数据绑定的一种技术
基本思想:通过defineProperty()来监视data中所有属性(任意层次)数据的变化,一旦变化就去更新界面
在这里插入图片描述
MVVM结构
初始化阶段
在这里插入图片描述
更新阶段
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/mrcool2012/article/details/104550246