說說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>