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选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
随机推荐
- x86 机器指令编码规则
x86 机器指令编码依次由一下部分组成: 指令前缀(prefix,非必需) 操作码(opcode,必需) 寻址方式 R/M(ModR/M,非必需) 比例因子-变址-基址(SIB,非必需) 地址偏移量( ...
- 10.1. Java性能调优
Java性能调优是一个复杂且重要的主题,它涉及到了JVM.垃圾收集器.内存管理.多线程.代码优化等多个方面.在本节中,我们将对Java性能调优的基本概念和方法进行简要介绍. 10.1.1. 理解性能指 ...
- IM1281B电能计量模块_C语言例程
一.前言 毕设采用了艾锐达公司的IM1281B电量计能模块,找了一圈没发现具体的51单片机的例程,现在写个能使用的C语言例程,方便以后的开发者们. 二.事前准备 引脚定义: 引脚 功能说明 V+ 供电 ...
- celery笔记三之task和task的调用
本文首发于公众号:Hunter后端 原文链接:celery笔记三之task和task的调用 这一篇笔记介绍 task 和 task 的调用. 以下是本篇笔记目录: 基础的 task 定义方式 日志处理 ...
- SpringBoot中的yml文件中读取自定义配置信息
SpringBoot中的yml文件中读取自定义配置信息 开发中遇到的问题,百度的答案我都没有找到,去找大佬获取到的经验总结,这只是其中的一种方法,如果其他大佬有新的方法,可以分享分享. 一.非静态属性 ...
- asp.net程序通过Microsoft Azure中SAML协议实现单点登录
1. 新建应用程序 登录Azure门户,进入左侧菜单"企业应用程序--所有应用程序",点"新建应用程序", 继续点"创建你自己的应用程序", ...
- DDD架构为什么应该首选六边形架构?
一.传统分层架构 分层架构的一个重要原则是:每层只能与位于其下方的层发生耦合. 分层架构分两种:一种是严格分层架构,规定某层只能与直接位于其下方的层发生耦合:另一种是松散分层架构,允许任意上方层与任意 ...
- 介绍Centos7启用过程中用到的rpm软件包、及其作用
序号 包名 作用 1 udev 系统设备管理器,用于管理设备驱动程序和设备的元数据. 2 lvm2 Logical Volume Manager 2(LVM2)是一个用于管理和分配存储设备的工具,允许 ...
- 【解惑】介绍.net中的DataTable的AcceptChanges方法
DataTable.AcceptChanges方法是一个用于DataTable对象的方法,它将所有对DataTable进行的更改标记为已接受.这意味着所有新增.修改和删除的行都将被标记为DataRow ...
- 熟悉又陌生的package.json
前言 随着前端的不断发展,package.json可谓是在前端项目中无处不在,它不仅在项目根目录会有,而且在 node_modules 中也存在.那么这个文件到底是干嘛的,又有什么作用?很多人对它的认 ...