Vue基础之侦听器详解
vue中什么是侦听器
- 开发中我们在data返回的对象中定义了数据,这个数据可以通过插值语法等方式绑定到templat中。
- 当数据变化的时候,template里绑定的数据会自动进行更新来显示最新的数据。但是这种变化是在template中自动侦听data的值来进行变换的
- 在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要用到侦听器watch了
官方定义:Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
一个对象,键是要侦听的响应式 property——包含了 data 或 computed property,而值是对应的回调函数。值也可以是方法名,或者包含额外选项的对象。组件实例将会在实例化时调用 $watch(),参阅 $watch,以了解更多关于 deep、immediate 和 flush 选项的信息
侦听器的用法
选项:watch
类型:{ [key: string]: string | Function | Object | Array}
侦听器watch的配置选项:
默认情况下,watch只是在侦听数据的引用变化,对于数据内部属性的变化是不会做出响应的:
这个时候我们可以使用一个选项deep进行更深层的侦听;另外一个属性,是希望一开始的就会立即执行一次:这个时候我们使用immediate选项;这个时候无论后面数据是否有变化,侦听的函数都会有限执行一次;
data的内容:
data() { return { info: { name: 'cgj' } } } watch: { info: { handler(newValue, oldValue) { console.log(newValue, oldValue) } deep: true, immediate: true, } }
另外一个是Vue3文档中没有提到的,但是Vue2文档中有提到的是侦听对象的属性:
'info.name': function(newValue, oldValue) { console.log(newValue, oldValue) }
还有另外一种方式就是使用 $watch 的API:
具体$watch可以查看官方的API查看(用的方式比较少):实例方法 | Vue.js
const app = createApp({ data() { return { a: 1, b: 2, c: { d: 4 }, e: 5, f: 6 } }, watch: { // 侦听顶级 property a(val, oldVal) { console.log(`new: ${val}, old: ${oldVal}`) }, // 字符串方法名 b: 'someMethod', // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深 c: { handler(val, oldVal) { console.log('c changed') }, deep: true }, // 侦听单个嵌套 property 'c.d': function (val, oldVal) { // do something }, // 该回调将会在侦听开始之后被立即调用 e: { handler(val, oldVal) { console.log('e changed') }, immediate: true }, // 你可以传入回调数组,它们会被逐一调用 f: [ 'handle1', function handle2(val, oldVal) { console.log('handle2 triggered') }, { handler: function handle3(val, oldVal) { console.log('handle3 triggered') } /* ... */ } ] }, methods: { someMethod() { console.log('b changed') }, handle1() { console.log('handle 1 triggered') } } }) const vm = app.mount('#app') vm.a = 3 // => new: 3, old: 1
vue侦听器-watch
目标: 可以侦听data/computed属性值改变
语法:
watch: { "被侦听的属性名" (newVal, oldVal){ } }
例子代码:
<template> <div> <input type="text" v-model="name"> </div> </template> <script> export default { data(){ return { name: "" } }, // 目标: 侦听到name值的改变 /* 语法: watch: { 变量名 (newVal, oldVal){ // 变量名对应值改变这里自动触发 } } */ watch: { // newVal: 当前最新值 // oldVal: 上一刻值 name(newVal, oldVal){ console.log(newVal, oldVal); } } } </script> <style> </style>
小结: 想要侦听一个属性变化, 可使用侦听属性watch
vue侦听器-深度侦听和立即执行
目标: 可以侦听data/computed属性值改变
语法:
watch: { "被侦听的属性名" (newVal, oldVal){ } }
例子代码:
<template> <div> <input type="text" v-model="user.name"> <input type="text" v-model="user.age"> </div> </template> <script> export default { data(){ return { user: { name: "", age: 0 } } }, // 目标: 侦听对象 /* 语法: watch: { 变量名 (newVal, oldVal){ // 变量名对应值改变这里自动触发 }, 变量名: { handler(newVal, oldVal){ }, deep: true, // 深度侦听(对象里面层的值改变) immediate: true // 立即侦听(网页打开handler执行一次) } } */ watch: { user: { handler(newVal, oldVal){ // user里的对象 console.log(newVal, oldVal); }, deep: true, immediate: true } } } </script> <style> </style>
小结: immediate立即侦听, deep深度侦听, handler固定方法触发
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/weixin_43094619/article/details/121708
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18