vue $watch监听属性之 监听函数 handler() 以及 immediate:true立即执行

最新推荐文章于 2024-05-28 16:15:16 发布
最新推荐文章于 2024-05-28 16:15:16 发布
阅读量6.6k 收藏 10
点赞数 2
分类专栏： 总结 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45810135/article/details/109035797
版权

vue watch 属性

handler 方法就相当于普通侦听器触发的事件,即:当数据变化时要执行的操作

例如:点击路由,跳转的时候传递参数,监听到参数变化实现动态切换路由样式

immediate:true 立即执行 :当刷新页面时会立即执行一次handler函数
使用场景:
不加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1
加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在在2-1位置

技术林
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中对watch的理解（尤其是immediate和deep属性）
~~
10-02 6万+
$watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！ 首先确认 watch是一个对象，一定要当成对象来用。对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二...
Vue知识点（2）
woai_mihoutao的博客
07-06 451
Vue基础
vue3 事件处理
最新发布
JiuMeilove的博客
05-28 824
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“handler” 或 @click=“handler”。事件处理器 (handler) 的值可以是：内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
Vue-侦听属性watch(handler方法,immediate和deep属性)
陈坚泓的博客
11-07 5425
Vue-侦听属性watchwatch选项handler方法和immediate属性deep属性字符串形式监听注销watchwatch监听路由 watch选项 当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 <div id="app"> <p>FullName: {{ fullName }}</p> &lt...
immediate:ture 深度监听
youshuang1207的博客
08-17 783
data里面有set,get,watch, 数据的改变是异步操作 watch的深度监听,第一层的属性:{ deep:true, handler(){} console.log(333) } watch immediate:true,
vue.js watch监听，vue.js 监听watch
05-03
- `immediate`：如果设置为`true`，`watch`函数会在实例创建后立即执行一次，而不是等待数据变化。 - `deep`：如果设置为`true`，`watch`会进行深度观测，即监听对象内的所有子属性变化。 例如： ```javascript ...
vue实例，watch监听路由地址的改变
08-19
`watch`对象中的键是你要监听的属性，值是一个回调函数，该函数会在监听的属性变化时执行。要监听路由的改变，我们需要监听`$route`对象： ```javascript export default { data() { return { // 数据绑定 } }...
Vue.js watch监视属性知识点总结
10-16
Vue.js的`watch`属性是框架提供的一种机制，用于在数据发生变化时执行特定的回调函数。它是Vue响应式系统的一部分，允许开发者实现更复杂的逻辑，比如数据验证、异步操作或者根据数据变化更新其他组件的状态。 1. *...
详解Vue中watch的详细用法
10-17
`immediate`设置为`true`意味着在声明`watch`时就立即执行`handler`，而不是等待数据变更。 在处理复杂的数据结构，特别是对象时，`watch`的`deep`属性变得尤为重要。如果需要监听对象内部属性的变化，必须设置`...
详解Vue中watch的高级用法
08-27
而 immediate:true 代表如果在 watch 里声明了 firstName 之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。 deep 属性 watch 里面还有一个属性 deep，...
vue监视器@Watch创建执行immediate
weixin_39990025的博客
11-25 971
vue监视器@Watch的immediate参数，表示在watch中首次绑定的时候，是否执行handler函数， 1.值为true则表示在watch中声明的时候，就立即执行handler方法， 2.值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。 async created() { // await this.refreshMessageBody(...
vue.js监听属性watch(handler方法immediate属性deep属性)
热门推荐
Amanda_wmy的博客
11-05 2万+
vue.js监听属性watch(handler方法immediate属性deep属性) &lt;div&gt; &lt;p&gt;FullName: {{fullName}}&lt;/p&gt; &lt;p&gt;FirstName: &lt;input type="text" v-model="firstName"&gt;&lt;/p&gt;
handler方法和immdiate属性
duanyuehuan
11-30 189
一、handler方法和immdiate属性 watch默认绑定，页面首次加载时，是不会执行的。只有值发生改变才会执行。 如果想立即执行怎么办？ 1 watch:{ 2 name:{ 3 handler(newName,oldName){ 4 //执行代码 5 }, 6 immediate:true //true就表示会立即执行 7 } 8 } 二、deep属性 如果是监听的是对象类型，当手动修改对象的某个属性时，发现是无效的。 这时候
关于watch和computed的执行时机
qq_53848768的博客
07-08 1771
一切的一切都是因为封装一个简单的进度条组件而引发的
Vue TypeScript @Watch监听里面immediate的用法
小小只程序媛
12-28 1741
vue watch监听里面immediate的用法实例
学徒浅析Android——关于Handler的postDelay被立刻执行的问题
lz8362的专栏
03-19 502
老生常谈的Handler还是会在工作中给自己惊喜。最近在一次日常的转测用例执行过程中，突然发现有个请求被立刻移除了。查看了下代码记录才发现是使用Handler#postDelay传入的延迟时间。
vue 日常使用，watch监听写法，vue组件销毁重置
qq_39596012的博客
09-11 3853
vue watch写法 watch: { // 第一种方式：监听整个对象，每个属性值的变化都会执行handler // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的 food: { // 每个属性值发生变化就会调用这个函数 handler(newVal, oldVal) { console.l
vue watch handler
H-L的博客
12-18 4303
普通监听 缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。 watch: { carts: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } 高级监听 handle：wat...
vue的watch监听全部属性 进入页面就执行
04-04
可以使用`immediate`选项来在监听到属性变化时立即执行回调函数，同时也可以在`mounted`钩子函数中手动触发一次回调函数。 示例代码： ```javascript watch: { // 监听所有属性变化 '$data': { handler: function (newValue, oldValue) { console.log('属性变化了', newValue, oldValue) }, immediate: true // 立即执行回调函数 } }, mounted () { // 手动触发一次回调函数 this.$watch('$data', { handler: function (newValue, oldValue) { console.log('属性变化了', newValue, oldValue) }, immediate: true }) } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值