computed计算属性和watch属性监听器的区别(data)

区别:

  • computed跟data一样都是一个数据属性,不过computed可以通过计算输出一个结果。
    场景:当页面需要渲染一个计算过的属性,可以放到computed里面,剩下的后面再加

  • watch是属性监听器,一般用来监听属性变化,或者计算属性的变化(例如监听input中绑定的值的变化,用来实现即时搜索)
    场景:监听data或者computed变化,变化了就会调用方法

总结:computed 和 watch 的使用场景并不一样,computed 的话是通过几个数据的变化,来影响一个数据,而 watch,则是可以一个数据的变化,去影响多个数据。

补充:computed 跟 methods 里面的方法的区别,computed 的话访问的时候会直接返回已缓存的结果,而不会像 methods 一样再次计算

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,计算属性监听器都是响应数据变化的方式,但是它们的用法和作用略有不同。 计算属性是基于响应式数据计算而来的属性,当计算属性所依赖的数据发生变化时,计算属性会自动重新计算。计算属性的特点是可以缓存结果,只有在计算属性所依赖的数据发生变化时才会重新计算。计算属性通常用于需要依赖多个数据计算得出的值,或者需要对数据进行处理后返回一个新的值的情况。 ```html <template> <div> <p>{{ fullName }}</p> </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return `${this.firstName} ${this.lastName}` } } } </script> ``` 在上面的示例中,`fullName`是一个计算属性,它依赖于`firstName`和`lastName`两个响应式数据,当`firstName`或`lastName`发生变化时,`fullName`会自动重新计算。 监听器是用于监听某个数据的变化,当该数据发生变化时,监听器会执行指定的回调函数。监听器的特点是不能缓存结果,每次数据变化时都会执行回调函数。监听器通常用于需要在数据变化时执行一些异步操作的情况。 ```html <template> <div> <p>Name: {{ name }}</p> </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { name() { return `${this.firstName} ${this.lastName}` } }, watch: { name(newName, oldName) { console.log(`Name changed from ${oldName} to ${newName}`) } } } </script> ``` 在上面的示例中,`name`是一个计算属性,它依赖于`firstName`和`lastName`两个响应式数据,当`firstName`或`lastName`发生变化时,`name`会自动重新计算。同时,我们定义了一个监听器监听`name`的变化,当`name`发生变化时,回调函数会被执行。注意,监听器的回调函数接受两个参数,分别是新值和旧值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值