成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue源碼解析(三)-computed計(jì)算屬性&&lazy watcher

CoderStudy / 2230人閱讀

摘要：前言源碼解析一模版渲染源碼解析二雙向綁定官網(wǎng)給出的如下結(jié)果源碼分析判斷參數(shù)是否包含屬性本例中本例中和是函數(shù)監(jiān)聽計(jì)算屬性設(shè)置，延遲執(zhí)行的方法設(shè)置可以通過本例方式訪問計(jì)算屬性對象初始化時(shí)會(huì)針對屬性的所有值分別一個(gè)對象，在源碼解析二中有詳細(xì)介

前言

1、Vue源碼解析(一)-模版渲染
2、Vue源碼解析(二)-MVVM雙向綁定

demo

官網(wǎng)給出的demo如下



new Vue({
  el: "#app",
  template: 
  `

    
Original message is: {{ message }}

    
Computed reversed message:: {{ reversedMessage }}

  
`,
  data(){
    return {
      message: "Hello",
    }
  },
  computed:{
    reversedMessage(){
        return this.message.split("").reverse().join("")
    }
  }
})
結(jié)果：
Original message: "Hello"
Computed reversed message: "olleH"
源碼分析 
//判斷參數(shù)是否包含computed屬性
if (opts.computed) { initComputed(vm, opts.computed); }

function initComputed (vm, computed) {
   var watchers = vm._computedWatchers = Object.create(null);
   //本例中key=‘reversedMessage’
   for (var key in computed) {
      //本例中userDef和getter是reversedMessage函數(shù)
      var userDef = computed[key];
      var getter = typeof userDef === "function" ? userDef : userDef.get;
      //監(jiān)聽計(jì)算屬性,設(shè)置lazy=true，延遲執(zhí)行watcher的get方法
      watchers[key] = new Watcher(vm,getter,{lazy:true});
      //設(shè)置可以通過vm[key](本例vm.reversedMessage)方式訪問計(jì)算屬性
      defineComputed(vm, key, userDef);
   }
}

1、vue對象初始化時(shí)會(huì)針對computed屬性的所有key值分別new一個(gè)watcher對象，在Vue源碼解析(二)中有詳細(xì)介紹watcher的原理，當(dāng)時(shí)提到watcher初始化會(huì)立即調(diào)用一次watcher.get方法,然后實(shí)際上可以通過傳入{lazy:true}參數(shù)來延遲watcher.get方法的執(zhí)行

var Watcher = function Watcher (vm,expOrFn,options){
    //延遲計(jì)算
    this.lazy = options.lazy;
    //還沒有計(jì)算，所以數(shù)據(jù)是臟的
    this.dirty = options.lazy;
    this.value = this.lazy
    ? undefined
    //計(jì)算getter值和收集依賴
    : this.get();
}

2、defineComputed(vm, key, userDef)，將computed屬性代理到vm上，通過vm[key]訪問computed屬性值

function defineComputed (target,key,userDef){
    //userDef是function，getter設(shè)為userDef或userDef的值
    if (typeof userDef === "function") {
        //shouldCache是否緩存，這也是使用computed屬性最重要的原因，computed值會(huì)被緩存起來，而不是每次重新執(zhí)行函數(shù)生成
        sharedPropertyDefinition.get = shouldCache
          ? createComputedGetter(key)
          : userDef;
        sharedPropertyDefinition.set = null;
    //userDef是不是function，getter設(shè)為userDef.get,setter設(shè)為userDef.set
    } else {
        sharedPropertyDefinition.get = userDef.get
          ? shouldCache && userDef.cache !== false
            ? createComputedGetter(key)
            : userDef.get
          : null;
        sharedPropertyDefinition.set = userDef.set
          ? userDef.set
          : null;
    }
    //，將computed屬性代理到vm上，通過vm[key]訪問computed屬性值
    Object.defineProperty(target, key, sharedPropertyDefinition);
}

function createComputedGetter (key) {
  return function computedGetter () {
      //shouldCache = true時(shí)直接返回緩存值watcher.value
      var watcher = this._computedWatchers && this._computedWatchers[key];
      //存在臟數(shù)據(jù)則重新計(jì)算watcher的值
      if (watcher.dirty) {
        watcher.evaluate();
      }
      //直接返回緩存中watcher的值
      return watcher.value
    }
  }
}

3、前面提到watcher.get方法會(huì)延遲執(zhí)行，那么到底啥時(shí)執(zhí)行呢？這又得提到Vue源碼解析(二)中的updateComponent方法，由于本例引用了計(jì)算屬性{{ reversedMessage }}，updateComponent中的render函數(shù)則會(huì)調(diào)用vm.reversedMessage,因此觸發(fā)第二步的sharedPropertyDefinition.get函數(shù),調(diào)用 watcher.evaluate(),最終調(diào)用watcher.get()來計(jì)算watcher的值和收集依賴。（watcher.get方法將監(jiān)聽vm.reversedMessage的watcher對象和發(fā)布vm.message變化的dep對象綁定，因此當(dāng)vm.message變化時(shí)，vm.reversedMessage值也會(huì)同步變化）
因此watcher.get是在第一次訪問vm.reversedMessage對象時(shí)調(diào)用的，所以如果模版沒有用到{{ reversedMessage }}值的話vm.reversedMessage的值是不會(huì)被計(jì)算的

