vue watch监听中 immediate, deep, hander的作用

最新推荐文章于 2022-03-23 10:06:39 发布
原创 最新推荐文章于 2022-03-23 10:06:39 发布 · 644 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文解析Vue中的immediate和deep选项在watch监听中的作用，包括首次页面加载时的立即绑定、深度监听对象变化。

1. immediate

 immediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听只有发生数据改变,hander才会有操作,但是如果将immediate设置为true,在第一次进入页面时就会绑定值.

 watch: {
    a: {
      handler(newVal, oldVal) {
        console.log(oldVal)
        console.log(newVal)
      },
      immediate: false, // 值为true或false，默认false
      deep: false // 值为true或false，默认false

    }
  },

2.deep

deep就是用来深度监听的,默认值为false.

vue是不能检测到对象属性的添加或删除，我们使用watch监听一个对象时，除非是直接重新给对象赋值，否则是不能监听到对象里的值的变化的,

3.handler

就是watch中用来监听事件变化的当中有两个参数oldVal是用来看修改前的值是多少,newVal是用获取修改后的数值是多少.

 点击后可以得到结果:

mmmawo
关注
Vue TypeScript @Watch监听里面immediate的用法
小小只程序媛
12-28 1993
vue watch监听里面immediate的用法实例
vue 侦听器watch 之 深度监听 deep 以及 immediate
Don't disturb me!的博客
08-17 3018
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div> </template> <script> export default { data(){
Vue中对watch的理解（尤其是immediate和deep属性）
热门推荐
10-02 7万+
$watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！ 首先确认 watch是一个对象，一定要当成对象来用。对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二...
vue中watch的handler，deep，immediate用法详解
weixin_40581714的博客
08-18 418
vue中watch的handler，deep，immediate用法详解https://blog.csdn.net/qq_42975998/article/details/104565720
Vue中watch选项handle、deep、immediate是什么
yangyang的专栏
08-23 2527
handle：就是你watch中需要具体执行的方法 deep：就是你需要监听的数据的深度，一般用来监听对象中某个属性的变化 immediate：在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调 参考文章： https://segmentfault.com/q/1010000017020494/a-1020000017021145 https://blog.csdn....
vue watch监听对象及对应值的变化详解
11-26
在Vue实例中，我们可以通过`watch`对象来监听数据的变化，并在变化发生时执行相应的处理函数。 在给定的示例中，`watch`被用来监听`data`对象中的`a`和`b`属性。`a`是一个基本类型的数据（在这里是数字），所以当...
vue中的watch监听数据变化及watch中各属性的详解
10-18
本文详细介绍了Vue中watch属性的作用和使用方法，特别强调了immediate、handler和deep这三个属性的应用细节。 在Vue实例中，watch属性用于定义数据监听器。当我们需要监控的数据发生变化时，可以执行对应的回调函数...
详解Vue的watch中的immediate与watch是什么意思
12-13
immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，当然此时页面上的数据我们还没来得及手动让其发生变化，所以在控制台输出的newValue为我们在代码中默认设置的值，oldValue...
监听对象某一属性变换 deep immediate
weixin_30298497的博客
11-30 178
‘row.edit’ () { .... } watch : { 　　filter: { 　　 handler (){ 　　　　　　... 　　　　　}, 　　　　deep: true, 　　　　immediate: true //有created效果 　　} } 转载于:https://www.cnblogs.com/cs122/p/10045900.html...
vue3 + ts：watch（immediate、deep、$watch）
snow的博客
03-17 1万+
vue：watch、this.$watch
watch事件监听三种写法
山海也有意难平
08-02 3753
第一种 普通监听 <input type="text" v-model="userName"/> //监听 当userName值发生变化时触发 watch: { userName (newName, oldName) { console.log(newName) } } 第二种 (immediate 属于watch自带的一个参数) 第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数， 只有当值改变的时候 才会执行，如果想在第一次绑定的时.
vue watch监听使用deep和immediate监听属性
xc9711的博客
03-23 1746
前言 最近，项目遇到一个问题，和别人多人合作开发项目的时候，别人设置的属性值，在生命周期的比较晚的时候才能获取到，在beforeUpdate和Update时期才能获取到，但是这个阶段会有一个问题，当必须并且不得不操作属性才能获取值的时候会不停的调用；而我又需要在页面刚刚进来的时候，立马调用后端获取数据。 这就造成一个很尬尴的情景： 想立即调用，必须在参数获取值之后，而参数获取值之后得在beforeUpdate和Update时期才能获取到 在这两个时期调用又会不停的调用 使用watch 然后，经过指点，便修
vue项目中使用watch监听 immediate
seimeii的博客
12-21 1477
标题
vue的watch中的immediate什么意思
ZZZ___jh的博客
05-20 2万+
vue的watch中的immediate什么意思 $watch() 监听某个值(双向数绑定)的变化, 一旦发生变化, 就调用引号里的方法, 从而达到change事件监听的效果. 它的值包括选项的对象,选项对象有 handler: 其值是一个回调函数, 即监听到变化时应该执行的函数 deep: 其值是true或false, 确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到) *immediate: 其值是true或false,确认是否以当前的初始值执行handler
vue中的watch属性deep和immediate区别
weixin_45781661的博客
01-14 2231
vue中的watch属性deep和immediate区别 deep：其值是 true 或 false ；确认是否深入监听。deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，在页面初始化化时不会触发，只有当值改变时，才会触发 immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。就是说在
【前端】防抖和节流
Dora_5537的博客
08-12 281
一、防抖 防抖函数的作用 防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着 N 秒内函数只会被执行一次，如果 N 秒内再次被触发，则 重新 计算延迟时间。 防抖函数的实现 事件第一次触发时，timeout 是 null，调用 later()，若 immediate 为true，那么立即调用 func.apply(this, params)；如果 immediate 为 fals...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值