说说methods,computed,watch三者区别是什么?

目录
文章目录隐藏
  1. watch
  2. computed
  3. methods
  4. 使用说明

说说 methods,computed,watch 三者区别是什么?

watch

  • 当数据改变时,直接触发对应操作;
  • 可以监听的数据有三部分,即propsdatacomputed
  • 所触发的对应操作函数中包含两个参数,第一个参数是新值 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>

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 说说methods,computed,watch三者区别是什么?

发表回复