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选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
随机推荐
- [MAUI]写一个跨平台富文本编辑器
@ 目录 原理 创建编辑器 定义 实现复合样式 选择范围 字号 字体颜色与背景色 字体下划线 字体加粗与斜体 序列化和反序列化 跨平台实现 集成至编辑器 创建控件 使用控件 最终效果 已知问题 项目地 ...
- 识别一切模型RAM(Recognize Anything Model)及其前身 Tag2Text 论文解读
总览 大家好,我是卷了又没卷,薛定谔的卷的AI算法工程师「陈城南」~ 担任某大厂的算法工程师,带来最新的前沿AI知识和工具,欢迎大家交流~ 继MetaAI 的 SAM后,OPPO 研究院发布识别一切模 ...
- Windows同时安装多个JDK
一.下载并安装JDK这一步选择你需要的JDK并下载安装,记得要记住安装的路径. 二.为JDK配置环境变量①找到系统环境变量 ②新建如下三个环境变量 第一个表示默认Java的home路径,以后在更改JD ...
- Pycharm里Python运行窗口显示乱码���的解决方法
当你的Python程序运行后,会在运行窗口中显示乱码 ��� 等字样,如下 原因是 Pycharm中默认设置只显示UTF-8编码的格式,需要修改支持显示中文支持. 解决方法: 菜单中选择 File S ...
- 图像增强—自适应直方图均衡化(AHE)-限制对比度自适应直方图均衡(CLAHE)
一.自适应直方图均衡化(Adaptive histgram equalization/AHE) 1.简述 自适应直方图均衡化(AHE)用来提升图像的对比度的一种计算机图像处理技术.和普通的直方图均衡算 ...
- Thread 和 ThreadPool 简单梳理(C#)【并发编程系列】
〇.前言 对于 Thread 和 ThreadPool 已经是元老级别的类了.Thread 是 C# 语言对线程对象的封装,它从 .NET 1.0 版本就有了,然后 ThreadPool 是 .Net ...
- tcpdump 常用命令
最后更新时间 2021-10-05. Linux 的命令太多,tcpdump 是一个非常强大的抓包命令. 有时候想看线上发生的一些问题: nginx 有没有客户端连接过来-- 客户端连接过来的时候 P ...
- AI识别检验报告 -PaddleNLP UIE-X 在医疗领域的实战
目录 UIE-X在医疗领域的实战 1.项目背景 2.案例简介 3.环境准备 数据转换 5.模型微调 6.模型评估 7.Taskflow一键部署 UIE-X在医疗领域的实战 PaddleNLP全新发布U ...
- 如何编写难以维护的React代码?耦合组件
如何编写难以维护的React代码?耦合组件 在许多项目中,我们经常会遇到一些难以维护的React代码.其中一种常见的情况是:子组件直接操作父组件方法,从而导致父子组件深度耦合.这样的实现让子组件过于依 ...
- Angular: 点击一次按钮,增加一个元素
解决方案 思路 在组件的typesscript文件中,创建一个数组来存储每个按钮的信息 在模板中使用 *ngFor 指令来循环渲染按钮列表 在按钮事件的处理函数中,每次点击按钮时向按钮数组添加一个新的 ...