说说methods,computed,watch三者区别是什么?
目录
watch
- 当数据改变时,直接触发对应操作;
- 可以监听的数据有三部分,即
props
,data
,computed
; - 所触发的对应操作函数中包含两个参数,第一个参数是新值 newValue,第二个参数是旧值 oldValue;
- 不支持缓存,但支持异步,在数据变化时执行异步或开销较大的操作时使用;
- 一对多,即一个数据改变时,可以通过触发对应操作改变多个其他的数据。
computed
computed
依赖于data
中的数据,只要在它的相关依赖发生改变时就会触发computed
;- 计算属性是基于属性的依赖进行缓存的,当
data
中的数据未变时,优先取缓存中的东西; - 支持缓存,但不支持异步;
- 多对一或一对一,即一个属性是由其他属性计算而来的,这个属性可能是依赖其他一个或多个属性。
methods
- 是一个方法,执行的时候需要事件进行触发;
- 可以在模板或者 js 中以方法的形式调用
- 执行次数跟调用次数想对应
使用说明
export default { data: { userName: '码云笔记' }, watch:{ userName(newValue,oldValue){ console.log(`原来的值:${newValue}`); console.log(`新的值${oldValue}`); }, //深度监听 userName:{ handler:function(newValue,oldValue){ console.log(`原来的值:${newValue}`); console.log(`新的值${oldValue}`); }, immediate:true, deep:true }, }, computed: { gUserName() { return this.userName }, //computed 传参 gUserName(keyName){ return function(keyName){ return keyName+this.userName } } }, methods: { getUserName() { return this.userName } } }
<template> <!-- methods --> <div> 我的名字叫:{{ getUserName() }} </div> <!-- computed --> <div> 我的名字叫:{{ gUserName }} </div> <!-- computed 传参 --> <div> {{ gUserName("我的名字叫:") }} </div> </template>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 说说methods,computed,watch三者区别是什么?
码云笔记 » 说说methods,computed,watch三者区别是什么?