工具推薦
推薦vue/cli的一個工具，零配置直接執行vue檔案。
安裝方法：
npm install -g @vue/cli-service-global
複製程式碼使用方法：
vue serve
# or
vue serve MyComponent.vue
複製程式碼computed
這篇文章分享一下computed計算屬性的實現原理。首先分享一個工作中遇到的code review問題！利用3分鐘先看一個例子：
<template>
<div>
<p>valueText：{{ valueText }}</p>
<p>xxx：{{ xxx }}</p>
<button @click="changeValue">改變 abc 和 xxx 的值</button>
</div>
</template>
<script>
export default {
data () {
return {
xxx: false
}
},
computed: {
valueText () {
return this.abc && this.xxx;
}
},
created () {
this.abc = false;
},
methods:{
changeValue () {
this.abc = true;
this.xxx = true;
}
}
}
</script>
複製程式碼按鈕點選前後分別輸出什麼？
又或者有為什麼點選後valueText不是true的疑問？如果有，就繼續往下通過原始碼分析computed的原理！
// new Vue之後就呼叫_init方法
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
......
vm._self = vm
// 初始化生命週期
initLifecycle(vm)
// 初始化事件中心
initEvents(vm)
// 初始化渲染
initRender(vm)
callHook(vm, 'beforeCreate')
// 初始化注入
initInjections(vm) // resolve injections before data/props
// 初始化狀態
// 初始化 props、data、methods、watch、computed 等屬性
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
......
}
}
複製程式碼在Vue例項初始化時，注意到有一個 initState 的方法。這個方法就是初始化 props、data、methods、watch、computed 等屬性。進入函式體裡面繼續看：
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props) // 初始化props
if (opts.methods) initMethods(vm, opts.methods) // 初始化事件
if (opts.data) {
initData(vm) // 初始化data
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed) // 初始化computed
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
複製程式碼非常簡單，就是對一些屬性做初始化呼叫，本文重點是 computed ！好，繼續看 initComputed 的內容：
const computedWatcherOptions = { computed: true }
// 定義computed屬性
function initComputed (vm: Component, computed: Object) {
// 先宣告一個computedWatcher空物件
const watchers = vm._computedWatchers = Object.create(null)
// 判斷是不是服務端渲染
const isSSR = isServerRendering()
// 遍歷computed中的物件
for (const key in computed) {
const userDef = computed[key]
// 獲取屬性的getter方法，這裡有兩種情況：是函式就直接獲取，是物件就獲取get值
const getter = typeof userDef === 'function' ? userDef : userDef.get
if (process.env.NODE_ENV !== 'production' && getter == null) {
warn(
`Getter is missing for computed property "${key}".`,
vm
)
}
// 非服務端渲染，new一個computed watcher例項。
if (!isSSR) {
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
}
// 不存在Vue例項中，就去定義
if (!(key in vm)) {
defineComputed(vm, key, userDef)
} else if (process.env.NODE_ENV !== 'production') {
// 開發環境下判斷computed的key不能跟data或props同名
if (key in vm.$data) {
warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
}
}
}
複製程式碼到這裡，我們先不去深入 computed watcher 例項的宣告，先看 defineComputed :
export function defineComputed (
target: any,
key: string,
userDef: Object | Function
) {
// 不是服務端渲染shouldCache為true
const shouldCache = !isServerRendering()
// 如果是使用者定義的函式
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: userDef
sharedPropertyDefinition.set = noop
// 不是函式，也就是物件，那麼獲取使用者定義的getter和setter方法
} else {
sharedPropertyDefinition.get = userDef.get
? shouldCache && userDef.cache !== false
? createComputedGetter(key)
: userDef.get
: noop
sharedPropertyDefinition.set = userDef.set
? userDef.set
: noop
}
if (process.env.NODE_ENV !== 'production' &&
sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
`Computed property "${key}" was assigned to but it has no setter.`,
this
)
}
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}
複製程式碼sharedPropertyDefinition結構如下：
const sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
}
複製程式碼sharedPropertyDefinition 的 get 函式也就是 createComputedGetter(key) 的結果：
// 建立計算屬性的getter方法
function createComputedGetter (key) {
return function computedGetter () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
watcher.depend() // 收集依賴
return watcher.evaluate() // 計算屬性的值
}
}
}
複製程式碼當計算屬性被呼叫時便會執行 get 訪問函式，從而關聯上觀察者物件 watcher 然後執行 wather.depend() 收集依賴和 watcher.evaluate() 計算求值。
OK，下面我們回到computed watcher的例項化：
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
複製程式碼這裡的引數意義都比較清晰。 vm 指的 Vue 例項， getter 指的是計算屬性的 getter 方法， computedWatcherOptions 即表明這是一個 computed watcher 。
export default class Watcher {
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {
this.vm = vm
if (isRenderWatcher) {
vm._watcher = this
}
vm._watchers.push(this)
// options
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.computed = !!options.computed
this.sync = !!options.sync
this.before = options.before
} else {
this.deep = this.user = this.computed = this.sync = false
}
this.cb = cb
this.id = ++uid // uid for batching
this.active = true
this.dirty = this.computed // for computed watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// 對於computed watcher這裡是一個getter函式，賦值給getter
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = function () {}
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
// 計算屬性執行到這裡為true
if (this.computed) {
// 和其他watcher的區別，計算屬性這裡並不會立刻返回求值
this.value = undefined
// 建立了該屬性的訊息訂閱器
this.dep = new Dep()
} else {
this.value = this.get()
}
}
複製程式碼export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
複製程式碼這裡Watcher和Dep的關係就是：
watcher 中例項化了 dep 並向 dep.subs 中新增了訂閱者，dep 通過 notify 遍歷了 dep.subs 通知每個 watcher 更新。
當獲取到計算屬性的值時，就會執行getter函式，即
if (watcher) {
watcher.depend()
return watcher.evaluate()
}
複製程式碼再看到watcher物件中的depend和evaluate方法：
depend () {
// Dep.target代表的是渲染watcher
// 在獲取計算屬性值時，觸發其他響應式資料的getter，此時Dep.target代表的是computed watcher
if (this.dep && Dep.target) {
// 渲染watcher訂閱computed watcher的變化
this.dep.depend()
}
}
複製程式碼evaluate () {
if (this.dirty) {
// 這裡的get就是computed上的getter函式
this.value = this.get()
this.dirty = false
}
// 返回getter的值
return this.value
}
複製程式碼以上就是計算屬性getter的整個過程，這裡稍微總結一下：
- new Vue 或 Vue.extend 例項化一個元件時，data 或 computed 會各自建立響應式系統，Observer 遍歷 data 中每個屬性設定 get/set 資料攔截。對於 computed 屬性，會呼叫 initComputed 函式
- 例項化一個computed watcher，其中會註冊依賴物件dep
- 呼叫計算屬性的 watcher 執行 depend() 方法向自身的訊息訂閱器 dep 的 subs 中新增其他屬性的 watcher
- 呼叫 watcher 的 evaluate 方法（進而呼叫 watcher 的 get 方法）讓自身成為其他 watcher 的訊息訂閱器的訂閱者，首先將 watcher 賦給 Dep.target，然後執行 getter 求值函式，當訪問求值函式裡面的屬性（比如來自 data、props 或其他 computed）時，會同樣觸發它們的 get 訪問器函式從而將該計算屬性的 watcher 新增到求值函式中屬性的 watcher 的訊息訂閱器 dep 中，當這些操作完成，最後關閉 Dep.target 賦為 null 並返回求值函式結果。
計算屬性的setter的流程比較簡單：
- 呼叫 set 攔截函式，然後呼叫自身訊息訂閱器 dep 的 notify 方法，遍歷當前 dep 中儲存著所有訂閱者 wathcer 的 subs 陣列，並逐個呼叫 watcher 的 update 方法，完成響應更新。
現在再回頭去看第一個問題的答案就一清二楚了。計算屬性 valueText 因為 this.abc 為 undefined 並沒有收集到 this.abc 的變化。所以點選之後是 valueText 並不會改變。如果將兩個屬性調換位置，那麼就如我們所願了：
computed: {
valueText () {
return this.xxx && this.abc;
}
}
複製程式碼這裡可以得出結論：
computed屬性getter中，保證第一次呼叫時能執行到你所希望的監聽的繫結資料。
覺得有幫助的可以關注下我的部落格！！！給個star支援一下吧！