计算属性与监听属性

已于 2022-04-02 15:31:54 修改
阅读量346 收藏 5
点赞数
分类专栏： vue 文章标签： vue.js
于 2022-04-02 11:13:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshi759956817/article/details/123890345
版权

计算属性

在这里插入图片描述
在这里插入图片描述

优点

有缓存的机制，可以复用，效率高，调试方便。

在这里插入图片描述
重复的调用只用缓存的值，不用像调用方法一样出发N次，只需要一次。

监听属性

在这里插入图片描述

特点

1被监视的属性发生改变时，调用回调函数，执行相关操作
2配置 immediate：true 实现初始化调用
3监视的属性
必须存在才能进行监视

如果监听的数据复杂 比如 对象或者数组

择需要开起深度监听 deep
在这里插入图片描述

如果不需要开启初始化调用和深度监听

则可以简写

在这里插入图片描述

监视属性与计算属性的异同

监视属性是命令式的，且重复的
计算属性更加简洁明了
两者都能实现优先选择计算属性
watch能实现异步调用，computed不能

woshi759956817
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue计算属性和监听属性
WFL804203164的博客
12-28 218
计算属性 computed 使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性 计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化 当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）每个计算属性都包含两个set、get 属性 监听属性 watch 使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化 watch:类似于监听机制+事件机制。 在大部分情况下我们都会使用computed，但如果
计算属性和侦听器
zl13015214442的博客
02-20 370
计算属性–computed 官网对于计算属性的解释是用于简化模板中放入冗杂的计算逻辑而设计的，也就是说当要显示的变量要经过逻辑运算后再显示后，不推荐在模板中进行计算，都应当使用计算属性。下面通过一个例子来实现： <body> <div id="root"> 姓：<input v-model="firstName"> 名：<input v-mod...
【vue2】计算属性(computed)与侦听器(watch)详解
热门推荐
嗨，朋友你好！我是前端领域的工作者
01-08 1万+
【vue2】计算属性(computed)与侦听器(watch)详解。 计算属性两种写法：①默认get()类型②get()与set()类型搭配使用 侦听属性的两种写法：①值类型②引用类型 计算属性与侦听属性的总结对比
Vue的计算属性与监听属性
qq_46149597的博客
11-03 3152
计算属性的getter和setter，计算属性的缓存，对象数据中的属性进行监听，deep选项
vue--计算属性（computed）vs事件（methods）vs监听器（watch）
muzidigbig的博客
10-18 3856
关于 computed 和 watch 的差异： 1.computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props） 2.computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访...
计算属性（computed）和监听器（watch）的区别
itcast_cs的博客
10-29 1万+
引言 在学习Vue的过程中，我们经常会使用计算属性来作为输出在页面中的数据内容，发现使用计算属性非常方便，但是学到后面我们又会发现一个叫侦听器的东西。 那么问题来了，侦听器和计算属性，哪个更牛逼，哪个更好用？ 不少刚刚学习Vue的小白都会纠结这个问题，但是实际上我想给这些小白同学说，不用纠结，计算属性和侦听器咋一看上去使用方式，结果都差不多，但是理解了他们深层次的原理之后你就会发现，他们其实是用在...
vue计算属性和监听器实例解析
08-27
本文通过基本实例给大家介绍了vue计算属性和监听器的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue计算属性无法监听到数组内部变化的解决方案
10-16
今天小编就为大家分享一篇vue计算属性无法监听到数组内部变化的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序在页面中使用计算属性,监听
05-07
在这个例子中，当`items`数组发生变化时，`total`计算属性会自动更新，并通过监听器再次设置到页面数据中，确保视图与数据的一致性。 总结来说，计算属性和监听是微信小程序中处理数据变化和业务逻辑的重要工具。...
vue监听对象及对象属性问题
12-04
在Vue.js中，数据绑定和响应式系统是其核心特性...对于复杂的对象和数组，深度监听可以确保即使在深层次的嵌套属性变化时也能得到通知，而计算属性和`watch`的组合则允许我们专注于特定的属性变化，避免不必要的处理。
计算属性和监听属性的区别
qq_68609773的博客
11-11 2530
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；当一个属性发生变化时，需要执行对应的操作；immediate：组件加载立即触发回调函数执行，不支持缓存，数据变，直接会触发相应的操作；watch支持异步；
computed method 比较
小白的博客
03-12 245
vue中我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 例子： <!DOCTYPE html> <html> <head> <meta charset=&quot
vue动态监听计算对象中的属性
忆璇的博客
10-09 2903
web开发过程中，经常遇到要自动计算的问题，比如输入几个金额，自动计算出总和，或者计算出折扣什么的。还有更复杂的，动态添加删除数组，数组中每个对象都有自动计算的小计，数组外还有总和的计算，那就需要用到computed和watch了。
计算属性computed和监听属性watch
weixin_67867115的博客
04-10 834
一、计算属性：可以理解为能够在里面写一些计算逻辑的属性（数据缓存，当我们的数据没有变化时，不会再次执行计算的过程） computed: { name: { //获取计算属性 get: function () { return this.firstname + '-' + this.lastname },
vue计算属性和监听属性
self_challenge的博客
03-02 1802
一、计算属性（computed） 当依赖的data对象中的属性值发生变化时，将会触发计算方法，在data对象中生成新的变量，并且会将新的变量缓存起来；（只要依赖的data对象属性值不发生改变，将不会触发计算方法；） ...
Vue：计算属性及监听
sssxlxwbwz的博客
05-02 2162
一、计算属性： 1. 定义：计算属性是通过已有属性，计算的来的属性。 2. 原理：计算属性底层借助了Object.defineProperty()方法提供的getter和setter 3. get()函数： get函数在初次读取时会执行一次 当计算属性所依赖的数据发生改变的时候，get()函数会被再次调用 4. 优势：与methods实现相比，计算属性采用了缓存机制，在获取计算属性的属性值时，若所依赖的属性没有发生变化，那么就不会执行get()函数，而是将缓存的计算属性值返回。与methods每次
计算属性和监听属性
ang0910_的博客
08-30 1014
computed和watch的区别 1.computed能完成的，watch一定能完成 2.watch能完成的功能，computed不一定能完成，例外：watch可以进行异步操作。 注意： 1.所有被vue管理的函数（methods,computed，watch函数），最好写成普通函数，这样this的指向才是vm或组件示例对象。 2.所有不被vue所管理的函数，（定时器回调函数，ajax回调函数，promise回调函数），写成箭头函数，这样this的指向才是vm或组件示例对象。...
vue中计算属性与监听
最新发布
10-15
在Vue中，计算属性和监听器都是用来监听数据变化并执行相应操作的。 计算属性是基于它们的依赖进行缓存的。只有当它们的依赖发生改变时，才会重新计算。计算属性适用于需要进行复杂计算的场景，比如对数据进行过滤、排序等操作。 监听器则是监听指定的数据变化，并在数据变化时执行相应的操作。监听器适用于需要执行一些异步或开销较大的操作的场景。 下面是一个计算属性和监听器的示例： ``` <template> <div> <p>原始价格：{{ price }}</p> <p>打折后价格：{{ discountPrice }}</p> </div> </template> <script> export default { data() { return { price: 100, discount: 0.8 } }, computed: { discountPrice() { return this.price * this.discount } }, watch: { price(newVal, oldVal) { console.log(`价格从${oldVal}变为${newVal}`) } } } </script> ``` 在上面的示例中，我们定义了一个计算属性`discountPrice`，它依赖于`price`和`discount`两个数据。当`price`或`discount`发生变化时，`discountPrice`会重新计算。 同时，我们还定义了一个监听器`watch`，它监听了`price`数据的变化，并在数据变化时打印出变化前后的价格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值