Cet article parlera de Vue.set et this.$set dans Vue, et présentera l'utilisation et les scénarios d'utilisation de Vue.set et this.$set. J'espère qu'il sera utile à tout le monde !
En raison des limitations de JavaScript, Vue ne peut pas détecter les changements dans les tableaux et les objets dans les données, il ne déclenchera donc pas les mises à jour des vues. tutoriel vidéo vuejs
Vue encapsule ces méthodes de tableau JS, grâce auxquelles les mises à jour de tableau peuvent être détectées.
Dans l'exemple suivant, 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>Dans l'exemple suivant, il s'agit d'ajouter une paire clé-valeur {test : 'newthing'} à l'objet
<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>Vue ne peut pas détecter les modifications de tableau suivantes :
vm. list[ 0]=newValuevm.list[0]=newValuevm.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 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
举个栗子
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的Vue.set(target,key,value)Lors de la modification de la longueur du tableau, par exemple vm.list.length=newLength
Vue.set(vm.someObject, 'b', 2)
Vue.set(target,index,newValue)</code ></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">this.$set(this.someObject,&#39;b&#39;,2)</pre><div class="contentsignin">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)
Vue.set(app.data, &#39;b&#39;, 2)</pre><div class="contentsignin">Copier après la connexion</div></div><h3 data-id="heading-12"><p>Pour les objets<img src="https://img.php.cn/upload/image/851/547/687/164638308062437Une brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios dutilisation !" title="164638308062437Une brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios dutilisation !" alt="Une brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios dutilisation !"/></p><p>Vue ne peut pas détecter l'ajout ou la suppression de propriétés. Étant donné que Vue effectuera une conversion getter/setter sur la propriété lors de l'initialisation de l'instance, la propriété doit exister sur l'objet de données pour que Vue la convertisse en réactif. <strong></strong>Par exemple</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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;);</pre><div class="contentsignin">Copier après la connexion</div></div><h4 data-id="heading-13">
<h2 data-id="heading-15">Comment utiliser<strong></strong>
</h2>
<code>Vue.set(target,key,value)
rrreeerrreee
Attention Vue n'autorise pas l'ajout dynamique de propriétés réactives au niveau racine
rrreee🎜🎜🎜🎜Vous ne pouvez utiliser que la méthode Vue.set(object, propertyName, value) pour ajouter des propriétés réactives aux 🎜objets imbriqués🎜🎜rrreee🎜🎜4 . Scénarios d'utilisation 🎜🎜🎜Lorsque nous modifions le tableau ou l'objet dans les données, certaines opérations ne répondent pas. Vue ne peut pas détecter les mises à jour des données, les mises à jour des vues ne seront donc pas déclenchées. Pour le moment, vous devez utiliser Vue.set() pour des mises à jour de données réactives. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜tutoriel vuejs🎜, 🎜web front-end🎜)🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
