Vue3-04-reactive() 响应式失效的三种情况-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3-04-reactive() 响应式失效的三种情况。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.替换对象后导致失效

简单理解 ： 变量指向的对象换了，对原来的对象，当然没有了响应式的效果了。

    // 声明 变量
    let obj1 = reactive({name:"第一个对象"})
    // 改变 变量的指向
    obj1 = reactive({name:"第二个对象的属性"})
    console.log('obj1.name : ',obj1.name)

Vue3-04-reactive() 响应式失效的三种情况,Vue3,javascript,vue3,reactive响应式失效

2.解构之后导致失效

将 reactive() 的对象解构成本地变量之后，
直接操作本地变量，是不会影响 原对象的属性值的。
这个也好理解，可以把解构看作是 定义了一个新的普通变量，
修改普通变量的值，当然是不会对响应式对象造成影响了，它俩根本就不是一个对象。

    // 声明 变量
    const obj2 = reactive({id:1002,name:"第一个对象"})
    // 解构出来 并重新赋值
    let {name,id} = obj2;
    id = 2002;
    name = '本地变量name的值'
    // obj2 不会改变，但是 name 和 id 的值会发生变化
    console.log('obj2 : ',obj2)
    console.log('name : ',name)
    console.log('id : ',id)

Vue3-04-reactive() 响应式失效的三种情况,Vue3,javascript,vue3,reactive响应式失效

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)

  
    // obj2 不会改变,属性值还是原来的值
    console.log('obj2 : ',obj2)

Vue3-04-reactive() 响应式失效的三种情况,Vue3,javascript,vue3,reactive响应式失效

整个对象作为参数


    // 声明 变量
    const obj2 = reactive({id:1002,name:"第一个对象"})

    // 定义一个函数
    const sayObj = (abc:any) =>{
        abc.name = 'aaa'
        console.log('对象属性修改完成')
    }
    
    sayObj(obj2)
   

    // obj2 不会改变,属性值还是原来的值
    console.log('obj2 : ',obj2)