Vue原理「十一」-- 响应式原理 *****

Vue响应式:组件data数据一旦变化,立刻触发视图的更新

1. 核心API - Object.defineProperty

基本用法

const data={}
var name='zhangsan'
Object.defineProperty(data,"name",{
    get:function(){
        console.log('get')
        return name
    },
    set:function(newVal){
        console.log('set')
        name = newVal
    }
})

console.log(data.name)
data.name="lisi"
console.log(data.name)
// get zhangsan
// set
// get lisi

2. 响应式需要 监听对象(深度监听)、监听数组

实现思路:
  • 定义触发视图更新的方法:updateView()
  • 重新定义数组原型 -> 实现调用数组方法时触发视图更新

创建新新对象,原型指向oldArrayProperty,再扩展新新的方法,不会影响原型,不污染全局变量.
在新定义的数组原型用添加 updateView()

  • 深度监听对象方法 observer() ->

判断是否是数组或对象类型,不是的话,直接返回
若是数组类型,指向自定义的数组原型
重新定义各个数据

  • 自定义监听方法 defineReactive()

在 Object.defineProperty 中的set方法中添加 updateView()方法触发视图更新;
在调用set方法前,定义深度监听方法 observer() 实现

  • 监听

准备一个对象数据
调用 深度监听对象方法 observer()
遍历对象每个属性,调用自定义监听方法 defineReactive()实现监听

实现代码:

// 触发更新视图
function updateView() {
    console.log("视图更新")
}

//重新定义数组原型
const oldArrayProperty=Array.prototype;
// 创建新新对象,原型指向oldArrayProperty,再扩展新新的方法,不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push','pop','shift','unshift','splice'].forEach(methodName=>{
    arrProto[methodName] = function () {
        updateView()//触发视图更新
        oldArrayProperty[methodName].call(this,...arguments)//
        // Array.prototype.push.call(this,...arguments) 真正数组原型的处理
    }
});


// 定义自定义属性,监听起来
function defineReactive(target, key, value) {
    //深度监听
    observer(value)

    Object.defineProperty(target, key,{
        get(){
            return value;
        },
        set(newValue){
            if (value != newValue) {
                // 设置新值
                // 注意,value一直在闭包中,此处设置完之后,再get时也是会获取最新的值。
                value = newValue
                // 触发更新视图
                updateView()
            }
        }
    })
}



// 监听对象属性
function observer(target) {
    if (typeof target != 'object' || target === null) {
        // 不是对象或者数组
        return target
    }
    if (Array.isArray(target)) {
        // 将数组类型数据 指向 自定义的数组原型 
        target.__proto__ = arrProto
    }
    // 重新定义各个属性
    for (const key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: "张三",
    age: 20,
    info:{
        address:"北京"  //深度监听
    },
    nums:[10,20,30]
}

// 监听数据
observer(data)

// 测试
// data.name = '李四'
// data.age = 22
// data.info.address = "上海" //深度监听

// data.x = '100' //新增属性 监听不到--所以有vue.set
// delete data.name //删除属性,监听不到 --所以有vue.delete


data.nums.push(4) //监听数组

3. Object.defineProperty的一些缺点

  • 深度监听,需要递归到底,一次性计算量大
  • 无法监听新增属性/删除属性(解决:Vue.set Vue delete)
  • 无法原生监听数组,需要特殊处理

vue 3.0 启用 Proxy

  • Proxy有兼容性问题
  • Proxy兼容性问题,无法polyfill
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页