Vue之Vue.set动态新增对象属性方法

下面详细讲解"Vue之Vue.set动态新增对象属性方法"的完整攻略。

什么是Vue.set方法

在Vue.js中，我们经常会用到Vue.set方法，它是Vue.js提供的一个全局API，用于给对象动态添加属性，以便能够响应式地对对象进行渲染。

Vue.set方法的完整语法如下：

Vue.set(object, propertyName, value)

其中：

• object（必选）：表示要对其添加属性的目标对象；
• propertyName（必选）：表示要添加的属性名；
• value（必选）：表示要添加的属性值。

需要注意的是，如果要新增的属性名已经存在于目标对象中，则不会进行任何操作，而会直接返回目标对象。

Vue.set方法与对象响应式

Vue.js中通过数据劫持实现了数据的响应式，但是在以下两种情况下，Vue.js是无法检测到数据变化的：

• 当我们通过下标或长度修改数组时；
• 当我们直接给一个对象添加属性时。

在这两种情况下，我们就需要使用Vue.set方法来告诉Vue.js这个对象已经发生了变化。

假如我们有一个例如以下的data：

data: {
  obj: {name: 'vue'}
}

如果要动态新增obj的一个年龄属性，我们可以使用Vue.set方法：

// Vue.set语法
Vue.set(vm.obj, 'age', 18)

或者使用$set方法，这样做和Vue.set方法是等价的：

// $set方法
vm.$set(vm.obj, 'age', 18)

如果我们使用普通的赋值语句来新增属性：

// 直接给对象添加属性
vm.obj.age = 18

在这种情况下，虽然属性可以正常显示，但Vue.js是无法检测到obj的变化的。

示例1 - 动态添加对象属性

以下是一个示例，使用Vue.set方法向data中obj动态添加age属性：

<div id="app">
  <p>{{ obj.name }}</p>
  <p>{{ obj.age }}</p>
  <button @click="addAge">添加年龄属性</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    obj: {
      name: 'vue'
    }
  },
  methods: {
    addAge: function () {
      // 动态添加age属性
      Vue.set(this.obj, 'age', 18)
    }
  }
})

这里我们定义了一个名为addAge的方法，用于在点击按钮时向obj添加age属性。使用Vue.set方法，我们可以动态地向obj中添加属性，并且Vue.js能够检测到obj的变化并进行渲染。

示例2 - 动态添加嵌套属性

以下是一个示例，使用Vue.set方法向data中obj动态添加一个嵌套属性info：

<div id="app">
  <p>{{ obj.name }}</p>
  <p>{{ obj.info.age }}</p>
  <button @click="addInfo">添加info属性</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    obj: {
      name: 'vue'
    }
  },
  methods: {
    addInfo: function () {
      // 动态添加info属性
      Vue.set(this.obj, 'info', { age: 18 })
    }
  }
})

这里我们定义了一个名为addInfo的方法，用于在点击按钮时向obj添加一个嵌套属性info。使用Vue.set方法，我们可以动态地向obj添加属性，并且Vue.js能够检测到obj的变化并进行渲染。

至此，我们对"Vue之Vue.set动态新增对象属性方法"的完整攻略讲解就结束了。