/**
 * Evaluate the value of the watcher.
 * This only gets called for lazy watchers.
 */
Watcher.prototype.evaluate = function evaluate () {
  this.value = this.get();
  this.dirty = false;
};
雙向綁定問題

正好之前看到過一個(gè)問題vue.js使用computed計(jì)算某個(gè)屬性后，該屬性的雙向綁定沒了,看了本文的源碼后大家應(yīng)該了解了計(jì)算屬性用在v-model上應(yīng)該設(shè)置setter方法，例如本例中demo應(yīng)該這么寫：

new Vue({
  el: "#app",
  template: 
  `

    
    
Original message is: {{ message }}

    
Computed reversed message:: {{ reversedMessage }}

  
`,
  data(){
    return {
      message: "jixiangwu",
    }
  },
  computed:{
    reversedMessage:{
        get(){
            return this.message.split("").reverse().join("")
        },
        set(val){
            this.message = val.split("").reverse().join("")
        }
    }
  }
})

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89612.html

相關(guān)文章

  • 【Vue原理】Computed - 源碼版

    摘要：被讀取，包裝的函數(shù)觸發(fā)，第一次會(huì)進(jìn)行計(jì)算被調(diào)用，進(jìn)而被調(diào)用，被設(shè)置為，舊值頁面被緩存起來。計(jì)算會(huì)讀取，此時(shí)就收集到同時(shí)也會(huì)保存到的依賴收集器用于下一步。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點(diǎn)擊 下面鏈接 或者 拉到 下...

    solocoder 評論0 收藏0

  • vue源碼分析系列之響應(yīng)式數(shù)據(jù)（三）

    摘要：并在內(nèi)執(zhí)行了函數(shù)，在函數(shù)內(nèi)部，訪問了。至此知道了它依賴于。需要根據(jù)最新的計(jì)算。本例中收集到了依賴并且也被告知觀察了他們。文章鏈接源碼分析系列源碼分析系列之環(huán)境搭建源碼分析系列之入口文件分析源碼分析系列之響應(yīng)式數(shù)據(jù)一源碼分析系列之響應(yīng)式數(shù)據(jù)二 前言 上一節(jié)著重講述了initData中的代碼，以及數(shù)據(jù)是如何從data中到視圖層的，以及data修改后如何作用于視圖。這一節(jié)主要記錄initCo...

    shenhualong 評論0 收藏0

  • [Vue.js進(jìn)階]從源碼角度剖析計(jì)算屬性的原理

    摘要：前言最近在學(xué)習(xí)計(jì)算屬性的源碼，發(fā)現(xiàn)和普通的響應(yīng)式變量內(nèi)部的實(shí)現(xiàn)還有一些不同，特地寫了這篇博客，記錄下自己學(xué)習(xí)的成果文中的源碼截圖只保留核心邏輯完整源碼地址可能需要了解一些響應(yīng)式的原理版本計(jì)算屬性的概念一般的計(jì)算屬性值是一個(gè)函數(shù)，這個(gè)函數(shù)showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言 最近在學(xué)習(xí)Vue計(jì)...

    melody_lql 評論0 收藏0

  • 源碼學(xué)習(xí)VUE之Watcher

    摘要：這里面還有一些問題對應(yīng)的回調(diào)函數(shù)這就是執(zhí)行上下文收集依賴同步異步更新所謂的同步更新是指當(dāng)觀察的主體改變時(shí)立刻觸發(fā)更新。 我們在前面推導(dǎo)過程中實(shí)現(xiàn)了一個(gè)簡單版的watcher。這里面還有一些問題 class Watcher { constructors(component, getter, cb){ this.cb = cb // 對應(yīng)的回調(diào)函數(shù),callback...

    sutaking 評論0 收藏0

  • Vue源碼解析(二)-MVVM雙向綁定&&Watcher介紹

    摘要：前言上一遍文章介紹了模版渲染的實(shí)現(xiàn)，這篇文章將繼續(xù)介紹雙向綁定的實(shí)現(xiàn)官網(wǎng)如下，當(dāng)。 前言 上一遍文章介紹了Vue模版渲染的實(shí)現(xiàn)（https://segmentfault.com/a/11...），這篇文章將繼續(xù)介紹雙向綁定的實(shí)現(xiàn) demo 官網(wǎng)demo如下，當(dāng)data。message的值變化，input的value值也會(huì)相應(yīng)的變化；當(dāng)用戶改變input框中的內(nèi)容時(shí)data.messag...

    miya 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<