vue-09-Vue.set和数组方法

 在全局之下：vm.$set(this.lists , 2 , 'alalal') ： 首先，如果你实例化了 Vue 对象，你可以使用 vm.$set ( 需要改变的数据对象 ， 需要改变的数据的key ， 需要改变后得到的值 )

在组件内部： this 可以取代 vm ，但是必须是在 Dom 节点 挂载之后 ，也就是需要在 mounted 以及 。 mounted 之后的钩子函数内部才能使用 this 因为此时 才会出现 this

如果是单html页面 ， 可以使用 Vue.set ( 需要改变的数据对象 ， 需要改变的数据的key ， 需要改变后得到的值 )

 

<li v-for="(item , index) in lists" :key="index">
  {{ item }}
</li>
<button @click="add">添加</button>

export default {
  data() {
    return {
      date : new Date(),
      lists : ['1' ,'2' ,'3' ,'4']
    };
  },
  methods: {
    add(){
      // this.lists[0] = '5' .   //这样数组也是会更新的，但是新添加的数据，不是响应式的，在控制台改变他的值，页面展示不会变化
      // this.lists.push('5')    //这样数组也是会更新的，而且因为是调用的数组的变异方法，vue会监听数据变化，说一新增的数据也是响应式的
      this.$set(this.lists , 2 , 'alalal') .  //这样即更新了数组，又讲新增加的数据也变成了响应式数据
    }
  },
};

这里改变数据 的方法 ，在vue 内部定义了叫做 变异数组方法，原因是因为 ，vue 内部将这些数组方法，进行处理过了，会自动改变原数组，也就是 变成了自动响应的数据

而vue 还有另外的 数组方法 ， 调用这些方法之后，不会改变原数组 ， 而是生成一个新的数组

变异数组：Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括

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

新数组：例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})