Vue watch数组赋值时，第一次不触发更新watch现象解决方法（修正）

更新修正------ 

在工作中进行Vue框架使用中，总是会遇见数组不触发更新问题，因此在原来的基础上添加了官网上的代码和评论补充的代码。

官网中提到两种情况（数组更新无法触发）：

# 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

//官网代码
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

 1. 解决第一类问题vm.items[indexOfItem] = newValue

//解决第一类问题有两种方法和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// 1. Vue.set
Vue.set(vm.items, indexOfItem, newValue) 

// 2. Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue) //修改原数组

// 3. vm.$set   是全局方法 Vue.set 的一个别名：
vm.$set(vm.items, indexOfItem, newValue)

2. 解决第二类问题vm.items.length = newLength

// splice
vm.items.splice(newLength)

3. 原文修改（新方法添加比对）

要求每一次数组的变化都触发数组更新（watch 触发）

//这是原来的错误（？啰嗦麻烦）的栗子
watch：{
        "list"(){
                console.log("触发数组变化")
         },
}
methods中：
change(){
          for(let i=0;i<this.list.length;i++){ 
              this.list[i] = "11111"; // 直接用this.list[i]=1 不会触发数组更新
              this.$set(this.list, this.list[i], "11111")// 后两个参数与上一句效果相同
          }
          console.log(this.list);
},

 修改后：

    data: {
        list:['2',3,4,5]
    },
    watch:{
       // 评论提到的首次加载  数组触发
       'list':{
            immediate: true, // immediate选项可以开启首次赋值监听
            handler(newVal, oldVal) {
                console.log(newVal, oldVal)
                console.log("触发数组更改")
            }
        },
    },
    methods:{
       //除了fill方法外，每一个语句都能触发更新watch
        change(){
            //this.list.splice(7);
            //this.list.fill("0")  //数组初始化（用新语法代替for循环）
            //this.list.splice(1,1,'sdadasdada')
            //Vue.set(this.list,0,'22322424')
            this.$set(this.list,1,'22322424')
        }
    }