cari

Rumah >hujung hadapan web >View.js >Analisis ringkas Vue.set dan ini.$set dalam Vue dan lihat senario penggunaan!

Analisis ringkas Vue.set dan ini.$set dalam Vue dan lihat senario penggunaan!

青灯夜游
青灯夜游ke hadapan
2022-03-04 16:41:123066semak imbas

Artikel ini akan membincangkan tentang Vue.set dan ini.$set dalam Vue, dan memperkenalkan senario penggunaan dan penggunaan Vue.set dan ini.$set. Saya harap ia akan membantu semua orang !

Analisis ringkas Vue.set dan ini.$set dalam Vue dan lihat senario penggunaan!

1 Mengapa Vue.set

Disebabkan pengehadan JavaScript, Vue tidak dapat mengesan perubahan dalam tatasusunan dan objek dalam data, jadi ia tidak akan mencetuskan View. dikemas kini. Tutorial video vuejs

2. Penyelesaian

Array

1. Gunakan kaedah mutasi yang disediakan oleh Vue

Analisis ringkas Vue.set dan ini.$set dalam Vue dan lihat senario penggunaan!

Vue merangkum kaedah tatasusunan JS ini dan kemas kini tatasusunan boleh dikesan melalui kaedah ini.

2. Gantikan keseluruhan tatasusunan asal

Dalam contoh berikut, 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. Gunakan Vue.set (lihat di bawah)

Objek

1

Dalam contoh berikut, adalah perlu untuk menambah pasangan nilai kunci {test: 'newthing'} pada objek

<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. Lihat di bawah)

3 Vue.set

Vue tidak dapat mengesan tatasusunan

Perubahan. kepada tatasusunan berikut:

    Apabila menggunakan nilai indeks untuk menetapkan item tatasusunan secara langsung, seperti
  • vm.list[0]=newValue
    • Apabila mengubah suai panjang tatasusunan, seperti
  • vm.list.length=newLength
Contohnya

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 // 不是响应性的
Anda boleh menggunakan Vue.set atau ini.$set

Cara menggunakan

Vue.set(target,index,newValue)

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

Untuk objek

Vue tidak dapat mengesan penambahan atau pengalihan sifat. Memandangkan Vue akan melakukan penukaran getter/setter pada hartanah apabila memulakan instance, sifat tersebut mesti wujud pada objek data agar Vue menukarnya kepada reaktif.

Beri saya contoh

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

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

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

Cara menggunakan

Vue.set(target,key,value)

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

Ambil perhatian bahawa

Vue tidak membenarkan penambahan dinamik

peringkat akar sifat responsif 

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

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

Analisis ringkas Vue.set dan ini.$set dalam Vue dan lihat senario penggunaan!

sahaja Kaedah Vue.set boleh digunakan (objek, propertyName, nilai) menambah sifat responsif pada

objek bersarang

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

4. Senario Penggunaan

Apabila kita Apabila tatasusunan atau objek dalam data diubah suai, sesetengah operasi tidak responsif Vue tidak dapat mengesan kemas kini data dan oleh itu tidak mencetuskan kemas kini paparan. Pada masa ini, anda perlu menggunakan Vue.set() untuk kemas kini data responsif.

(Mempelajari perkongsian video:

tutorial vuejs, bahagian hadapan web)

Atas ialah kandungan terperinci Analisis ringkas Vue.set dan ini.$set dalam Vue dan lihat senario penggunaan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript Object 封装 Length Property JS 对象 this
Kenyataan：
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Ajar anda langkah demi langkah cara melaksanakan pengikatan dua hala vueArtikel seterusnya：Ajar anda langkah demi langkah cara melaksanakan pengikatan dua hala vue

Artikel berkaitan

Lihat lagi