Vue 侦听器 watch 扩展之立即触发回调、深度监听和注销
时间:2022-07-22
本文章向大家介绍Vue 侦听器 watch 扩展之立即触发回调、深度监听和注销,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、立即触发回调
watch 最初绑定时是不会执行的,需要等监听的内容改变时才执行监听计算
那我们想要一开始绑定的时候就执行该怎么办呢?
可以修改一下 watch 写法,如下:
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
{ immediate: true }
}
}
上述写法用到了 handler 方法和 immediate 属性
1、handler 方法
原来我们 watch 中默认写的就是这个 handler,Vue 会去处理这个逻辑,最终编译出来其实就是这个 handler
2、immediate 属性
指定 immediate: true 将立即以表达式的当前值触发回调,即在 wacth 中声明了 firstName 之后就会立即执行里面的 handler 方法,如果为 false 就跟原来的效果一样,不会在绑定的时候就执行
二、深度监听
受 JavaScript 的限制,Vue 无法检测到对象属性的变化
例如,在下面的输入框中输入数据改变 obj.a 的值是无效的
<div>
<input type="text" v-model="obj.a">
</div>
new Vue({
el: '#root',
data: {
obj: {
a: 123
}
},
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj.a changed');
},
{ immediate: true }
}
}
})
默认情况下 handler 只监听 obj 这个属性的引用的变化,只有给 obj 赋值时它才会被监听到
如果我们需要监听 obj 中的属性 a 该怎么做呢?这时候就需要用到 deep 属性了
1、deep 属性
watch 中有一个属性 deep,默认值为 false,表示是否进行深度监听
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj.a changed');
},
{
immediate: true,
deep: true
}
}
}
设置 deep 为 true 后,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,这样就可以监听到属性 a 了
但这样性能消耗会非常大,只要修改 obj 中任一属性都会触发这个监听器里的 handler,因此我们可以使用字符串形式监听来进行优化:
watch: {
'obj.a': {
handler(newVal, oldVal) {
console.log('obj.a changed');
},
{
immediate: true
// deep: true
}
}
}
这样 Vue 会一层层解析下去,直到遇到属性 a,然后才给 a 设置监听函数
三、注销
1、unwatch 方法
const unwatch = app.$watch('text', (newVal, oldVal) => {
console.log('text changed');
})
unwatch(); // 手动注销 watch
注意在带有 immediate 选项时,不能在第一次回调时取消侦听给定的 property
// 这会导致报错
var unwatch = vm.$watch(
'value',
function () {
doSomething()
unwatch()
},
{ immediate: true }
)
如果仍想在回调内部调用一个取消侦听的函数,应该先检查其函数的可用性:
var unwatch = vm.$watch(
'value',
function () {
doSomething()
if (unwatch) {
unwatch()
}
},
{ immediate: true }
)
- P02_Hadoop CDH 5.3.6集群搭建
- P01_Spark开发测试运行环境安装Spark开发测试运行环境安装
- spark2.x依赖包POM
- P03_Hive 安装
- P06_flume-ng-1.5.0-cdh5.3.6安装
- P04_zookeeper-cdh5集群搭建
- P05_kafka_2.9.2-0.8.1集群搭建
- 再探matplotlib
- 分布式系统(Distributed System)资料
- Python性能提升20倍居然不是标题党?
- Spark开发电商日志分析用户行为聚合功能练习下面开始搭建开发环境注意Task表中最后一个列task_param中,Json的StartDate和EndDate需要设置成今天,因为mock数据的时候,
- HDU 3783 ZOJ
- HDU 1412 {A} + {B}
- HDU 2092 整数解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SpringBoot 整合 SpringDataJPA
- Codeforces Beta Round #51 C. Pie or die(博弈 思维)
- SpringDateJPA 系列之 JPA 中的相关操作
- python Turtle 画出“精美碎花小清新树”快来拿代码!
- SpringDataJPA 系列之 JPA 简介
- Leetcode 264. 丑数 II (数论,三指针,类dp)
- Leetcode 628. 三个数的最大乘积 (数学)
- Vue 组件化开发
- Spring Boot 基础配置
- 读懂 Java 单例模式
- 数值分析第一次实习题报告
- Leetcode 409. 最长回文串 (Hash)
- Vue 前后端交互基础
- Spring Boot 入门
- Nginx 负载均衡