vue的响应式系统

在之前vue项目的开发过程中,我一般会把在页面中需要用到的属性在data中进行定义
之前一直没有了解过原因,知道看到这个官方的解释

只有当实例被创建时就已经存在于 data 中的 property 才是响应式的.也就是说如果你添加一个新的 property，比如：vm.b = 'hi'那么对 b 的改动将不会触发任何视图的更新。
示例如下:

<template>
    <div>
        <div>{{ msg }}</div>
        <div>{{ name }}</div>
        <el-button @click="dianji">点击</el-button>
    </div>
</template>

data() {
    return {
        msg: "这只是个信息",
    }
},

created() {
    this.init()
},

methods:{
    init() {
        this.name = "明妃"
    },

    dianji() {
        this.name = "路主席"
        console.log(this.name)
    },
}

这样写代码,在页面上可以显示出来"明妃",但是点击按钮之后,this.name的值变为"路主席"了,页面上显示的却还是"明妃",因为this.name在vue实例创建时不在data中,没有被加入到vue的响应式系统中,this.name就不是响应式的,所以只对this.name进行修改不会触发试图更新
把上面的dianji方法改成下面这样,因为msg是响应式的,会触发视图更新,所以页面上的this.name内容也会变化

dianji() {
    this.name = "路主席"
    this.msg = "点击之后会被修改"
    console.log(this.name)
    console.log(this.msg)
},

个人感觉这样写并不好,所以还是在data()中预先声明吧
如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值.比如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

另:
vue.set() 或者 this.$set()也可以触发试图更新

vue.set()用法:向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。