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选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
随机推荐
- 【pandas基础】--目录(完结)
pandas 基础内容的目录: 概述 pandas 主要功能和应用场景的介绍. 数据读取 数据读取是第一步,只有成功加载数据之后,后续的操作才有可能. pandas 可以读取和导入各种数据格式的数据, ...
- 如何使用Stable Diffusion生成艺术二维码?
硬件准备 物理内存:至少16G(8G直接安装阶段就卡死) N卡:此处我使用GTX 1660 6G (2019年双12购买) 操作系统 windows 11 软件准备 网络要通畅 git: https: ...
- @Document元注解的使用
@Documented注解标记的元素,Javadoc工具会将此注解标记元素的注解信息包含在javadoc中.默认,注解信息不会包含在Javadoc中.示例如下: 声明Book注解,并使用@Docume ...
- ElasticSearch的使用和介绍
1.概述 功能 Elasticsearch 是一个分布式的 RESTful 搜索和分析引擎,可用来集中存储您的数据,以便您对形形色色.规模不一的数据进行搜索.索引和分析. 例如: 在电商网站搜索商品 ...
- 国标GB28181协议客户端开发(二)程序架构和注册
国标GB28181协议客户端开发(二)程序架构和注册 本系列文章旨在探讨国标GB28181协议设备端的开发过程.本文将聚焦于架构设计和设备注册,并详细介绍了设备端的程序架构设计.exosip库介绍和接 ...
- Oracle将用户权限移植到另一个用户上
问题描述:往往有些需求,A用户依赖于B用户创建,A用户想要获取B用户的权限,oracle没找到有命令可以直接继承,只能写一些语句来代替 1.查询用户下的权限有哪些 SET PAGESIZE 100 S ...
- 西门子S7系列PLC以太网通讯处理器编程调试方法
捷米特(北京)科技有限公司研发的捷米特以太网通讯模块,转以太网通讯模块型号有ETH-S7200-JM01和ETH-S7300-JM01,适用于西门子S7-200/S7-300/S7-400.SMART ...
- python图表展示实例
"""Created on Fri Nov 8 16:09:36 2019 @author: DELL""" ""&qu ...
- .NET for Apache Spark 入门演练
.NET for Apache Spark 入门演练 微软官方文档: .NET for Apache Spark 入门 | Microsoft Learn 注意:由于本次在windows平台下进行演练 ...
- MASA Blazor中MSwitch如何实现二次确认
<MSwitch @bind-Value="switch" Readonly OnClick="OnClick"> </MSwitch> ...