2022-09-08 vue给对象新增属性

问题：在实例创建之后添加新的对象，然后新增属性

参考代码：Vue-给对象新增响应式属性（使用Vue.$set()或者Object.assign()）

解决：如果你要为一个对象添加一个属性的话，且没有在源对象里面定义这个属性，添加之后是不会监听到的，解决方法：
1.可以在对象中先定义你需要在使用中用到的对象，设置为空
2.使用this.$set(对象,属性,值); 

new Vue({
    el: '#test',
    data() {
        return {
            student: {}
        }
    },
...
mounted() {
    var that = this
    //获取数据
    $.post("localhost/test/list", {"studentId": this.studentId}, function (data) {
        for (let i = 0; i < data.data.length; i++) {
            that.student = {name:"张三", age: "18"}// 改变this.student.name、age的值视图会更新
            that.student.name ="张三"// 改变this.student.name的值  视图不会更新
            Object.assign(this.student, {name: "张三"})// 改变this.student.name的值  视图不会更新
            this.student= Object.assign({}, this.student, {name: "张三"})// 触发视图更新

            that.student = {}
            that.$set(this.student,"name", "张三")//改变this.student.name时 视图会更新
            that.$set(this.student,"age", "18")
            that.$set(this.student,"sex", "男")
         }
     }, "json");
}
...
});

在vue代码中,只要是在data对象里定义的内容（student）,赋值后的属性值变化，视图实时变化。

根据官方文档定义：

• 如果在实例创建之后添加新的属性到实例上，不会触发视图更新。
• Vue不允许在已创建的实例上动态添加新的根级响应式属性。但可以是使用Vue.set（object，key，value）方法将响应属性添加到嵌套的对象上。

根据上面的定义，student是已创建的实例，name就是新增属性，name不会触发视图更新，如果想触发视图更新，需要使用Vue.$set()方法，既可以新增属性,又可以触发视图更新。

vue 中 [__ob__:]这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。

_ob_同时也表示此数据会随着值改变，vue触发视图更新。