vue之watch监听与计算属性小解以及它们之间的区别

已于 2023-04-23 06:21:02 修改
阅读量187 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-04-23 05:57:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62276354/article/details/130313475
版权

vue监听小解

监听属性watch：

1.当被监视的属性发生变化时 回调函数自动调用 进行相关操作（回调函数就是截图中的handler

2.监视的属性必须存在 才能对其进行监视

3.handler的两个参数 一个是旧的值 一个是更改后的值

4.immediate属性为true是初始化时就调用一下handler 默认为false

vue监听-深度监听

深度监听

1.vue中的watch默认不监测对象内部值的改变（一层）

2.配置deep：true可以监测对象内部值的改变（多层）

 vue监听-简写形式

简写跟计算属性的简写是一样的 没有多余的配置项 

 监视属性可以用在那里：比如监听天气之间相差的温度如果大于某个数值就提示该多穿衣服或注意炎热

vue计算属性小解

首先计算属性的定义是 要用的属性不存在 要通过已有data中的属性计算得来

它的原理是底层借助了objcet.defineproperty方法提供的get和set

get是初次读取的时候就会执行一次 然后是当依赖的数据发生改变时执行一次

set是如果计算属性要被修改的话就必须写set函数去响应修改 

下面上案例解释一下

 

 

 

简写形式 要确保没有修改set才可以用简写

 

 总结：计算属性跟普通属性不同的是可以通过普通属性相加计算而得到一个新的属性

它们之间的区别

1.首先computed能完成的功能 watch都能完成

2.watch能完成的功能computed不一定能完成 例如watch可以异步操作而computed不能

神仙怕右手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 监听器 基础功能介绍
Asher_lm的博客
12-12 345
vue监听的作用
Vue深度监听
qq_44849271的博客
08-30 2万+
Vue深度监听 Vue框架中监听一般写法为: watch:{ a(newVal,oldVal){ console.log(newVal); } } 当监听对象的属性时: watch:{ "obj.name"(newVal,oldVal){ console.log(newVal); } } 如果需要监听整个对象时： watch:{ obj:{ deep:true,//true为进行深度监听,false为不进行深度监听 handler(newVal){ console.log
Vue中的深度监听如何实现？
有我更精彩的博客
03-07 1344
在Vue中，深度监听是一种非常常见且重要的功能，它可以让我们监听对象内部的所有属性，并对这些属性的变化做出相应的处理
Vue中的watch如何深度监听某个对象，2024年最新阿里架构师面试题及答案
最新发布
2401_84138890的博客
04-16 478
上面代码中: 有个原则监听谁,写谁的名字,然后是对应的执行函数, 第一个参数为最新的改变值,第二个值为上一次改变的值, 注意: 除了监听 data,也可以监听**另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
Vue - 监听数据的三种方法
热门推荐
Welkin_qing的博客
08-11 13万+
举一个案例，我们要拼接一个fullname，因此要监听到文本框数据的改变，这样才能知道什么时候去拼接 出一个 fullname 案例结构如下： <body> <div id="app"> &
解决Vue2.0 watch对象属性变化监听不到的问题
10-18
今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中的watch监听数据变化及watch中各属性的详解
10-18
主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue2 监听属性改变watch的实例代码
12-29
效果： 代码： 幼儿园入学年龄（3～6）：</label><input type=number v-model=child.age> <button @click=older>... var app = new Vue({ el:#app2, data:{ child:{age:2}, hasErr:fals
vue计算属性computed、事件、监听器watch的使用讲解
10-17
今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
Vue使用watch监听一个对象中的属性的实现方法
10-17
主要介绍了Vue使用watch监听一个对象中的属性的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
3分钟带你了解——Vue的监听器
omroji的博客
02-08 872
前端开发时时常碰到这样的业务，表单中某个值发生修改后调用如发送请求、显示对话框的方法。除了使用组件的回调事件外，我们也可以使用Vue提供的监听器Api来实现这样的需求。
Vue入门【二】-- watch侦听器之普通监听与深度监听
qq_48802092的博客
09-23 2921
当被监听的内容是引用数据类型时，watch里面msg（）{ } 这种形式只是普通的浅监听，无法满足我们的需求，因此我们需要使用深度监听来实现对数组/对象里的值进行监听。给监听器添加一个deep属性，默认值是false，当我们将其设置为true时深度监听生效。
vue侦听器watch
weixin_52629158的博客
05-21 3812
vue 是不能检测到对象属性的添加或删除，我们使用 watch 监听一个对象时，除非是直接重新给对象赋值，否则是不能监听到对象里的值的变化的deep 就是用来进行深度监听的！使用 watch 时有一个特点，就是当值第一次绑定时，不会执行 handler()监听函数，只有值发生改变时才会执行 handler()监听函数。当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
Vue中的数据变化监控与响应——深入理解Watchers
AliceNo的博客
12-17 1550
在Vue.js中，watch是一种用于监听数据变化并执行相应操作的机制。下面详细讲解Vue的watchwatch是Vue中强大的数据监听机制，通过灵活的选项，可以满足不同场景下的数据监控需求。深入理解watch的使用和原理，有助于更好地利用Vue的响应式系统，实现更复杂的数据流控制。
Vue中的浅监听,深度监听，同时监听多个属性
天涯芳草
04-10 1413
（1）Vue中深度监听某个对象: <template> <div class="user"> <basic-container> <!-- 观察数据为字符串或数组--> 　　 <input v-model="userName"/> 　　 <input v-model="age"/> 　　 <!--当数据subjects为对象时，...
vue2 watch监听事件的多种用法
彤先森的博客
01-19 790
vue2 watch监听事件的多种用法
Vue_侦听器 watch 监听 computed 计算属性
Mr.小灰狼_随笔
08-26 2832
Vue_侦听器 watch 监听 computed 计算属性 目录 侦听器 watch handler immediate $watch() deep 项目简单使用 ：
vue里watch监听与深度监听的区别
03-31
Vue中watch可以监听指定的数据变化，当数据发生变化时，会自动执行回调函数。深度监听是指在监听对象或数组类型的数据变化时，会递归监听其内部所有属性或元素的变化。具体区别如下： 1. 监听普通数据类型：watch默认只监听一层数据变化，而深度监听则可以监听到嵌套在该数据内部的所有数据变化。 2. 监听对象类型数据：watch监听对象类型数据时，只会监听该对象的引用是否发生变化，而不会监听该对象内部属性的变化。深度监听则可以递归监听该对象内部所有属性的变化。 3. 监听数组类型数据：watch监听数组类型数据时，只会监听数组的引用是否发生变化，而不会监听数组元素的变化。深度监听则可以递归监听数组内部所有元素的变化。 总之，深度监听可以监听到更细粒度的数据变化，但也会带来一定的性能消耗。在使用时需要根据实际情况进行选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值