Analisis ringkas Vue.set dan ini.$set dalam Vue dan lihat senario penggunaan!-View.js-php.cn

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

青灯夜游

Lepaskan： 2022-03-04 19:48:39

ke hadapan

3033 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

2. Lihat di bawah)

3 Vue.set

Vue tidak dapat mengesan tatasusunan

Perubahan. kepada tatasusunan berikut:

vm.list[0]=newValue
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 // 不是响应性的

Salin selepas log masuk

Anda boleh menggunakan Vue.set atau ini.$set

Cara menggunakan

Vue.set(target,index,newValue)

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

Salin selepas log masuk

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

Salin selepas log masuk

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` 是非响应式的

Salin selepas log masuk

Cara menggunakan

Vue.set(target,key,value)

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

Salin selepas log masuk

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

Salin selepas log masuk

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)

Salin selepas log masuk

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

Salin selepas log masuk

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!