Ref函数

创建基本类型和对象类型的响应式数据

  • 改值要加value
1
2
let age = ref(18)
age.value += 1
  • ref创建对象用的还是reactive，获取对象里的值要用.value（用reactive创建可以省略）
1
2
car.value.price = 10
games.value[0].name = 'game01'

Reactive函数

创建对象类型的响应式数据

1
let car = reactive({ brand: '奔驰', price: 100 })
  • 能修改对象里的属性的值，但不能一下修改整个对象，页面不会更新
    要用Object.assign(obj1,obj2)，obj1被覆盖（相同的属性）和增加（新的属性），还是响应式的
1
Object.assign(car,{brand:’奥迪’,price:1})
  • 用ref可以改整个对象，用value
1
car.value={ brand:’奥迪’,price:1}
  • 直接打印ref定义的x，是一个ref对象，因为要对象里的value值，所以要加.value
  • Reactive定义的对象，自动帮你拆包了，所以不用加.value，
    打印reactive定义的对象里的ref定义的属性，也不用加.value
1
2
3
4
5
6
7
8
9
10
let obj = reactive({
    a:1,
    b:2,
    c:ref(3)
})
let x = ref(9)
console.log(obj.a)
console.log(obj.b)
console.log(obj.c)
console.log(obj.x.value)

Proxy

  • Proxy可以增删改查响应式
  • 比object.defineproperty多一个deleteProperty
  • set不仅能改还能增，且函数里面有参数
1
2
3
4
5
6
7
8
new Proxy(data, {
//读取属性值
    get (target, prop) {return Reflect.get(target, prop) },
    //设置属性值或添加新属性
    set (target, prop, value) {return Reflect.set(target, prop, value)},
    //删除属性
    deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}//return布尔值
})