2021-01-27

Vue 响应式原理分析:

vue  响应式原理:  

1:    不要认为数据发生改变,  页面跟着更新,  并不是理所当然的.

2:    直接引用vue.js ,   但是在文件node_modules/ vue/ dist/ vue.js 文件,        可以引用vue.js 文件.  

 node_modules:  文件夹需要npm install  初始化安装的.

3:    vue 内部已经帮助我们实现了,   数据改变页面自动更新功能.  

 (1):  app.message:    修改了数据,    vue 框架内部是如何监听到数据改变的.  message 数据发生改变的.

      Object.defineProperty ()  ==>  监听对象属性改变.

 (2):  当数据发生改变的时候,   vue 是如何通知那些以来的数据,  界面发生刷新的.

      发布者订阅者模式

 (3):   new 出vue 实例对象以后,   将自己定义参数传递到vue 实例对象里边.   vue 源码内部就会拿到  data 传递过去对象; 

        Object.keys(obj).forEach(keys => {

         拿到obj 对象中每一个keys 键值

           let  value = obj[key]    //  可以拿到obj 对象中每一个值

             Object.defineProprety(value) :  监听对象中每一个值的改变.

                //  给原来对象重新定义属性:

                obj: 代表原来的对象,  key:  代表原来对象的key值,     value: 值设置可以定义get 和set 函数.  进行重新定义.

             Object.defineProprety(obj,  key, {

                set(newValue) {

                   console.log("监听" +  key + "改变")

                   value =  newValue;

                }

               get() {

                  console.log("获取" + 可以 + "对应的值")

                   return value;

              }

            })

     })

       在set 方法里边监听属性的改变,    在get 方法里边监听值的改变.       

         告诉谁?  谁在用告诉谁?  谁在用?  => {通过解析HTML 代, 告诉那些人在用属性}  

       谁在这个属性就会调用这个属性get  方法.    当newValue  发生改变的时候就会通知调用者.

      用到发布者订阅者模式;      就是用下边三个人订阅 newValue 值改变.

 

     把多个订阅者对象添加到发布者里边,    只要是发布者调用自己的notify() ;  就可以通知到所有的订阅者.

      订阅者是数组,   数组里边有很多watch ();  watch () 会通知自己update 方法;