vue中数组变化检测问题
这次给大家带来vue中数组变化检测问题，vue中数组变化检测的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<p class="wrap">
<ul>
<li v-for="item,index in items" v-on:click="handle(index)">
<span>{{item.name}}</span>
<span>{{numbers[index]}}</span>
</li>
</ul>
</p>
<script>
var vm = new Vue({
el: ".wrap",
data: {
numbers: [],
items: [
{name: 'jjj'},
{name: 'kkk'},
{name: 'lll'},
]
},
methods: {
handle: function (index) {
// WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
if (typeof(this.numbers[index]) === "undefined" ) {
this.numbers[index] = 1;
} else {
this.numbers[index]++;
}
}
}
});
</script>
</body>
</html>这里的实现目的很明确 --- 我希望在点击li时先检测是否存在，当然是不存在的，所以就将值设置为1， 如果再次点击，就让数字累加。
但是出现的问题是： 点击之后数字并没有在view层更新，而通过console打印发现数据确实更新了，只是view层没有及时的检测到， 而我一直以来的想法就是： 既然vue实现的时数据双向绑定，那么在model层发生了变化之后为什么就没有在view层更新呢?
首先，我就考虑了这是不是数组的问题，于是，我测试了下面的例子：
例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<p class="wrap">
<ul>
<li v-for="item,index in items" v-on:click="handle(index)">
<span>{{item.name}}</span>
<span>{{numbers[index]}}</span>
</li>
</ul>
</p>
<script>
var vm = new Vue({
el: ".wrap",
data: {
numbers: [],
items: [
{name: 'jjj'},
{name: 'kkk'},
{name: 'lll'},
]
},
methods: {
handle: function (index) {
// 不是数组，这里更新数据就可以直接在view层渲染
this.items[index].name += " success";
}
}
});
</script>
</body>
</html>这时，我再测试时就发现，这里的model层发生了变化时，view层就能及时、有效的得到更新。
其中最重要的一句话就是 --- 如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新，这个方法主要用于避开Vue不能检测到属性被添加的限制。
那么什么情况下Vue是不能检测到属性被添加呢？ 根据参考链接，我们在文档上看到了很好的说明 --- 深入响应式原理
首先，我们要了解Vue是如何实现数据的双向绑定的！
把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
知识补充：
访问器属性不包含数据值，他们包含一对getter函数和setter函数（这两个函数不是必须的）。在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值；在写入访问器属性是，会调用setter函数并传入新值，这个函数负责决定如何处理数据。
访问器属性不能直接定义，必须是用Object.defineProperty()来定义。
下面是一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<script>
var book={
_year:2004,
edition:1
};
Object.defineProperty(book,"year",{
get:function(){
return this._year;
},
set:function(newValue){
if(newValue>2004){
this._year=newValue;
this.edition+=newValue-2004;
}
}
});
console.log(book.year); // 2004 在读取访问器属性时会调用get函数
book.year=2005; // 在给访问器属性赋值时会调用set函数
console.log(book.edition); // 2
</script>
</body>
</html>这个例子应该可以很好的理解访问器属性了。
所以，当对象下的访问器属性值发生了改变之后（vue会将属性都转化为访问器属性，之前提到了）， 那么就会调用set函数，这时vue就可以通过这个set函数来追踪变化，调用相关函数来实现view视图的更新。
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。即在渲染的过程中就会调用对象属性的getter函数，然后getter函数通知wather对象将之声明为依赖，依赖之后，如果对象属性发生了变化，那么就会调用settter函数来通知watcher，watcher就会在重新渲染组件，以此来完成更新。
OK！既然知道了原理，我们就可以进一步了解为什么出现了之前数组的问题了！
变化检测问题
收到现代JavaScript浏览器的限制，其实主要是 Object.observe() 方法支持的不好，Vue不能检测到对象的添加或者删除。然而Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它。
所以对于前面的例子就不能理解了 --- 数组中index都可以看做是属性，当我们添加属性并赋值时，Vue并不能检测到对象中属性的添加或者删除，但是其的确是添加或删除了，故我们可以通过console看到变化，所以就没有办法做到响应式； 而在第二个例子中，我们是在已有的属性的基础上进行修改的，这些属性是在最开始就被Vue初始化实例时执行了setter/getter的转化过程，所以说他们的修改是有效的，model的数据可以实时的在view层中得到相应。
补充知识： 什么是 Object.observe() ？
在介绍之前，不得不残忍的说，尽管这个方法可以在某些浏览器上运行，但事实是这个方法已经废弃！
概述： 此方法用于异步地监视一个对象的修改。当对象的属性被修改时，方法的回调函数会提供一个有序的修改流，然而这个接口已经从各大浏览器移除，可以使用通用的proxy 对象。
方法：
Object.observe(obj, callback[, acceptList])
其中obj就是被监控的对象， callback是一个回调函数，其中的参数包括changes和acceptList，
changes一个数组，其中包含的每一个对象代表一个修改行为。每个修改行为的对象包含:
name: 被修改的属性名称。
- object: 修改后该对象的值。
- type: 表示对该对象做了何种类型的修改，可能的值为"add", "update", or "delete"。
- oldValue: 对象修改前的值。该值只在"update"与"delete"有效。
acceptList在给定对象上给定回调中要监视的变化类型列表。如果省略， ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"] 将会被使用。
var obj = {
foo: 0,
bar: 1
};
Object.observe(obj, function(changes) {
console.log(changes);
});
obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]
obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci vue中数组变化检测问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Penyelesaian kepada i7-7700 tidak dapat menaik taraf kepada Windows 11
Dec 26, 2023 pm 06:52 PM
Prestasi i77700 adalah mencukupi untuk menjalankan win11, tetapi pengguna mendapati bahawa i77700 mereka tidak boleh dinaik taraf kepada win11 Ini terutamanya disebabkan oleh sekatan yang dikenakan oleh Microsoft, jadi mereka boleh memasangnya selagi mereka melangkau sekatan ini. i77700 tidak boleh dinaik taraf kepada win11: 1. Kerana Microsoft mengehadkan versi CPU. 2. Hanya Intel generasi kelapan dan versi ke atas boleh terus menaik taraf kepada win11 3. Sebagai generasi ke-7, i77700 tidak dapat memenuhi keperluan naik taraf win11. 4. Walau bagaimanapun, i77700 benar-benar mampu menggunakan win11 dengan lancar dari segi prestasi. 5. Jadi anda boleh menggunakan sistem pemasangan langsung win11 laman web ini. 6. Selepas muat turun selesai, klik kanan fail dan "muat"nya. 7. Klik dua kali untuk menjalankan "Satu klik
Karya terbaharu MIT: menggunakan GPT-3.5 untuk menyelesaikan masalah pengesanan anomali siri masa
Jun 08, 2024 pm 06:09 PM
Hari ini saya ingin memperkenalkan kepada anda artikel yang diterbitkan oleh MIT minggu lepas, menggunakan GPT-3.5-turbo untuk menyelesaikan masalah pengesanan anomali siri masa, dan pada mulanya mengesahkan keberkesanan LLM dalam pengesanan anomali siri masa. Tiada penalaan dalam keseluruhan proses, dan GPT-3.5-turbo digunakan secara langsung untuk pengesanan anomali Inti artikel ini ialah cara menukar siri masa kepada input yang boleh dikenali oleh GPT-3.5-turbo, dan cara mereka bentuk. gesaan atau saluran paip untuk membenarkan LLM menyelesaikan tugas pengesanan anomali. Izinkan saya memperkenalkan karya ini kepada anda secara terperinci. Tajuk kertas imej: Largelanguagemodelscanbezero-shotanomalydete
Algoritma pengesanan yang dipertingkatkan: untuk pengesanan sasaran dalam imej penderiaan jauh optik resolusi tinggi
Jun 06, 2024 pm 12:33 PM
01Garis prospek Pada masa ini, sukar untuk mencapai keseimbangan yang sesuai antara kecekapan pengesanan dan hasil pengesanan. Kami telah membangunkan algoritma YOLOv5 yang dipertingkatkan untuk pengesanan sasaran dalam imej penderiaan jauh optik resolusi tinggi, menggunakan piramid ciri berbilang lapisan, strategi kepala pengesanan berbilang dan modul perhatian hibrid untuk meningkatkan kesan rangkaian pengesanan sasaran dalam imej penderiaan jauh optik. Menurut set data SIMD, peta algoritma baharu adalah 2.2% lebih baik daripada YOLOv5 dan 8.48% lebih baik daripada YOLOX, mencapai keseimbangan yang lebih baik antara hasil pengesanan dan kelajuan. 02 Latar Belakang & Motivasi Dengan perkembangan pesat teknologi penderiaan jauh, imej penderiaan jauh optik resolusi tinggi telah digunakan untuk menggambarkan banyak objek di permukaan bumi, termasuk pesawat, kereta, bangunan, dll. Pengesanan objek dalam tafsiran imej penderiaan jauh
Masalah penilaian kesan pengelompokan dalam algoritma pengelompokan
Oct 10, 2023 pm 01:12 PM
Masalah penilaian kesan pengelompokan dalam algoritma pengelompokan memerlukan contoh kod khusus Pengelompokan ialah kaedah pembelajaran tanpa pengawasan yang mengelompokkan sampel yang serupa ke dalam satu kategori dengan mengelompokkan data. Dalam algoritma pengelompokan, cara menilai kesan pengelompokan adalah isu penting. Artikel ini akan memperkenalkan beberapa penunjuk penilaian kesan pengelompokan yang biasa digunakan dan memberikan contoh kod yang sepadan. 1. Indeks penilaian kesan pengelompokan Pekali Siluet Pekali siluet menilai kesan pengelompokan dengan mengira kehampiran sampel dan tahap pemisahan daripada kelompok lain.
Ajar anda cara mendiagnosis masalah iPhone biasa
Dec 03, 2023 am 08:15 AM
Dikenali dengan prestasi yang berkuasa dan ciri serba boleh, iPhone tidak terlepas daripada cegukan atau kesukaran teknikal sekali-sekala, ciri biasa di kalangan peranti elektronik yang kompleks. Mengalami masalah iPhone boleh mengecewakan, tetapi biasanya penggera tidak diperlukan. Dalam panduan komprehensif ini, kami menyasarkan untuk menyahmistifikasi beberapa cabaran yang paling biasa dihadapi yang berkaitan dengan penggunaan iPhone. Pendekatan langkah demi langkah kami direka untuk membantu anda menyelesaikan isu lazim ini, menyediakan penyelesaian praktikal dan petua penyelesaian masalah untuk mengembalikan peralatan anda dalam keadaan berfungsi terbaik. Sama ada anda menghadapi masalah atau isu yang lebih kompleks, artikel ini boleh membantu anda menyelesaikannya dengan berkesan. Petua Penyelesaian Masalah Umum Sebelum menyelidiki langkah penyelesaian masalah khusus, berikut adalah beberapa yang berguna
Bagaimana untuk menyelesaikan masalah yang jQuery tidak dapat memperoleh nilai elemen bentuk
Feb 19, 2024 pm 02:01 PM
Untuk menyelesaikan masalah yang jQuery.val() tidak boleh digunakan, contoh kod khusus diperlukan Untuk pembangun bahagian hadapan, menggunakan jQuery ialah salah satu operasi biasa. Antaranya, menggunakan kaedah .val() untuk mendapatkan atau menetapkan nilai elemen borang adalah operasi yang sangat biasa. Walau bagaimanapun, dalam beberapa kes tertentu, masalah tidak dapat menggunakan kaedah .val() mungkin timbul. Artikel ini akan memperkenalkan beberapa situasi dan penyelesaian biasa, serta memberikan contoh kod khusus. Penerangan Masalah Apabila menggunakan jQuery untuk membangunkan halaman hadapan, kadangkala anda akan menghadapi
AAAI2024: Far3D - Idea inovatif untuk secara langsung mencapai pengesanan sasaran 3D visual 150m
Dec 15, 2023 pm 01:54 PM
Baru-baru ini, saya membaca penyelidikan terkini tentang persepsi sekeliling visual tulen pada Arxiv Penyelidikan ini berdasarkan siri kaedah PETR dan memfokuskan pada menyelesaikan masalah persepsi visual tulen pengesanan sasaran jarak jauh, memanjangkan julat persepsi kepada 150 meter. Kaedah dan hasil kertas ini mempunyai nilai rujukan yang hebat untuk kami, jadi saya cuba mentafsirkannya Tajuk asal: Far3D: Expanding the Horizon for Surround-view3DObject Detection Paper pautan: https://arxiv.org/abs/2308.09616 Pengarang gabungan. ：Institut Teknologi Beijing & Teknologi Megvii Latar Belakang Tugasan Pengesanan Objek 3D dalam Memahami Pemanduan Autonomi
Masalah keupayaan generalisasi model pembelajaran mesin
Oct 08, 2023 am 10:46 AM
Keupayaan generalisasi model pembelajaran mesin memerlukan contoh kod khusus Dengan pembangunan dan aplikasi pembelajaran mesin yang semakin meluas, orang ramai semakin memberi perhatian kepada keupayaan generalisasi model pembelajaran mesin. Keupayaan generalisasi merujuk kepada keupayaan ramalan model pembelajaran mesin pada data tidak berlabel, dan juga boleh difahami sebagai kebolehsuaian model dalam dunia sebenar. Model pembelajaran mesin yang baik harus mempunyai keupayaan generalisasi yang tinggi dan dapat membuat ramalan yang tepat pada data baharu. Walau bagaimanapun, dalam aplikasi praktikal, kita sering menemui model yang berprestasi baik pada set latihan, tetapi gagal pada set ujian atau sebenar.
