watch,commputed,methods 的对比|学习笔记

简介: 快速学习 watch,commputed,methods 的对比

开发者学堂课程【Vue.js 入门与实战watch,commputed,methods 的对比学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8208


watch,commputed,methods 的对比


内容介绍

一、watch 和 computed 对比

 

本节主要进行watch 、 computed 和 methods 之间的对比

 

一、watch 和 computed 对比

1.相同点:

只要是计算属性,都一个 function ,而只要是一个 watch 也是一个 fuction 。

2.不同点:

在计算属性内部,无论如何都要 return 出一个值,但 watch 内没有 return 值。

 

二、methods 、watch 和 computed 对比

1. computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;

2. methods 方法表示—个具体的操作,主要书写业务逻辑,例如获取用户列表;
3. watch 一个对象,键是需要观察的表达式,值是对应回调函数。在回调函数中,主要有两个参数,一个 new value ,一个是 out value,监视到数据的改变之后,回到 watch 的回调函数中。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是 computed 和 methods的结合体。Computed 可以监视数据变化, watch 也可以。Methods 只能做业务逻辑, watch 也可以。

平时以上三个用法各不相同,在不同的业务场景下,可以按需选择。

Watch 更适合监听虚拟的东西,例如路由地址,

Methods 更多的做方法的调用,

Computed 可以在引用一些数据,经过一系列操作,返回一个新的数据。

相关文章
computed【计算属性】watch【监听】methods【方法】的区别
computed【计算属性】watch【监听】methods【方法】的区别
|
3月前
|
缓存 JavaScript API
理解掌握 `watch`、`computed`、`watchEffect`
【8月更文挑战第5天】理解掌握 `watch`、`computed`、`watchEffect`
38 5
|
1月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
114 0
|
6月前
|
缓存 JavaScript
computed和methods的区别
computed和methods的区别
59 1
|
6月前
|
JavaScript
Vue中$watch()方法和watch属性的区别
Vue中$watch()方法和watch属性的区别
160 1
|
缓存
computed和watch
computed和watch
|
6月前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
6月前
|
缓存 监控 JavaScript
methods、computed、watch它们的差异与区别
在Vue中,Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。
116 0
|
资源调度
vue3 + ts:watch(immediate、deep、$watch)
vue3 + ts:watch(immediate、deep、$watch)
208 0
vue3 + ts:watch(immediate、deep、$watch)