Vue 学习——监听器（侦听器）：普通监听和深度监听

2024-06-01 02:32:01

一、什么是监听器

Vue提供了一个watch选项，提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步代码或者开销比较大的操作时，这个方式是最有用的。

二、普通监听

普通监听是简单的数据类型：数字，布尔值，字符串
写法一：设有两个参数，一个是新的数据，一个是旧的数据

el:
data:
watch:{
要监听的变量名称:function(newVal,oldVal){},
要监听的变量名称N(newVal,oldVal){...}
}

写法二：在监听器中，被监听的变量除了可以写成函数，还可以是一个对象

  el:
data:
watch:{
要监听的变量名称:{handler:function(newVal,oldVal){...}}}

watch:{msg:{handler(new,old){console.log('msg 被改变了，原来的值是：'+old+'，新的值是'+new)
}}}

在watch监听器中写的内容就是要监听的变量名（变化之后的值，变化之前的值），只要监听的值发生了变化，那么监听器中的函数就会被触发。

三、深度监听

watch里面msg（）{ }这种形式只是浅监听，只适合监听一层，如果想监听对象或者数组内部的值，这种形式就不适合了，这个时候需要深度监听，deep属性，它的默认值是false

 new Vue({el:"#app",data:{msg:{name:'sherlock'}},watch:{msg:{// handler是固定的配置选项，不能改变它的名称handler:function(){console.log('msg改变了...')},deep:true//显式的改为true，表示要进行深度监听}}})

四、计算属性与监听的区别：

因为计算属性也是实时变化，那么监听和它什么区别呢

1.监听是在数据发生变化时才会触发对应的函数

2.计算属性在页面中使用了其结果或者依赖的数据发生变化的时候就会触发对应的函数

3.计算属性是基于变量的值进行缓存的，只要在他关联的变量值发生变化时计算属性就会重新执行，这意味着只要价格和数量信息不发生变化，计算属性就会返回之前的计算结果，而不必再次执行函数，而methods没有缓存，所以每次访问都会重新执行。

Vue 学习——监听器（侦听器）：普通监听和深度监听相关推荐

Java事件侦听器函数_SWT 计算器按钮事件监听获取按钮text值
用swt插件做计算器,监听所有按钮.通过按钮text值判断哪个按钮被点击,如"0"按钮被点击,就在text框里加个0.现在问题是怎样在监听函数里得到button的text值.10个 ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
侦听器watch及其和计算属性、methods方法的总结
目录一.watch侦听器二.侦听器的处理函数解决深度监听新老值同源问题三.侦听器的格式 1. 方法格式的侦听器 2.对象格式的侦听器四.侦听器watch.计算属性.methods方法的总结 ...
vue过滤器和侦听器和计算属性
过滤器和侦听器和计算属性 1. 过滤器 1.1基本用法 1.2私有过滤器和全局过滤器 1.3 Dayjs 1.4 连续调用多个过滤器 1.5 过滤器传参 1.6 兼容性 2. watch 侦听器 2. ...
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性一.实例演示,v-if,v-for,v-model,v-bind,v-on 方法含义 v-bin ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
vue中如何深度监听一个对象？
大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...
Vue学习随笔+商城项目【上】
更新日期:2021-02-10 晚 [新年快乐] 附:Vue学习随笔+商城项目[下] 目录(部分) (一)ES6补充 1.1块级作用域 1.1.1 什么是变量作用域 1.1.2 没有块级作用域造成的问 ...
vue修改计算属性的值_「Vue学习记录五」计算属性和侦听器
1: 计算属性: (内置缓存机制) 当更改age的时候, fullName 函数不执行: 当更改fristName的时候, fullName 函数才执行 <div id = "app& ...

最新文章

热门文章