[JavaScript知识库]关于vue中$set的使用

this.$set的使用

在平时使用vue进行开发的时候，我经常会遇到一个这样的问题：

就是当data中包含声明且已赋值的对象或者数组（数组包对象）时，我们要向当前的这个对象中添加一个新的属性并且更新，结果发现并不会更新视图,只在控制台打印

<template>
  <div>
      <span>{{obj}}</span>
      <input type="button" @click="add()">
  </div>
</template>

<script>
export default {
    data(){
        return{
            obj:{
                name:"小明"
            }
        }
    },
    methods:{
        add(){
            if(!this.obj.age){
                this.obj.age = 20
            }else{
                this.obj.age++
            }
        }
    }
}
</script>

<style>

</style>

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

所以在data中注册的对象是响应式的，而后来添加的属性不是响应式的，只是个普通的属性，为了避免上面出现的问题，我们使用this.$set来向响应式对象中添加响应式的新属性

语法：this.$set(target,key,value)

target:目标对象（要更改的那个对象/数组）

key:要更改的具体属性（新属性）

value:新属性的值（或者重新赋的值）

<template>
  <div>
      <span>{{obj}}</span>
      <input type="button" @click="add()">
  </div>
</template>

<script>
export default {
    data(){
        return{
            obj:{
                name:"小明"
            }
        }
    },
    methods:{
        add(){
            if(!this.obj.age){
            	//语法：
                this.$set(this.obj,"age",23)
            }else{
                this.obj.age++
            }
        }
    }
}
</script>

<style>

</style>

以下为转载内容
$ set /Vue.set
$ nexttick,$ set