watch里面的 deep和immediate作用

最新推荐文章于 2024-07-15 10:26:59 发布
最新推荐文章于 2024-07-15 10:26:59 发布
阅读量1.9k 收藏
点赞数
分类专栏： watch immediate 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoguo_love521/article/details/108492814
版权

先看下问题：
faterVisible:这个是父组件中传值到子组件中的监听父组件的打开状态的值
首次父组件打开时，没有加immediate时，不会走对应的方法，第二次打开时才会执行
在这里插入图片描述
在这里插入图片描述
于是，我加了immediate。。。这样问题就解决了呢

了解：
deep，默认值是 false，代表是否深度监听。
immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

扛把子小雪
关注
专栏目录
Vue中对watch的理解（尤其是immediate和deep属性）
qq_27009517的博客
01-21 416
$watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！ 首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参， 第一个是当前值， 第二个是变化后的值。 值也可以是函数名：不过这个函数名要用单引号来包裹。值是包括选项的对象：选项包括有三...
Watch的内部原理（deep+immediate）
weixin_42937036的博客
09-16 1083
watch主要用来监听组件中某个值的改变，并执行对应的回调函数。 wtach和computed的区别 watch是一个值影响多个值 computed是多个值影响一个值 watch的内部原理 先看源码中对于vm.$watch的实现 // watch可以监听一个表达式（a.b.c）或者函数 Vue.prototype.$watch = function (expOrFn, cb, options) { const vm = this; options = options || {}; const wa
vue中的watch属性deep和immediate区别
weixin_45781661的博客
01-14 1724
vue中的watch属性deep和immediate区别 deep：其值是 true 或 false ；确认是否深入监听。deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，在页面初始化化时不会触发，只有当值改变时，才会触发 immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。就是说在
在 Vue 中使用 watch 函数时，deep和immediate 参数的作用
weixin_39273589的博客
07-15 656
函数会递归观察对象的每个属性的变化，即使是嵌套在对象中的属性也会被观察到。这意味着当对象内部的属性发生变化时，也会触发 watch 回调函数。或其内部的任何属性发生变化时，都会触发 watch 回调函数，并输出。注意：由于深度观察对象的每个属性会增加性能开销，因此在使用。参数时需要注意性能问题，并仔细考虑是否真正需要深度观察。保证了无论属性嵌套多深，都能观察到变化。参数用于控制是否深度观察对象的变化。
Vue.js 中的 immediate: true的作用
最新发布
qq_58307541的博客
07-15 271
默认情况下，监听器只有在所监视的数据属性发生变化时才会触发回调函数。然而，有时候我们需要在组件初始化时立即执行一次回调函数，这时就可以使用 immediate: true 配置选项。当我们在监听器中设置 immediate: true 时，即使在属性初始化时没有变化，也会立即执行一次回调函数。这样可以确保在组件创建时能够获取到数据的初始状态。(watchers) 是一种非常重要的工具，它允许我们观察和响应数据的变化。immediate: true 的作用。在使用 Vue.js 时，
Vue watch属性的deep 和 immediate作用
qq_40122602的博客
09-22 1102
概要： Vue 通过 watch 选项提供了一个通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 $watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！ 首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数.
vue watch 里的 deep 和 immediate
weixin_41604040的博客
02-05 583
vue watch 里的 deep 和 immediate
watch的immediate使用
xqhys的博客
04-16 1036
前言 对于watch的使用大家都还是比较熟悉的，我们平时使用的比较多的就是watch一个变量，偶尔还是使用deep：true来监听对象，但是immediate的使用就相对比较少，之前有遇到过这个属性，而且也查找过资料，但是一直都是有点懵懵的，要深刻去理解他，我们还是主要是从它的作用，需要在那种情境下使用它 首先我们理解下watch的使用 首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是dat
vue 中的watch 的deep属性
wangzhen12138的博客
01-19 2185
在项目中，我们可以通过组件的传参来判断组件所操作的事件，通过watch来进行传参的数据内容的监听，比如0-1 1-0 来进行判断。需要注意的是，深度观察对象会导致性能下降，因为每次对象发生变化时都需要递归遍历对象的所有属性。只观察一个对象的基本属性的变化。但是，如果你需要观察对象内部属性的变化，就需要使用。是一个用于观察和响应 Vue 实例上的数据变化的选项。时，Vue 会监视该属性的变化并在变化时执行相应的回调函数。选项的一个属性，用于深度观察一个对象的变化。属性时应该谨慎，并仅在必要时使用。
vue2.0 watch里面的 deep和immediate用法说明
01-18
immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。 computed: { btnObj() { const { sign_img, check } = this ...
vue 侦听器watch 之 深度监听 deep 以及 immediate
Don't disturb me!的博客
08-17 2853
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div> </template> <script> export default { data(){
vue中computed和watch，方法的区别以及deep,immediate
leilei7407的博客
07-25 1454
computed : 计算属性 要计算的属性会随着其依赖的data中属性变化而变化，只要依赖的属性改变，就会执行computed，若无改变，则直接从缓存中取值 支持缓存，只有依赖数据发生改变，才会重新进行计算 不支持异步，当computed内有异步操作时无效，无法监听数据的变化 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed computed属性属性值是函数，默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个g.
【Vue 基础】-- Watch的deep参数技巧
野生松
07-15 2348
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。 watch: { obj: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true, deep: true } } 优化：我们可以使用字符串的形式监听 wat
vue中watch的handler，deep，immediate用法详解
热门推荐
qq_42975998的博客
02-28 2万+
我们使用watch监听数据时，有三个选项，handler，deep，immediate handler 我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler（可参考我上篇文章的watch） watch: { // 通过输入框文字的变化，来改变下面的数据 ipt: { handler(newVal,oldVal) ...
Watch immediate深度监听
总结前端开发中遇到的问题，分享前端知识
09-14 2612
这个已经算是一个比较常见的技巧了，这里就简单说一下。当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在created的时候手动调用一次。 // bad created() { this.fetchUserList(); }, watch: { searchText: 'fetchUserList', } 你可以添加immediate属性，这样初始化的时候也会触发，然后上面的代码就能简化为： // good watch: { searchText: {
watch中的immediate、handler和deep属性
m0_72815229的博客
11-27 1872
【代码】watch中的immediate、handler和deep属性。
Vue watch的immediate、deep怎么去理解？
03-31
immediate： immediate为true时，表示在组件初始化时，立即执行一次watch的回调函数。如果不设置immediate，那么默认不会在组件初始化时执行回调函数。 deep: deep为true时，表示深度观察，即侦听器会递归监听对象内部值的变化。如果对象内部还有对象，则需要设置deep为true才能监听到内部对象的变化。如果对象的层次结构很深，那么监听所有属性的变化可能会对性能造成影响，因此需要慎重考虑是否设置deep为true。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值