说说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三者区别是什么?的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。