vue3选项式api如何监控数组变化
1、vue3数组监控的问题
vue3中使用监控器 watch 能够完成一些基本类型数据的监控，但是如果碰到复杂类型的数据，除了直接给变量的赋值操作，元素的添加和改变（包括长度变化）普通watch是监控不到的。
这里的复杂类型包括对象和数组。
使用 vue3给出一个示例程序：
<template>
<div>
<div><button @click="change">按钮1</button></div>
<div><button @click="change2">按钮2</button></div>
</div>
</template>
<script>
export default{
data() {
return {
msg1: 1,
msg2: "test",
msg3: ["Tom","Jerry","Spiker"],
msg4: {a: "你好"}
}
},
methods: {
change(){
this.msg1 += 1
this.msg2 += 1
this.msg3.push("Rose")
this.msg4.b = "你也好"
},
change2(){
this.msg3 = ["Tom and Jerry"]
this.msg4 = {a: "你也好！"}
}
},
watch: {
msg1 (newValue, oldValue) {
console.log("msg1 change")
},
msg2 (newValue, oldValue) {
console.log("msg2 change")
},
msg3 (newValue, oldValue) {
console.log("msg3 change")
},
msg4 (newValue, oldValue) {
console.log("msg4 change")
}
}
}
</script>
<style>
</style>点击按钮1，程序的打印结果为：
说明 msg3和 msg4变量的元素添加确实没有监听到。
点击按钮2，程序打印结果为：
说明数组和对象的直接赋值操作是可以被 watch 监听到的。
那么为什么普通 watch 没有提供对数组和对象的元素变化的监听呢？ 问题原文。简而言之就是将基本类型的数据和复杂类型的数据做了区分，以避免复杂数据对于性能的损耗(个人理解)。
2、解决方案
2.1 vue版本
网上有些文章给出的解决办法是通过 this.$set() 来指定数组下标元素的变化，那么这样就可以直接使用 watch 来进行监听。但是没有写清楚，这是vue2的解决办法(也可能那些博主在写那些文章时vue3还没有发布)。
总之，vue3响应式数据的实现方法是和vue2不同的。比如上面的代码，如果是vue2的话，是可以实现 arr.push() 方法的监控，但是下标元素的改变，比如 arr[ index] = item 是实现不了的，所以需要监控的数组变量使用 this.$set() 来改变下标元素才能被 watch 监控到。
这篇文章只给出功能描述和写法，想弄清楚这种差别原因的需要去研究 vue2和vue3响应式实现原理的不同。喜欢的同学可以去研究一下源码。
2.2 vue3选项式api深度监控的写法
vue3的数据响应是基于代理 proxy,所以取消了 this.$set()的使用，但是引入深度监控的写法。所以 vue3可以通过 watch的深度监控来实现数组和对象变化的响应。
这里修改一下上面的代码，将 msg3和 msg4的监控器改成：
msg3: {
deep: true,
handler(newValue, oldValue) {
console.log("msg3 change")
}
},
msg4 : {
deep: true,
handler(newValue, oldValue) {
console.log("msg4 change")
}
}重新点击一下按钮1 ，打印结果变成：
实现了对于数组和对象的内容元素监控。
3、结论
vue3要实现数组监控的话，可以使用深度监控来实现。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家整理的是一篇关于Vue3.0的优化总结内容，有需要的朋友们可以学习下。2020-10-10
Element-UI日期选择器(选择日期范围)禁用未来日期实现代码
我们在网页开发时通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于Element-UI日期选择器(选择日期范围)禁用未来日期的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了Vue3 组合式函数Composable最佳实战详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了使用vue-router切换组件时使组件不销毁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
相信大家做项目的时候,功能中都有导出模块,下面这篇文章主要给大家介绍了关于vue导出excel表格的详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
下面小编就为大家分享一篇vue.js,ajax渲染页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Vue.js 是一个渐进式的JavaScript框架,广泛用于构建交互式用户界面,在 Vue 中,双向绑定是一项非常核心的概念,尤其是在处理表单输入时,它使得数据和用户界面之间的互动变得简单又高效,在本篇博客中,我们将深入探讨如何在 Vue 3 中实现表单输入的双向绑定2025-01-01
uniapp前端实现微信支付功能全过程(小程序、公众号H5、app)
这篇文章主要介绍了uniapp前端实现微信支付功能的相关资料,通过uniapp开发跨平台应用时,需要处理不同平台的支付方式,包括微信小程序支付、公众号H5支付和App支付,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue中keep-alive 实现后退不刷新并保持滚动位置的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最新评论