vue打卡－对象的数据响应变化

• vue什么样的数据不能在页面显示
  未计划的数据，即在data中未定义的数据

<div id="app">
    <!--<p>{{a}}</p>-->
    <!--该数据未计划定义，无法显示-->
</div>

let message = "计划数据";

    let vm = new Vue({
        el:"#app",
        //只有计划好的数据才能做响应
        data:{
            message:message,
            addMessage:{}
        }
    });

未定义的数据.png

页面无内容显示

• 如何添加未计划的数据

//这种方法不能添加未计划的数据
    // vm.addMessage.content="新加入的数据";//该数据无法加入

1.使用静态方法Vue.set(target,prop,value)
Vue.set(vm.addMessage,"content","使用静态方法set()加入的数据");
2.使用实例方法$set(target,prop,value)
vm.$set(vm.addMessage,"text","使用实例方法$set()加入的数据");

添加对象的属性.png
3.使用一般方法

  <div id="app">

    <p>原有：{{addMessage.a}}</p>
    <p>添加：{{addMessage.normal}}</p>

    <p>{{addMessage.text}}</p>
</div>

<script>
    let message = "计划数据";

    let vm = new Vue({
        el:"#app",
        //只有计划好的数据才能做响应
        data:{
            message:message,
            addMessage:{
                a:123
            }
        }
    });
    //使用一般方法,更改属性，但是不能保存原有的属性
    vm.addMessage={normal:123}

原有的属性丢失.png
4.解决上述问题
使用Object.assign方法

 //Object.assign(vm.addMessage,{name:value})
    let o = Object.assign(vm.addMessage,{name:value});
    console.log(o===vm.addMessage);//true,vue的机制当数值不发生改变时，默认不刷新


    //改写属性的数值，重新赋值，重新得到一个和原来名称相同的属性
    //使用Object.assign({},mv.addMessage,{name:value})
    vm.addMessage = Object.assign({},vm.addMessage,{text:"使用assign添加数据"})

assign.png