vue响应式原理概述

  1. Vue 是怎么知道数据改变?(Object.defineProperty)
  2. Vue 在数据改变时,怎么知道通知哪些视图更新?(依赖收集)
  3. Vue 在数据改变时,视图怎么知道什么时候更新?(依赖更新)

1、defineProperty

  • get 值是一个函数,当属性被访问时,会触发 get 函数
  • set 值同样是一个函数,当属性被赋值时,会触发 set 函数

Object.defineProperty的缺点:

  1. 深度监听,需要递归到底,一次性计算量大,所以vue3.0用proxy
  2. 无法监听新增属性和删除属性,所以需要用Vue.set,Vue.delete

2、依赖收集

data 中的声明的每个属性,都拥有一个数组,保存着 谁依赖(使用)了 它。
数据知道谁依赖它之后,它就可以在发生改变的时候,通知 依赖它的页面,从而让页面完成更新。
实际上,会依赖 name 的地方,不只是页面,还会有 computed,watch… 等等,但是这里我们全部使用页面一词替代。
什么时候收集
当 页面 A 读取了 name 时,会触发 name 的 get 函数,此时,name 就会保存 页面A 的 watcher 。

3、依赖更新

什么时候更新
当 name 改变的时候,name 会遍历自己的 依赖收集器 subs,逐个通知 watcher,让 watcher 完成更新
这里 name 会通知 页面A,页面A 重新读取新的 name ,然后完成渲染

4、深度监听

对数据的监听只监听对象和数组,所以vue的数据都在一个对象当中。然后observer这个对象。
对于对象的每个值,如果还是引用类型,就继续observer这个值。

 function observer(target){
           if(typeof target!=='object'||target===null){//只监听对象和数组
               return target
           }
           for( let key in target){
            defineRective(target,key,target[key])
           }
       }
       function defineRective(target,key,value){
           observer(value)
        Object.defineProperty(target,key,{
            get(){
                return value;
            },
            set(newValue){
                if(newValue!==value){
                    value=newValue;
                    update();
                }
            }
        })
       }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值