vue中watch侦听器,deep和immediate的用法
1、deep深度监听的用法
当监听一个对象时,可能想监听整个对象的变化,而不仅仅是某个属性。但在默认情况下,如果你正在监听formData对象并且修改了formData.username,对应的侦听器并不会触发,它只在formData对象被整个替换时触发。
监听整个对象被称作深度监听,通过将deep选项设置为true来开启这一特性:

watch: {
formData: {
handler(val, oldVal) {
console.log(val, oldVal);
},
deep: true
}
}
2、immediate的用法
immediate表示在watch中首次绑定的时候,是否执行handler,当值为true则表示在watch中声明的时候,就立即执行handler方法;当值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。所以当immediate的值为true时,初始化方法在created或者mounted生命周期中就可以不用写了,已经在watch中写过了。

watch: {
formData: {
handler(val, oldVal) {
console.log(val, oldVal);
this.getInit();
},
immediate: true
}
},
mounted() {
// this.getInit(); // 不用写初始化函数
}
鉴定完毕,欢迎友友们一起交流学习!!
vue中watch侦听器,deep和immediate的用法的更多相关文章
- 第六十六篇:Vue的watch侦听器
好家伙,哇吃侦听器 1.watch侦听器 watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作 1.1.侦听器的基本用法 <body> <div id=" ...
- Vue框架之侦听器与生命周期
一.计算属性computed和侦听器(watch) 侦听的是单个属性 watch:{ 数据属性的名字:function(value){ }, 数据属性的名字2:function(value){ } } ...
- vue侦听器(引入vue.js写法)
首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906,下载后在html中引入: 侦听d ...
- vue 侦听器watch 之 深度监听 deep
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: &l ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
随机推荐
- iOS气泡提示工具BubblePopup的使用
在平时的开发中,通常新手引导页或功能提示页会出现气泡弹窗来做提示.如果遇到了这类功能通常需要花费一定的精力来写这么一个工具的,这里写了一个气泡弹窗工具,希望能帮你提升一些开发效率. 使用方法 ...
- 【Photoshop】切图保存小坑(选择png格式得到gif问题)
默认情况下:Photoshop 导出切片为[GIF]格式 当你很嗨皮的把[GIF]调整为[PNG]或[JPG]格式,并保存时: 你会发现,自己的图片格式莫名其妙还是[GIF]: 但,我们的期望是: 原 ...
- JumpServer安装及应用
jumpserver安装 安装所需软件包 [root@localhost ~]# yum -y update [root@localhost ~]# dnf install -y wget curl ...
- Sentieon | 每周文献-Genetic Disease-第二期
遗传病系列文章-1 标题(英文):Answer ALS, a large-scale resource for sporadic and familial ALS combining clinical ...
- 基于JavaFX的扫雷游戏实现(三)——交互逻辑
相信阅读过上期文章,动手能力强的朋友们已经自己跑出来界面了.所以这期我要讲的是交互部分,也就是对于鼠标点击事件的响应,包括计时计数对点击事件以及一些状态量的影响. 回忆下第一期介绍的扫雷规则和 ...
- 【HDC.Cloud 2023】华为云区块链分论坛内容值得再读!
摘要:在Web3时代,基础设施不仅仅是传统意义上的服务器.网络等,还包括了区块链节点.智能合约等,这些基础设施的稳定性和可信度直接影响着Web3的发展. 本文分享自华为云社区<[HDC.Clou ...
- 再见RestTemplate,Spring 6.1新特性:RestClient 了解一下!
在最近发布的Spring 6.1 M2版本中,推出了一个全新的同步HTTP客户端:RestClient.用一句话来让Spring开发者认识RestClient的话:像WebClient一样具备流畅AP ...
- 2023河南省ICPC大学生程序设计竞赛-wh
第一次出去比赛,首先感谢程老师选择我们新生更多的比赛机会,感谢! 在周六我们一起做了高铁出发取洛阳参加icpc河南省赛,不得不说洛阳师范学院确实环境很好看..在热身赛时,已经被泼了冷水,这C也太难了, ...
- 前端Vue自定义开屏启动广告组件,点击广告图跳转广告详情
随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身. 通过组件化开发,可以有 ...
- 实践分析丨AscendCL应用编译&运行案例
本文分享自华为云社区<AscendCL应用编译&运行问题案例>,作者: 昇腾CANN. AscendCL(Ascend Computing Language)是一套用于在昇腾平台上 ...