如何触发组件的更新

情况一

定义在data 返回值外部,此时修改name是不会触发视图的更新

 data() {
    //不会触发更新
    this.name = name;
    return {
    };
  },

情况二

没有事先在data中定义就修改使用,也是不会触发

this.info.name="xxxx"

  data() {
    return {
      info: {},
    };
  },

可以使用如下方式解决

this.$set(this.info, 'name', 1)

情况三

事先在data中 定义了的但是没有在组件中使用也是不会触发更新的

情况四

使用一些常用的数组方法来修改数组,比如push 数组的引用虽然没有改变但是依然会出发组件的更新,简单说因为 Vue框架对数组的push、pop、shift、unshift、sort、splice、reverse方法进行了改造，在调用数组的这些方法时，Vue会Notify Wacher并更新视图

如果你通过索引值的方式也想要触发组件更新,可以使用Vue.set方法

Vue.set(this.list, 0, 'value') //set(要修改的对象, 索引值, 修改后的值)