Vue中的$set和Vue.set方法(视图更新)

这里我定义了一个列表数据，我将通过按钮来控制列表数据。

比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。

<template>
  <div id="app" style="padding: 100px">
    <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link>
    <el-button @click='btn2Click()'>动态赋值</el-button>
  </div>
</template>
<script>
  import Vue from 'vue'
    export default {
      name: "test",
      data() {
        return{
          items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
          ]
        }
      },
      methods:{
        btn2Click(){
          this.items[0] = {message:"Test four",id:"10"}
          console.log(this.items)
        },
      },
    }
</script>

当我点击按钮通过JS赋值的方法,将Tset one改为 Test four时，发现控制台已经改变了，但是视图并没有更新


因此修改失败

Vue.set() 方法
调用方法：Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

<template>
  <div id="app" style="padding: 100px">
    <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link>
    <el-button @click='btn2Click()'>动态赋值</el-button>
  </div>
</template>
<script>
  import Vue from 'vue'
    export default {
      name: "test",
      data() {
        return{
          items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
          ]
        }
      },
      methods:{
        btn2Click(){
          Vue.set(this.items,0,{message:"Test four",id:"10"})
          console.log(this.items)
        },
      },
    }
</script>

还是点击按钮如下图


这次控制台变化的同时，视图页面也跟着变化

总结：
在vue文档中写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
数据发生变化视图不更新 那就要Vue.set方法来设置