Vue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。-Vue.js-php.cn

Vue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。

青灯夜游

リリース： 2022-03-04 19:48:39

転載

3033 人が閲覧しました

この記事では、Vue における Vue.set と this.$set について説明し、Vue.set と this.$set の使用方法と使用シナリオを紹介します。！

Vue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。

1. Vue.set の理由

JavaScript の制限により、Vue はデータ内の配列とオブジェクトの変更を検出できないため、View はトリガーされません更新しました。 vuejs ビデオチュートリアル

2. ソリューション

Array

1. Vue

# が提供する突然変異メソッドを使用します。

Vue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。

Vue はこれらの JS 配列メソッドをカプセル化しており、配列の更新はこれらのメソッドを通じて検出できます。

2. 元の配列全体を置き換えます

次の例では、vm.items[1] = 'excess'

<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items">
            {{ index }} : {{ item }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
    },
    created() {
        this.items = [&#39;a&#39;, &#39;test&#39;, &#39;c&#39;]
    }
})
</script>
</body>

ログイン後にコピー

3. Vue.set を使用します (下記を参照)

オブジェクト

1. 元のオブジェクト全体を置き換えます

次の例では、キーと値のペア {test: 'newthing'} をオブジェクトに追加する必要があります

<body>
<div id="app">
    <ul>
        <li v-for="(value, name) in object">
            {{ name }} : {{ value }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        object: {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;
        }
    },
    created() {
        this.object = {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;,
            test: &#39;newthing&#39;
        }
    }
})
</script>
</body>

ログイン後にコピー

2. Vue.set を使用します (下記を参照)

3. Vue.set

配列の場合

Vue は次の配列の変更を検出できません:

vm.list[0]=newValue
vm.list.length=newLength

たとえば、

var vm = new Vue({
  data: {
    items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
  }
})
vm.items[1] = &#39;x&#39; // 不是响应性的
vm.items.length = 2 // 不是响应性的

ログイン後にコピー

Vue.set または this.$set

などを使用できます。

使用方法

Vue.set(target,index,newValue)

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

ログイン後にコピー

// this.$set
vm.$set(vm.items, indexOfItem, newValue)

ログイン後にコピー

オブジェクトの場合

Vue はプロパティの追加または削除を検出できません。 Vue はインスタンスの初期化時にプロパティのゲッター/セッター変換を実行するため、Vue がリアクティブに変換するには、そのプロパティがデータオブジェクトに存在する必要があります。

クリをあげる

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

ログイン後にコピー

利用方法

Vue.set(target,key,value)

Vue.set(vm.someObject, &#39;b&#39;, 2)

ログイン後にコピー

this.$set(this.someObject,&#39;b&#39;,2)

ログイン後にコピー

注

Vueでは動的追加は許可されていません

ルートレベルレスポンシブ属性

const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)

Vue.set(app.data, &#39;b&#39;, 2)

ログイン後にコピー

Vue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。

使用のみVue.set(object, propertyName, value) メソッドを使用して、レスポンシブプロパティを

ネストされたオブジェクトに追加します

var vm=new Vue({
    el:&#39;#test&#39;,
    data:{
        //data中已经存在info根属性
        info:{
            name:&#39;小明&#39;;
        }
    }
});
//给info添加一个性别属性
Vue.set(vm.info,&#39;sex&#39;,&#39;男&#39;);

ログイン後にコピー