vue源码解析 —— 数据绑定

1. 前言：因为vue源码是比较复杂的，考虑的东西比较多；而这里只是简单的了解下类似vue的mvvm框架的部分原理，所以我们用这个库： https://github.com/DMQ/mvvm  （仿vue实现的mvvm库，比vue简洁，简单） ==>> 下面称其为 mvvm

 

2. 概念：

2.1  数据绑定  ==>> 效果

        一旦更新了 data 中的某个属性数据, 所有界面上直接使用或间接使用了此属性的节点都会更新。

2.2   数据劫持  ==>> 技术

        1) 数据劫持是 vue 中用来实现数据绑定的一种技术

        2) 基本思想: 通过 defineProperty()来监视 data 中所有属性(任意层次)数据的变化, 一旦变化就去更新界面

 

3. 实现原理 ==>> 面试可用

        数据代理给vm（vue实例对象）生成data里面的 xxx 属性，并添加了get和set方法；

        数据劫持是直接给data里面的xxx属性添加get和set方法；

        一旦调用 this.xxx = 123; 后，vm的set方法监听到了值得变化，而vm的set方法会去改变data的值，这样又使data的set方法监听到了变化，从而更新界面！

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！