vue2 $set 后期添加响应式数据的问题，使用vm.$set()

后期添加数据的问题

后期给Vue的实例添加的属性，会有响应式吗？

• 后期给Vue实例vm动态的追加的一些属性，不会添加响应式处理

• 例如：vm.$data.a = 77

• 通过这种直接方式后期给vm追加的属性并没有添加响应式处理

避免在运行时向vm或其根$data添加响应式

不能直接给vm / vm.$data 追加响应式属性。只能在声明时提前定义好

例如：

Vue.set(vm.$data,'email','tom123@.com')
Vue.set(vm,'email','tom123@.com')

对象的响应式处理

想给后期追加的属性添加响应式处理的，有以下俩个方法：

Vue.set() 、 vm.$set()

语法：

Vue.set(目标对象, 属性名, 属性值)
vm.$set(目标对象, 属性名, 属性值)

示例：

Vue.set(vm.$data.a,'email','jack126@.com')
Vue.set(vm.a,'email','jack126@.com')
vm.$set(vm.a,'email','tom123@.com')

数组的响应式处理

通过数组的下标去修改数组中的元素，默认情况下是没有添加响应式处理

解决方案一：

通过 Vue.set() 、 vm.$set() 去解决

vm.$set(数组对象, 下标, 值)  vm.$set(vm.users,0,'杰克')
Vue.set(数组对象, 下标, 值)  Vue.set(vm.users,0,'杰克')

解决方案二：

在Vue当中，通过以下的7个方法来给数组添加响应式处理

• push()
• pop()
• reverse()
• splice()
• shift()
• unshift()
• sort()

示例：

vm.users.push('888')

演示：

演示通过数据下标更改数组，页面无法出现响应式

 <script src='https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js'></script>
 <div id ="root">{{users}}</div>
  <script>
   let vm = new Vue({
    el: '#root',
    data(){
      return {
        users: ["jack", "lucy", "james"]
      }},
   });
   vm.users[0]='tom'
   console.log(vm.users[0])  //tom (打印出来是tom，说明数据已经改变，但是视图未改变，不是响应式的)
   // 数组的push方法
    vm.users.push('tim') 
    console.log(vm.users)  // [ "tom", "lucy", "james", "tim" ] （视图改变说明是响应式数据）
    vm.$set(vm.users, 0 ,'汤姆')   // （视图改变说明是响应式数据）
    Vue.set(vm.users, 1 ,"露西")   // （视图改变说明是响应式数据）
  </script>