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

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的值并没有被渲染到页面上。

这是咋回事呢，这就是vue官方提示的注意事项。

由于 JavaScript 的限制，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>

我们使用vue提供的这个API之后，再看页面的渲染结果。 果然，可以正常地显示age属性的内容。

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

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>

Object.assign({}, this.someObject, { key1: value1, key2: value2 })

下面我们看一下页面的展示效果：

果然，非常的nice。

今天这个知识点还是比较重要的，无论是面试还是我们日常的开发，都可能会踩这个坑。