此章节与响应式原理有很大的关系

  • 除了未被声明过和未被渲染的数据外，还有什么数据更改后不会渲染页面？

    1.   <section id="app">
    2.     <!-- 即使向数组中添加了第4项，数组仍然显示3项 -->
    3.       {{ arr }}
    4.       {{ obj }}
    5.   </section>
    6.   <script>
    7.       const vm = new Vue({
    8.           el:'#app',
    9.           data:{
    10.               msg:'asdf',
    11.               arr:[1,2,3],
    12.               obj:{
    13.                   name:'zxt',
    14.                   age:'180',
    15.                   sex:'nan',
    17.               }
    18.           }
    19.       })
    20.       vm.arr[3]=100; // 不是响应式的
    21.   </script>

  • 修改数组的长度

    1.   <section id="app">
    2.     <!-- 更改了数组长度后，数组仍然显示1项 -->
    3.       {{ arr }}
    4.       {{ obj }}
    5.   </section>
    6.   <script>
    7.       const vm = new Vue({
    8.           el:'#app',
    9.           data:{
    10.               msg:'asdf',
    11.               arr:[1,2,3],
    12.               obj:{
    13.                   name:'zxt',
    14.                   age:'180',
    15.                   sex:'nan',
    17.               }
    18.           }
    19.       })
    20.       vm.arr.length = 0; // 不是响应式的
    21.   </script>

  • 添加或删除对象

    1.   <section id="app">
    2.       {{ arr }}
    3.       {{ obj }}
    4.   </section>
    5.   <script>
    6.       const vm = new Vue({
    7.           el:'#app',
    8.           data:{
    9.               msg:'asdf',
    10.               arr:[1,2,3],
    11.               obj:{
    12.                   name:'zxt',
    13.                   age:'180',
    14.                   sex:'nan',
    16.               }
    17.           }
    18.       })
    19.       vm.obj.wakaka= 'hahaha'; // 不是响应式的
    20.       delete vm.obj.name; // 不是响应式的
    21.   </script>

    数组与对象怎吗响应式更新

    更改数组：

  1. 利用数组变异方法：push、pop、shift、unshift、splice、sort、reverse
  2. 利用vm.$set/Vue.set实例方法
  3. 利用vm.$set或Vue.set删除数组中的某一项

vm.$set是Vue.set的别名，使用方法：Vue.set(object, propertyName, value)，也就是这个意思：Vue.set(要改谁，改它的什么，改成啥)
vm.$delete是Vue.delete的别名使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个)
更改数组用变异方法，就够了
更改对象就用vm.$set和vm.$delete
vm.$set()

  1.     <section id="app">
  2.         {{ arr }}
  3.         {{ obj }}
  4.     </section>
  5.     <script>
  6.         const vm = new Vue({
  7.             el:'#app',
  8.             data:{
  9.                 msg:'asdf',
  10.                 arr:[1,2,3],
  11.                 obj:{
  12.                     name:'zxt',
  13.                     age:'180',
  14.                     sex:'nan',
  16.                 }
  17.             }
  18.         })
  19.         vm.$set(vm.obj,name,'zzz');
  21.     </script>

vm.$delete

  1.          <section id="app">
  2.         {{ arr }}
  3.         {{ obj }}
  4.     </section>
  5.     <script>
  6.         const vm = new Vue({
  7.             el:'#app',
  8.             data:{
  9.                 msg:'asdf',
  10.                 arr:[1,2,3],
  11.                 obj:{
  12.                     name:'zxt',
  13.                     age:'180',
  14.                     sex:'nan',
  16.                 }
  17.             }
  18.         })
  19.         vm.$set(vm.obj,'name','zzz');
  21.     </script>