vue this.$set解决视图未同步更新

视图未更新原因:在vue2中用数组下标修改值时或者新增对象Key值时 这样vue的devsrve函数是监听不到数据的变化的所以就会导致数据更新视图未更新

1.数组利用下标修改值 (错误示范)

new Vue({
        el: "#app",
        data: {
            arr: ["列表1", '列表2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                this.arr[0] = "列表0" // !错误的 这样是不响应的
            }
        }
    })
           

解决方案:

    ① 可以利用this.$set()  

     参数一：目标数据

     参数二：目标数据的下标或者key值

      参数三：所赋予的值

new Vue({
        el: "#app",
        data: {
            arr: ["列表1", '列表2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                     this.$set(this.arr, 0, "列表0")
                     //this.$set(目标数组, 元素索引号, "属性修改为")
            }
        }
    })
           

2.对象新增key值时 (错误示范)

new Vue({
        el: "#app",
        data: {
            arr: ["列表1", '列表2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                this.newObj.b="456" //！这样给对象新加key值得方式是不响应的
            }
        }
    })
           

解决方案

   ①  利用this.$set()

new Vue({
        el: "#app",
        data: {
            arr: ["列表1", '列表2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                this.$set(this.newObj, "b", "456")
               // this.$set(目标对象, "新增的属性名", "新增的属性值")
            }
        }
    })