VUE 数组更新详解
关于vue数组更新，本文主要介绍了VUE 数组更新问题，文中给大家介绍了vue如何监听数据的变化的 ,需要的朋友可以参考下，希望能帮助到大家。
1、数据方法分类：
（1）原数组改变
push
pop
unshift
shift
reverse
sort
splice
（2）原数组未变，生成新数组
slice
concat
filter
对于使原数组变化的方法，可以直接更新视图。
对于原数组未变的方法，可以使用新数组替换原来的数组，以使视图发生变化。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<p id="app">
<ul>
<template v-for="book in books">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级',
author: 'b'
},
{
name: 'java',
author: 'c'
}
]
}
});
//直接可以使得视图改变
//app.books.push({name: 'c++',author: 'd'});
//需要更新原数组
app.books = app.books.concat([{name: 'c++',author: 'd'}]);
</script>
</body>
</html>注意：以下不会触发视图的更新。
（1）通过索引直接设置项。
（2）修改数组长度，app.books.length=1。
若不想改变原数组，可以使用计算属性来过滤数组，如：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<p id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级111',
author: 'b'
},
{
name: 'java33333',
author: 'c'
}
]
},
computed:{
filterBooks:function(){
return this.books.sort(function(a,b){
return a.name.length>b.name.length?1:-1
})
}
}
});
</script>
</body>
</html>那么vue如何监听数据的变化呢？
1）如何追踪变化
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
2）变化检测问题
受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。例如：
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：
Vue.set(vm.someObject, 'b', 2)
还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名，
以上是VUE 数组更新详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Windows无法访问指定设备、路径或文件
Jun 18, 2024 pm 04:49 PM
小伙伴电脑出现这样的故障，打开“此电脑”和C盘文件会提示“Explorer.EXEWindows无法访问指定设备、路径或文件。你可能没有适当的权限访问访问该项目。”包括文件夹、文件、此电脑、回收站等，双击都会弹出这样的窗口，右键打开又是正常的。这是系统更新导致，如果你也遇到这样的情况，下面小编教大家如何解决。一，打开注册表编辑器Win+R，输入regedit，或右键开始菜单运行输入regedit；二，定位注册表“计算机\HKEY_CLASSES_ROOT\PackagedCom\ClassInd
如何使用 foreach 循环去除 PHP 数组中的重复元素？
Apr 27, 2024 am 11:33 AM
使用foreach循环去除PHP数组中重复元素的方法如下：遍历数组，若元素已存在且当前位置不是第一个出现的位置，则删除它。举例而言，若数据库查询结果存在重复记录，可使用此方法去除，得到不含重复记录的结果。
Windows永久暂停更新,Windows关闭自动更新
Jun 18, 2024 pm 07:04 PM
Windows更新可能导致以下一些问题：1.兼容性问题：某些应用程序、驱动程序或硬件设备可能与新的Windows更新不兼容，导致它们无法正常工作或崩溃。2.性能问题：有时，Windows更新可能会导致系统变得更慢或出现性能下降的情况。这可能是由于新的功能或改进需要更多资源来运行。3.系统稳定性问题：某些用户报告称，在安装Windows更新后，系统可能会出现意外的崩溃或蓝屏错误。4.数据丢失：在罕见的情况下，Windows更新可能会导致数据丢失或文件损坏。这是为什么在进行任何重要的更新之前，备份您
PHP数组深度复制的艺术：使用不同方法实现完美复制
May 01, 2024 pm 12:30 PM
PHP中深度复制数组的方法包括：使用json_decode和json_encode进行JSON编码和解码。使用array_map和clone进行深度复制键和值的副本。使用serialize和unserialize进行序列化和反序列化。
PHP 数组键值翻转：不同方法的性能对比分析
May 03, 2024 pm 09:03 PM
PHP数组键值翻转方法性能对比表明：array_flip()函数在大型数组（超过100万个元素）下比for循环性能更优，耗时更短。手动翻转键值的for循环方法耗时相对较长。
PHP 数组分组函数在数据整理中的应用
May 04, 2024 pm 01:03 PM
PHP的array_group_by函数可根据键或闭包函数对数组中的元素分组，返回一个关联数组，其中键是组名，值是属于该组的元素数组。
AMD 发布新 AGESA 固件更新，修复影响 Zen 2 处理器的 Zenbleed 漏洞
May 03, 2024 pm 04:31 PM
本站5月3日消息，微星公司今天发布了AMDAM4AGESA1.2.0.Ca固件更新，修复了针对AMDRyzen4000系列Zen2APU中的Zenbleed安全漏洞。微星本次发布的固件更新适用于几乎所有X570主板，主要修复了适用于Zen2处理器中CVE-2023-20593，AMD将其归类为中级威胁。本站注：该漏洞追踪编号为CVE-2023-20593，能以每核心每秒30KB的速度窃取机密数据。此攻击会影响CPU上运行的所有软件，包括虚拟机、沙箱、容器和进程。尽管AGESA1.2.0.Ca的目
深度复制PHP数组的最佳实践：探索高效的方法
Apr 30, 2024 pm 03:42 PM
在PHP中执行数组深度复制的最佳实践是：使用json_decode(json_encode($arr))将数组转换为JSON字符串，然后再将其转换回数组。使用unserialize(serialize($arr))将数组序列化为字符串，然后将其反序列化为新数组。使用RecursiveIteratorIterator迭代器对多维数组进行递归遍历。
