响应式数据原理vue自记

1. 核心点 object.defineProperty
2. 默认vue初始化数据时会给data中的属性使用object.defineProperty重新定义所有的选项,当页面取到对应属性的时候,会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通 知相关依赖(watcher)进行更新操作。

3.  这里因为我不熟悉object.defineProperty,所以记了一下它的作用和用法:

   1. 语法:Object.defineProperty(obj, prop, descriptor) 
   2. obj是目标对象,prop是需要定义或者修改的名字,descriptor:属性的描述描述符,返回的就算obj对象,下面放一个代码块

   3. let  obj = Object.create(null);
      let descriptor = {
          configurable:false,
          writable:false,
          enumerable:false,
          value:'hello world'
      };
      Object.defineProperty(obj,'hello',descriptor);
       
      console.log(obj.hello);//hello world

   4. 描述符:js中对象具有两种属性,分别是数据属性和访问器属性,所以描述符也分为数据描述符和访问器描述符
      1. 注意使用描述符必须是两种之一,并且不能同时使用
      2. 数据描述符是一个具有值的属性,这个值可能是可写的,也可能是不可写的,具有如下的键值
         1. configurable: 该值能否被delete删除,能否修改writable属性从false变为true,能否修改访问器属性,默认为false
         2. enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false
         3. value：表示该属性的值。可以是任何有效的JS值。默认为undefined
         4. writable：表示该属性的值是否可写，默认为false。当且仅当属性的writable为true时，其值才能被赋值运算符改变
      3. 访问器描述符是一个有getter-setter函数对描述的属性的读写。它具有以下可选的键值：
         
         1. configurable：表示该属性能否通过delete删除，能否修改属性的特性或者能否修改访问器属性，默认为false。当且仅当该属性的configurable为true时，才能实现上述行为。
         2. enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false。
         3. get：在读取属性时调用的函数，默认值为undefined。
         4. set：在写入属性时调用的函数，默认值为undefined。
         5. 当使用了getter或setter方法，不允许使用writable和value这两个属性
         6. 切记这块如果要set,一定不要直接修改,会导致堆栈溢出(大佬的看不大明白)
4. 先写到这里,记住了主要是object.defineProperty+收集依赖