1.替换对象后导致失效
简单理解 : 变量指向的对象换了,对原来的对象,当然没有了响应式的效果了。
let obj1 = reactive({name:"第一个对象"})
obj1 = reactive({name:"第二个对象的属性"})
console.log('obj1.name : ',obj1.name)
2.解构之后导致失效
将 reactive() 的对象解构成本地变量之后,
直接操作本地变量,是不会影响 原对象的属性值的。
这个也好理解,可以把解构看作是 定义了一个新的普通变量,
修改普通变量的值,当然是不会对响应式对象造成影响了,它俩根本就不是一个对象。
const obj2 = reactive({id:1002,name:"第一个对象"})
let {name,id} = obj2;
id = 2002;
name = '本地变量name的值'
console.log('obj2 : ',obj2)
console.log('name : ',name)
console.log('id : ',id)
3.属性直接作为函数参数导致失效
将 reactice() 对象的属性,单独作为函数参数的时候,
若函数体内对此属性进行了修改,也不会对原属性产生影响。
可以理解为 是一种【值传递】的方式,而非 【引用传递】。
补充 :
但是,如果函数的参数是直接把整个的对象传进去的,则该对象让然保持响应式的状态!
此处可以理解为【引用传递】。
属性作为参数案例
const obj2 = reactive({id:1002,name:"第一个对象"})
const sayHello = (name:string):void => {
console.log('hello-1 : '+name)
name = '修改后的名称'
console.log('hello-2 : ',name)
}
sayHello(obj2.name)
console.log('obj2 : ',obj2)
整个对象作为参数
const obj2 = reactive({id:1002,name:"第一个对象"})
const sayObj = (abc:any) =>{
abc.name = 'aaa'
console.log('对象属性修改完成')
}
sayObj(obj2)
console.log('obj2 : ',obj2)