资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/VUE中Watch详解

VUE中Watch详解

IT那活儿 / 2056人阅读
VUE中Watch详解
点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！

watch概述

Watch是vue实例的一个属性，其原理在实例化时调用$watch()，遍历watch对象的每一个属性，主要用来监听数据的变化。

简单数据类型监听

例如字符串，布尔类型，数字等。
注意：当第一次进入页面的时候watch不会监听，如果需要第一次就执行监听，设置immediate值为true，如图：

复杂数据类型监听

监听对象需要开启深度监听，设置deep为true，注意数组不需要深度监听。

对象的监听有两种方式：

  • 第一种是监听整个对象；
  • 第二种是监听对象的某个属性。
区别在于前者每个属性值发生变化执行handler，handler执行后的新旧值一样，后者新旧值不一样。

watch与计算属性(computed)的区别

  • computed具有缓存效果，数据发生改变会进行重新计算，watch没有缓存。
  • computed可以自定义名称， watch监听属性名称只能和data里面名称一致。
  • computed不支持异步，不能监听数据变化，watch支持异步。
  • computed适用于复杂运算，监听属性适合消耗性功能，比如ajax
  • 如果一个属性由其他属性计算而来，一般用computed，当一个属性发生变化时需要执行相应操作使用watch。

本文作者：朱 维（上海新炬王翦团队）

本文来源：“IT那活儿”公众号

GPU云服务器 云服务器 vue中 vue 中使用 webrtc vue中使用webrtc vue中调用js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/129339.html

相关文章

  • Vue 实例中的生命周期钩子详解

    摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

    gityuan 评论0 收藏0

  • Vue 3.0 前瞻，体验 Vue Function API

    摘要：与的一致有三个可选值，分别为在渲染后，即后才调用回调函数，在渲染前，即前调用回调函数，同步触发。 最近 Vue 官方公布了 Vue 3.0 最重要的RFC：Function-based component API，并发布了兼容 Vue 2.0 版本的 plugin：vue-function-api，可用于提前体验 Vue 3.0 版本的 Function-based component...

    DrizzleX 评论0 收藏0

  • Vue指令详解

    摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。 思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

    itvincent 评论0 收藏0

  • Vue指令详解

    摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。 思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

    malakashi 评论0 收藏0

  • Vue指令详解

    摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。 思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

    Richard_Gao 评论0 收藏0

发表评论

登陆后可评论

0条评论

IT那活儿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<