Vue2.js给对象动态添加响应式属性

文档：

• 深入响应式原理

文档原文说

property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

不过发现一个奇怪的现象，userInfo.age 并没有在data 中定义，当点击按钮更新的时候，视图中的userInfo.age 也发生了变化

<template>
  <div class="">
    <div class="userinfo">
      name: {{ userInfo.name }} age: {{ userInfo.age }}
    div>

    <button @click="handleUpdateUserInfo">修改userInfobutton>
  div>
template>

<script>
export default {
  name: '',

  data() {
    return {
      userInfo: {
        name: 'Tom',
      },
    }
  },

  methods: {
    handleUpdateUserInfo() {
      this.userInfo.name = 'Jack'
      this.userInfo.age = 23
    },
  }
}
script>

<style lang="less">style>

<style lang="less" scoped>style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

但是，如果单独更新 age字段，视图并没有发生变化

handleUpdateUserInfo() {
  // this.userInfo.name = 'Jack'
  this.userInfo.age = 23
},
1
2
3
4

所以，userInfo.age 和文档说的一致，并不是响应式属性，而是userInfo.name 更新了触发视图更新

添加单个响应式属性

要让age也是响应式的，动态增加响应式效果，可以使用this.$set 方法，动态设置响应式属性

语法

// 向嵌套对象添加响应式 property
Vue.set(object, propertyName, value)
1
2

示例

handleUpdateUserInfo() {
  //   this.userInfo.name = 'Jack'
  //   this.userInfo.age = 23
  this.$set(this.userInfo, 'age', 23)
},
1
2
3
4
5

添加多个响应式属性

handleUpdateUserInfo() {
  // 创建一个新的对象
  this.userInfo = { ...this.userInfo, age: 23, school: 'pku' }
},
1
2
3
4