Vue中的侦听器watch

侦听器：侦听属性或计算属性值的变化，可以做异步操作，比如setTimeout()。

实现侦听器的两种格式

① 利用watch配置项

new Vue({el: '#root',data: function () {return {count: 1}},watch: {count: {  // 侦听count属性handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}}}
});

② $watch()

const vm = new Vue({el: '#root',data: function () {return {count: 1}}
});
vm.$watch('count', {  // 第一个参数为侦听的属性，第二个参数为配置项handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}
});

watch中的配置项
① immediate：立即，默认是false，如果为true，则在页面初始化时就触发一次handler方法
② deep：深度侦听，能够侦听引用数据类型内部所有属性的变化，不只局限于侦听该属性地址的变化

new Vue({el: '#root',data: function () {return {count: 1,person: {name: 'wuwu',age: 18}}},watch: {count: {immediate: true,  // 页面初始化时，就调用一次侦听count属性的handler方法，newValue为1，oldValue为undefinedhandler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}}.'person.name': { // 这样写表示侦听person中的name属性变化，效果与侦听count一致，因为它们都是基本数据类型handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}},person:{   // 这样写表示侦听person这个引用数据类型地址的变化，只有地址变化才会触发handler方法handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}},person: {  // 添加配置项deep:true表示深度侦听person中所有属性的变化，某一个属性发生变化都会触发handler方法deep: true, handler(newValue, oldValue) {console.log(`新值：${newValue}，旧值：${oldValue}`);}}}
});

简写格式
上述代码都是按照完整格式编写的，如果要简写，需要满足的条件就是没有配置项，如果有需求加immediate、deep等配置项，不能简写！！！

new Vue({el: '#root',data: function () {return {count: 1,}},watch: {count(newValue. oldValue) {   // 直接写成函数形式，与计算属性类似console.log(`新值：${newValue}，旧值：${oldValue}`);}}
});

Vue中的侦听器watch相关推荐

vue过滤器和侦听器和计算属性
过滤器和侦听器和计算属性 1. 过滤器 1.1基本用法 1.2私有过滤器和全局过滤器 1.3 Dayjs 1.4 连续调用多个过滤器 1.5 过滤器传参 1.6 兼容性 2. watch 侦听器 2. ...
vue 侦听器侦听对象属性_不删除侦听器–使用ListenerHandles
vue 侦听器侦听对象属性听一个可观察的实例并对它的变化做出React很有趣. 做一些必要的事情来打断或结束这种聆听会变得很有趣. 让我们看看问题的根源和解决方法. 总览这篇文章将首先讨论这种情况 ...
vue 侦听器侦听对象属性_SQL Server始终处于侦听器状态
vue 侦听器侦听对象属性 This article on SQL Server Always On Listeners includes an overview and various connec ...
Vue——计算属性与侦听器
目录一.计算属性 1.基本使用 2.复杂使用 3.getter和setter 4.计算属性和methods的对比二.侦听器 1.watch的用法一.计算属性 1.基本使用现在有变量姓氏和名 ...
VUE 监听当前路由侦听器 watch
侦听器: 你可以利用侦听器,响应数据的变化,例如路由,和页面中data的值,可以在他们变化的时候写相应的处理逻辑在侦听器中. 侦听器的使用很简单: watch 对象就是侦听器,只有当侦听的值改变了它才 ...
侦听器watch及其和计算属性、methods方法的总结
目录一.watch侦听器二.侦听器的处理函数解决深度监听新老值同源问题三.侦听器的格式 1. 方法格式的侦听器 2.对象格式的侦听器四.侦听器watch.计算属性.methods方法的总结 ...
面试点:五句话教你计算属性和和侦听器区别
在面试官问你计算属性和侦听器有什么区别时,他想听到的核心就是下面这五句话 (0)功能不同,计算属性用于解决模板语法冗余问题,侦听器侦听data中每一个数据变化 (1)计算属性有缓存机制,侦听器没有缓存 ...
此计算机支持多个rdp侦听程序,远程桌面侦听器证书配置
远程桌面侦听器证书配置 09/08/2020 本文内容本文介绍在基于 Windows Server 2012 或基于 Windows Server 2012 的服务器上配置侦听器证书的方法,该服务器 ...
不删除侦听器–使用ListenerHandles
听一个可观察的实例并对它的变化做出反应很有趣. 做一些必要的事情来打断或结束这种聆听会变得很有趣. 让我们看看问题的根源和解决方法. 总览这篇文章将首先讨论这种情况,然后再讨论常见的方法和问题所在. ...

Vue中的侦听器watch

Vue中的侦听器watch相关推荐

最新文章

热门文章