响应系统Reactivity

# 响应系统Reactivity

会影响视图变化的数据是响应数据

JS的程序性。

let total = product.price * product.quantity
product.quantity = 10
// 当对象改变时，total不会发生变化，因为是值引用

1
2
3

Object.defineProperty()：在对象上定义新属性，或者修改一个对象的属性，并返回该对象

/**
* product 为对象变量
* 'quantity' 为product的一个属性
* set()、get()自定义属性的set和get方法
*/
Object.defineProperty(product,'quantity',{
    set(newVal){
        quantity = newVal
        product.price * product.quantity // 并更新总价值
    },
    get(){
        return quantity
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在Vue3中使用Proxy代替了Object.defineProperty。通过Proxy实现响应性核心API后，Vue不会再存在新增属性而失去响应性的问题。

由于JS的限制Vue不能监听对象和数组的变化。

Proxy的最佳拍档Reflect

let product = {
    'price': 10,
    'quantity': 2,
    get Total(){	// 方法变成了属性
        return this.price * this.quantity
    }
}
Reflect.get(product, 'Total') //获取product的Total属性值
Reflect.get(product, 'Total', p2)	//添加第三个参数可以修改对象中的this指向

1
2
3
4
5
6
7
8
9

响应性数据：

reactive => new Proxy() , 并设置handler为mutableHandlers = {get,set,deleteProperty,has,ownKeys},这些函数都是Vue定义好的，指定了这些行为的操作。为了防止重复生成Proxy，使用WeakMap

effect

ref

computed

watch

Map和WeakMap的区别

WeakMap的键必须是对象，且是弱引用。

弱引用：此引用不会影响垃圾回收机制。当引用的对象，除WeakMap中的引用都不存在时，WeakMap中的此对象也会消失。

Map的键不一定是对象，且是强引用。

编辑

← Vue3 TypeORM→