vue給對象添加屬性沒有響應(yīng)式

vue2的響應(yīng)式原理使用的是對象代理去實現(xiàn)的，對象代理中有一個get和set方法，當(dāng)我們訪問對象的時候就會觸發(fā)get方法，當(dāng)我們對對象中的值進行修改時會觸發(fā)set方法。

但是當(dāng)我們給對象添加一個新的屬性時對象代理是檢測不到的，所以就會出現(xiàn)直接給對象添加屬性響應(yīng)式不生效的問題。

在vue中可以使用this.$set(對象名,'屬性名',屬性值)的方法去給對象添加屬性，或者使用Vue.set(對象名,'屬性名',屬性值)的方法進行添加，添加之后的屬性就帶有響應(yīng)式了!!

this.$set(this.goodsdata, 'isShow', false)

給已創(chuàng)建的vue添加響應(yīng)式屬性

我們知道，vue的data中變量都是響應(yīng)式的，即數(shù)據(jù)改變，視圖會一起改變；視圖改變，數(shù)據(jù)也會響應(yīng)變化。

但當(dāng)我們給已創(chuàng)建好的vue實例中data中的變量對象添加屬性時，數(shù)據(jù)雖然會更新，但視圖卻不會發(fā)生更新。

<template>
  <div id="app">
    <button @click="changem">按鈕</button>
    <ul v-for="item in items">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>
 
<script>
import Vue from "vue";
 
export default {
  name: "App",
  data() {
    return {
      items: {
        a: "我是a",
      },
    };
  },
  methods: {
    changem() {
      this.items.m = "我是m";
      console.log(this.items);
    }
}
</script>

上面代碼中，我們通過v-for來展示items中所有的屬性值，在通過changm函數(shù)向items中添加一個屬性m，并賦值為‘我是m’。

但是執(zhí)行函數(shù)后，雖然items發(fā)生了改變，但視圖中items卻沒有改變，（也并沒有m這屬性的getter和setter，只有原來的屬性a的getter和setter）這說明我們添加的這個屬性并不是響應(yīng)式的。

如圖1、圖2：

圖1.視圖

圖2.Chrome控制臺輸出

怎么才能添加響應(yīng)式的屬性呢？

1.使用this.$forceUpdata()函數(shù)使得vue強制更新視圖和數(shù)據(jù)（不推薦使用）。（調(diào)用強制更新方法this.$forceUpdate()會更新視圖和數(shù)據(jù)，觸發(fā)updated生命周期。）

代碼：

 <button @click="change1">按鈕b</button>
.
.
.
.
.
 change1() {
      this.items.b = "我是b";
      this.$forceUpdate(); 
      console.log(this.items);
      this.$nextTick(() => {
        console.log(this.items);
      })
    }

運行如圖3、4

圖3

圖4

我不太明白的是這里也沒有b的get和set函數(shù)。

2.Vue.set()函數(shù) 

代碼：

    <button @click="change2">按鈕c</button>
.
.
.
.
.
 change2() {
      Vue.set(this.items, "c", "我是c"); //視圖更新
      console.log(this.items);
    },

運行如圖5、6

圖5 

圖6

這次視圖更新了，而且也有c的get和set函數(shù)，但是這樣添加的屬性較少，添加大量屬性可用下面這種方法。

3.使用Object.assign() 函數(shù).

代碼：

    <button @click="change3">按鈕d</button>
.
.
.
.
.
    change3() {
      this.items = Object.assign({}, this.items, {
        d: "ddd",
        e: "eee",
      });
      console.log(this.items);
    }

運行如圖7、8

圖7

圖8

這里也是視圖更新，并且生成了d、e的get和set。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論