一竖配、給對象添加和刪除屬性

obj對象里面的每一個屬性通今，都會采用object.defineProperty去封裝，實現(xiàn)響應(yīng)式娇妓。
所謂響應(yīng)式兔跌，指的是數(shù)據(jù)發(fā)生變化后，頁面自動更新
給對象后添加的數(shù)據(jù)不會采用object.defineProperty去封裝峡蟋，所以就失去了響應(yīng)式

1.使用以下方法添加和刪除屬性坟桅，不會有響應(yīng)式

       methods: {
          addsex() {
            this.obj.sex='男'
         },
          remove() {
            delete this.obj.age
        }}

2.為了解決這個缺陷，Vue通過$set和$delete方法給對象添加響應(yīng)式屬性

        methods: {
          addsex() {
            this.$set(this.obj, "sex", "男");
          },
          remove() {
            this.$delete(this.obj, "age");
          }}

二蕊蝗、數(shù)組操作響應(yīng)式

1.注意：采用這種方式仅乓，不會觸發(fā)頁面更新

    addArr(){
               this.arr[5] = 66  }}

2.在Vue中操作數(shù)組，并觸發(fā)頁面更新蓬戚，只能使用數(shù)組的以下方法：

①push后添加
②unshift前添加
③pop后刪除
④shift前刪除
⑤revese翻轉(zhuǎn)數(shù)組
⑥sort排序
⑦splice刪除添加

演示push,pop,splice如下：

        methods: {
          add() {
            this.arr.push(66);
          },
          rem() {
            this.arr.pop(1);
            this.arr.splice(2, 1);
          }}

3.如果想通過下標(biāo)操作數(shù)組夸楣，也必須要使用$set和$delete方法

       methods: {
          add() {
            this.$set(this.arr, 5, 66);
          },
          rem() {
            this.$delete(this.arr, 2);
          }
        }

三、最后來個深度響應(yīng)式小練習(xí)

1.把用戶填寫的屬性名和屬性值添加到obj對象里面子漩，并展示到頁面豫喧。下面input框是根據(jù)用戶輸入屬性名刪除對應(yīng)屬性名和屬性值

 <div id="app">
      <div>對象信息{{obj}}</div>
      <div>
        <p>屬性名：<input type="text" v-model="key" class="key" /></p>
      </div>
      <div>
        <p>屬性值：<input type="text" v-model="value" class="value" /></p>
      </div>
      <p>
        <button @click="addObj">添加屬性</button>
      </p>
      <div>
        <p>屬性名：<input type="text" v-model="key2" /></p>
      </div>
      <p>
        <button @click="delObj">刪除屬性</button>
      </p>
    </div>

2.使用$set和$delete添加和刪除

    new Vue({
        el: "#app",
        data: {
          key: "",
          value: "",
          obj: {},
          key2: "",
        },
        methods: {
          addObj() {
            this.$set(this.obj, this.key, this.value);
          },
          delObj() {
            this.$delete(this.obj, this.key2);
          },
        },
      });