<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    說說methods,computed,watch三者區別是什么?

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

    「點點贊賞,手留余香」

    0

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » 說說methods,computed,watch三者區別是什么?

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区