Рекомендации по инструменту
Один из рекомендуемых vue/cliинструмент, запустите файл vue напрямую с нулевой конфигурацией.
способ установки:
npm install -g @vue/cli-service-global
Инструкции:
vue serve
# or
vue serve MyComponent.vue
computed
Поделитесь этой статьейcomputedПринципы реализации вычисляемых свойств. Сначала поделитесь проблемой проверки кода, возникшей на работе! Уделите 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вопрос? Если есть, продолжайте анализировать принцип вычисления через исходный код!
// 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Методы. Этот метод предназначен для инициализации свойств, данных, методов, часов, вычисляемых и других свойств. Войдите в тело функции и продолжайте видеть:
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
}
Функция get SharedPropertyDefinitioncreateComputedGetter(key)результат:
// 创建计算属性的getter方法
function createComputedGetter (key) {
return function computedGetter () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
watcher.depend() // 收集依赖
return watcher.evaluate() // 计算属性的值
}
}
}
Когда вызывается вычисляемое свойство, выполняется функция доступа get, которая связывает наблюдатель объекта-наблюдателя и выполняет wather.depend() собирает зависимости, а watcher.evaluate() вычисляет оценку.
Хорошо, вернемся кcomputed watcherЭкземпляр:
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
Смысл параметров здесь относительно ясен. vm относится к экземпляру Vue, getter — к методу получения вычисляемого свойства, а calculatedWatcherOptions указывает, что это вычисляемый наблюдатель.
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()
}
}
}
Здесь отношения между Наблюдателем и Депом таковы:
Наблюдатель создает экземпляр dep и добавляет подписчиков в dep.subs, а dep проходит через dep.subs через уведомление, чтобы уведомить каждого наблюдателя об обновлениях.
Когда значение вычисляемого свойства получено, функция получения выполняется, т.е.
if (watcher) {
watcher.depend()
return watcher.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
}
Выше приведен весь процесс вычисления получателя свойства, вот небольшое резюме:
- Когда новый Vue или Vue.extend создает экземпляр компонента, данные или вычисленные будут устанавливать отзывчивую систему соответственно, и Observer просматривает каждое свойство в данных, чтобы установить перехват данных. Для вычисляемых свойств вызывается функция initComputed
- Создайте экземпляр вычисляемого наблюдателя, который зарегистрирует зависимость зависимого объекта.
- Вызовите наблюдатель вычисляемого свойства, чтобы выполнить метод depend(), чтобы добавить наблюдателей других свойств в подпрограммы своего собственного сообщения подписчика.
- Вызовите метод оценки наблюдателя (а затем вызовите метод get наблюдателя), чтобы стать подписчиком сообщений подписчиков других наблюдателей, сначала назначьте наблюдателя Dep.target, а затем выполните функцию оценки получателя при доступе к свойства в функции оценки (например, из данных, свойств или других вычисляемых), их функции доступа get также запускаются для добавления наблюдателя вычисляемого свойства в dep подписчика сообщения наблюдателя свойства в функции оценки. операции завершены, наконец, закрывает Dep.target как null и возвращает результат функции оценки.
Процесс вычисления установщиков свойств относительно прост:
- Вызовите установленную функцию перехвата, затем вызовите метод уведомления своего собственного сообщения подписчика dep, просмотрите массив subs, который сохраняет все подписчики-наблюдатели в текущем отложении, и вызовите метод обновления наблюдателя один за другим, чтобы завершить обновление ответа.
Теперь вернитесь и посмотрите на ответ на первый вопрос. вычисляемое свойствоvalueTextПоскольку this.abc не определен, никакие изменения в this.abc не собираются. Итак, после щелчкаvalueTextне изменится. Если мы поменяем местами два свойства, то это будет работать так, как мы хотим:
computed: {
valueText () {
return this.xxx && this.abc;
}
}
Здесь можно сделать вывод, что:
В получателе вычисляемых свойств гарантируется, что данные привязки, которые вы хотите отслеживать, могут быть выполнены при первом вызове.
Если вы найдете это полезным, вы можете подписаться на меняблог! ! ! Дайте звезду, чтобы поддержать это!