recherche

Maison >interface Web >Voir.js >Une brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios d'utilisation !

Une brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios d'utilisation !

青灯夜游
青灯夜游avant
2022-03-04 16:41:123056parcourir

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 !

Une brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios d'utilisation !

1. Pourquoi Vue.set

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

2. Solution

array

1. Utilisez la méthode de mutation fournie par Vue

Une brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios dutilisation !

Vue encapsule ces méthodes de tableau JS, grâce auxquelles les mises à jour de tableau peuvent être détectées.

2. Remplacez l'intégralité du tableau d'origine

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: &#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. Utilisez Vue.set (voir ci-dessous)

Objet

.

1. Remplacez l'intégralité de l'objet d'origine

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: &#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. )

3. Vue.set

Pour les tableaux

Vue ne peut pas détecter les modifications de tableau suivantes :

  • Lors de l'utilisation de la valeur d'index pour définir directement un élément de tableau, tel que vm. list[ 0]=newValue
    • 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 无法检测 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

Par exemple 

Vue.set(vm.someObject, &#39;b&#39;, 2)
Cette fois, vous pouvez utiliser Vue.set ou this.$set

Usage

Vue.set(target,index,newValue)

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

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

Pour les objetsUne brève analyse de Vue.set et this.$set dans Vue et un aperçu des scénarios dutilisation !

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. Par exemple

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;);

Comment utiliser

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!

JavaScript Object 封装 Length Property JS 对象 this
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Vous apprendre étape par étape comment implémenter une liaison bidirectionnelle vueArticle suivant：Vous apprendre étape par étape comment implémenter une liaison bidirectionnelle vue

Articles Liés

Voir plus