ホームページ >ウェブフロントエンド >Vue.js >Vue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。
Vue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。
- 青灯夜游転載
- 2022-03-04 16:41:123065ブラウズ
この記事では、Vue における Vue.set と this.$set について説明し、Vue.set と this.$set の使用方法と使用シナリオを紹介します。 ！
1. Vue.set の理由
JavaScript の制限により、Vue はデータ内の配列とオブジェクトの変更を検出できないため、View はトリガーされません更新しました。 vuejs ビデオ チュートリアル
2. ソリューション
Array
1. Vue
# が提供する突然変異メソッドを使用します。
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: '#app',
data: {
items: ['a', 'b', 'c']
},
created() {
this.items = ['a', 'test', 'c']
}
})
</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: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
created() {
this.object = {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10',
test: 'newthing'
}
}
})
</script>
</body>
2. Vue.set を使用します (下記を参照)
3. Vue.set
配列の場合
Vue は次の配列の変更を検出できません:- インデックス値を使用して配列項目を直接設定する場合 (
- vm.list[0]=newValue
- vm.list.length=newLength
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
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, 'b', 2)
this.$set(this.someObject,'b',2)
注
Vueでは動的追加は許可されていませんルートレベルレスポンシブ属性
const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount('#app1')
Vue.set(app.data, 'b', 2)
ネストされたオブジェクトに追加します
var vm=new Vue({
el:'#test',
data:{
//data中已经存在info根属性
info:{
name:'小明';
}
}
});
//给info添加一个性别属性
Vue.set(vm.info,'sex','男');
4。使用シナリオ
いつ いつデータ内の配列またはオブジェクトを変更すると、一部の操作が応答しなくなります。Vue はデータの更新を検出できないため、ビューの更新はトリガーされません。現時点では、応答性の高いデータ更新のために Vue.set() を使用する必要があります。 (学習ビデオ共有:以上がVue の Vue.set と this.$set を簡単に分析し、使用シナリオを見ていきます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。