vue 2.0响应式源码实践，麻麻，我再也不怕被面试官提问啦

---

写在前面

震惊！！！ 2019年10月5日，尤小右公开了 Vue 3.0 的源代码。源码地址：vue-next，此次更新的主要内容除了自行查看源码还可以在知乎上进行了解尤小右 3.0 RFC，在这两篇的基础上，接下来我将为大家展示最近学习到3.0的内容解读

了解3.0的进步，我们得先了解2.0的响应式原理，如果已经知道其优势劣势的大佬自行跳过~~

vue2.0响应式源码实现

看过官方文档的同学都知道Vue 响应式系统的解释: 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因

下面我们将大概先实现vue2.0响应

原理:使用 Object.defineProperty 可以重新定义属性,并且给属性增加 getter 和setter；

1. 先创建一个对象

// 我们先创建一个对象，然后通过某个方法去监听这个对象，当对象的值改变时，触发操作
let defalutName = ''
let data = {name:''}
// observer监听函数
observer(data)
console.log(data.name);
// expected output: Magic Eno

// 给data里面的name赋值 = "Eno"
data.name = 'Eno'
console.log(data.name);   // expected output: Eno

console.log(defalutName); // expected output: Eno

2.实现observer方法

observer的效果要求很简单，就是监听data对象，当data里面的属性值改变时，监听到其改变；
下面实现一个简陋的双向数据绑定，即data的name改变时，defaultName也要改变，实现双向数据绑定，即defalutName与data对象的name双向绑定了

let defalutName = ''
let data = {name:''};

function observer (data) {
  //Object.defineProperty直接在对象上定义新属性，或修改对象上的现有属性，然后返回对象。
//不了解的请转MDN文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
  Object.defineProperty(data, 'name', {
    get(){
      return defalutName
    },
    set(newValue){
      defalutName = newValue
    }
  });
}
// 
observer(data)
console.log(data.name);
// expected output: ''

// 给data里面的n