1. 程式人生 > >Vue原始碼學習——v2.5.8

Vue原始碼學習——v2.5.8

待修正

1. cache util

利用閉包,每個呼叫cached函式的方法都會生成一個cache變數,在cache變數中做快取

/**
 * Create a cached version of a pure function.
 */
export function cached<F: Function> (fn: F): F {
  const cache = Object.create(null)
  return (function cachedFn (str: string) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }: any)
}

/**
 * Capitalize a string.
 */
export const capitalize = cached((str: string): string => { return str.charAt(0).toUpperCase() + str.slice(1) })

2. reactive property

同樣是閉包,setter更新val的值,getter中通過val取到新的值

/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any
, customSetter?: ?Function, shallow?: boolean ) { const dep = new Dep() const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return } // cater for pre-defined getter/setters const getter = property && property.get
const setter = property && property.set let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter() } if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify() } }) }

3. 取值的一種做法

if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    // i = data.hook.prepatch
    i(oldVnode, vnode)
}

相關推薦

Vue原始碼學習——v2.5.8

1. cache util 利用閉包,每個呼叫cached函式的方法都會生成一個cache變數,在cache變數中做快取 /** * Create a cached version o

Vue深度學習5)-過渡效果

round handle urn ati 根據 enter index 好的 ecan 簡介 通過 Vue.js 的過渡系統,你可以輕松的為 DOM 節點被插入/移除的過程添加過渡動畫效果。Vue 將會在適當的時機添加/移除 CSS 類名來觸發 CSS3 過渡/動畫效果,

vue原始碼學習——觀察者模式

情景:接觸過vue的同學都知道,我們曾經都很好奇為什麼vue能這麼方便的進行資料處理,當一個物件的某個狀態改變之後,只要依賴這個資料顯示的部分也會發生改變,如果你依舊很好奇,那麼今天你就可以瞭解一下實現的原理 什麼是觀察者模式​​​​​​​    官方解釋是

vue原始碼學習——資料雙向繫結的Object.defineProperty

情景:vue雙向繫結,這應該是多數講vue優勢脫口而出的名詞,然後你就會接觸到一個方法 Object.defineProperty(a,"b",{}) 這個方法該怎麼用 簡單例子敲一下 var a = {} Object.defineProperty(a,"b

Vue原始碼學習(二)——生命週期

官網對生命週期給出了一個比較完成的流程圖,如下所示: 從圖中我們可以看到我們的Vue建立的過程要經過以下的鉤子函式: beforeCreate =&gt; created =&gt; beforeMount =&gt; mounted =&gt; beforeUpda

spring原始碼學習5.1.0版本)——Bean的初始化(中)

目錄   前言 createBean 有自定義TargetSource代理類的生成 resolveBeforeInstantiation applyBeanPostProcessorsBeforeInstantiation postProcessBeforeIn

spring原始碼學習5.1.0版本)——Bean的初始化(上)

目錄   前言 源頭 preInstantiateSingletons方法 getBean(String beanName) doGetBean getObjectForBeanInstance getObjectFromFactoryBean doGe

【機器人學】機器人開源專案KDL原始碼學習:(8)KDL的精髓

  首先說一下我的心得: 1. 我認為KDL的精髓是Spatial Vector,結合C++等面向物件的語言可以寫出較好的軟體。 2. 直接閱讀KDL程式碼不適合初學者學習機械臂動力學。 3. 要學習機械臂動力學的話應首先閱讀使用3維向量推導公式的文獻,也就是線速度和角速度獨立分析

PHP程式碼審計Day學習筆記5-8

文章目錄 Day5 - escapeshellarg與escapeshellcmd使用不當 前言 mail() FILTER_VALIDATE_EMAIL escapeshellcmd() escapes

Vue原始碼學習之——如何在Chrome中deBug原始碼

參考連結 如果我們不用單檔案元件開發,一般直接<script src="dist/vue.js">引入開發版vue.js 這種情況下debug也是很方便的,只不過vue.js檔案程式碼是rollup生成的 但是如果能夠在vue專案中的src目錄下中的檔案打斷點除錯就

Vue原始碼學習(4)——資料響應系統

Vue原始碼學習(4)——資料響應系統:通過initData() 看資料響應系統     下面,根據理解我們寫一個簡略的原始碼:參考 治癒watcher在:vm.$mount(vm.$options.el)    Function de

vue原始碼學習(2)——建構函式

vue原始碼學習——建構函式 下圖從上到下是從package.json沿路找到建構函式的路徑;從下到上是建構函式的構造路徑,檢視建構函式添加了什麼方法。        PS: 以上的流程掛載了很多方法,但是注意:這個時候方法並沒有被呼

Vue原始碼學習(1)——目錄結構

Vue原始碼學習——目錄結構 參考博主 目錄結構: -scripts:包含與構建相關的指令碼和配置檔案。 -dist:構建後文件的輸出目錄 -flow:包含Flow的型別宣告。這些宣告是全域性載入的,將在普通原始碼中看到它們在型別註釋中使用。 -packages:

Vue.js學習記錄-5-Vue進階:元件

6.元件 - 計數器Demo為例 元件使用細節 全域性元件 and 區域性元件 全域性元件: // 全域性元件(子元件) Vue.component('row', {

Vue原始碼學習二 ———— Vue原型物件包裝

Vue原型物件的包裝 在Vue官網直接通過 script 標籤匯入的 Vue包是 umd模組的形式。在使用前都通過 new Vue({})。記錄一下 Vue建構函式的包裝。 在 src/core/instance/index.js 這個檔案是 Vue建構函式的出生地。 import { initMixi

Vue原始碼學習三 ———— Vue建構函式包裝

Vue原始碼學習二 是對Vue的原型物件的包裝,最後從Vue的出生檔案匯出了 Vue這個建構函式 來到 src/core/index.js 程式碼是: import Vue from './instance/index' import { initGlobalAPI } from './g

vue原始碼學習——虛擬dom樹是如何定義的

情景:相信通過前面的學習你已經知道了虛擬dom為什麼會被構思,那麼接下來你好奇的應該是作者該如何定義這個虛擬dom export default class VNode { tag: string | void;//當前節點的標籤名 data: VNodeData

spring原始碼學習5.1.0)——Bean的初始化(下)

目錄 前言 結語 前言 上篇部落格主要介紹了createBean方法,Bean的初始化會有三個主要的方法 createBean:初始化Bean,此時還沒有進行屬性填充 populateBean:進行屬性填充 initializ

Vue.js學習筆記】8:建立多個Vue例項物件,認識Vue中的元件

建立多個Vue例項物件 這裡在同一個js檔案中建立了兩個Vue例項物件,它們各自能完成前面學的那些功能,同時使用物件名稱也可以互相訪問,協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-

Sqlite3原始碼學習5)OS的介面VFS

    之前講了那麼多的環境搭建,現在終於可以學習原始碼了。官方有一篇講解VFS的文件,對理解sqlite3的VFS有很大的幫助: 1.VFS簡介 VFS也就是所謂的虛擬檔案系統,因為sqlite3執行在不同的平臺上會有不同的檔案系統,VFS就是對不同的檔案系統做一個