Vue知识点总结(21)——对象的变更检测（超级详细）

news/2024/7/9 23:39:44 标签: vue, js, html, 前端

html" title=vue>vue官方文档中的深入响应式原理中有提到过，对于检测变化的一些注意事项。

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

这句话是啥意思呢？
我们先看一个小例子。

<div id="app">
    <h3>{{user.name}},{{user.age}}</h3>
    <button @click='handlerAdd'>添加属性</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{}
        },
        created () {
            this.user.name = 'Ray'
        },
        methods: {
            handlerAdd(){
                console.log('触发点击事件');
                this.user.age = 20;            }
        }
    });
</script>

首先我们在data中写了一个空的user对象，created钩子函数中，我们在user对象中添加了一个name属性，赋值为Ray。
然后我们写了一个按钮，重点的就是这个按钮的操作，我们想在这个按钮里继续添加一个age属性，赋值为20。
按照正常的逻辑来说，这应该是没问题的。
下面我们看看页面的渲染情况。
在这里插入图片描述
在控制台输出了语句，说明我们触发了点击事件，但是age的值并没有被渲染到页面上。

这是咋回事呢，这就是html" title=vue>vue官方提示的注意事项。

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

下面我们看一下如何解决这个问题？
html" title=vue>vue提供了一个API，Vue.$set(object,key,value)，用于避免这种问题的发生。

<div id="app">
    <h3>{{user.name}},{{user.age}}</h3>
    <button @click='handlerAdd'>添加属性</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{}
        },
        created () {
            this.user.name = 'Ray'
        },
        methods: {
            handlerAdd(){
                console.log('触发点击事件');
                this.$set(this.user,'age',20);       }
        }
    });
</script>

我们使用html" title=vue>vue提供的这个API之后，再看页面的渲染结果。
在这里插入图片描述
果然，可以正常地显示age属性的内容。

但是上面这种API，Vue.$set(object,key,value)，一次只能添加一个属性。如果我们想一下添加多组属性呢？

html" title=vue>vue也为我们提供了对策。

<div id="app">
    <h3>{{user.name}},{{user.age}}</h3>
    <button @click='handlerAdd'>添加属性</button>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            user:{}
        },
        created () {
            this.user.name = 'Ray'
        },
        methods: {
            handlerAdd(){
                console.log('触发点击事件');
                 this.user = Object.assign({},this.user,{
                      age:20,
                      phone:18331092918
                 })   
            }
        }
    });
</script>