前言
用惯了vue的computed属性，在小程序开发中不免也会想着应用，而官网正好提供了miniprogram-computed来在小程序中应用computed属性。本着精进技术的准则，一起来瞅瞅官网的源码吧！
根本应用
// js代码
import { behavior as computedBehavior } from 'miniprogram-computed'
Component({
behaviors: [ computedBehavior ],
data: {
a: 1,
b: {
c: 1,
d: [2, 3]
}
},
computed: {
total(data) {
return data.a + data.b.c + data.b.d[0]
}
}
})
// 页面中应用
// <view>{{ total }}</view>源码解析
1.初始化computedWatchInfo对象
在created生命周期中初始化了computedWatchInfo对象，并保留到页面根实例上。
<span style=”color:rgb(236, 68, 68);”>computedWatchInfo</span>对象保护了以后组件实例的computed计算信息。
<span style=”color:rgb(236, 68, 68);”>computedUpdaters数组</span>保留了包装后的计算函数，每当data值变动后，就执行其中保留的包装函数，并依据computedRelatedPathValues中收集的依赖关系，来判断是否要执行原始计算函数。
<span style=”color:rgb(236, 68, 68);”>computedRelatedPathValues</span>对象保留了computed属性值与计算函数运算过程中所依赖的key与keyValue的映射关系，用于前期data值变动后，通过查找依赖值是否变动，来决定是否进行从新计算。
// 初始化以后组件的监听对象
const computedWatchInfo = {
// 保留包装后的计算函数
computedUpdaters: [],
// 依据computed属性值保留计算过程中依赖的data中的key及value
computedRelatedPathValues: {},
watchCurVal: {},
_triggerFromComputedAttached: {}
}
// 保留到根实例_computedWatchInfo属性中
if (!this._computedWatchInfo) this._computedWatchInfo = {}
// computedWatchDefId 继续自增的数字
this._computedWatchInfo[computedWatchDefId] = computedWatchInfo2.遍历computed对象将key及computedValue设置到data中
在attached生命周期中，遍历所有的computed属性及对应的计算函数，执行计算函数并传入代理后的data对象，将key及计算后的value值通过setData设置到data中。
（1）在attached生命周期中，遍历computed，拿到所有的计算函数，进行computed值的初始化，并对每个计算函数所依赖的data属性值进行依赖关联关系收集，并将收集后的关系表保留到监听对象computedRelatedPathValues对象中。
（2）<span style=”color:rgb(236, 68, 68);”>dataTracer.create(this.data, relatedPathValuesOnDef)</span> 这个办法的执行比拟重要，它即通过Proxy对data对象进行了代理，也在getter办法中，收集了计算函数运行时，所依赖的data数值，并建设了依赖关联关系表，用于前期判断是否须要从新执行计算函数。
（3）将依赖关联关系表存到了computedRelatedPathValues属性上。
// 计算方法 function
const updateMethod = computedDef[targetField]
// 依赖关联关系表
const relatedPathValuesOnDef = []
// 返回计算后的val
const val = updateMethod(
// 传入用户定义的data属性对象
// 返回了代理的data对象
dataTracer.create(this.data, relatedPathValuesOnDef)
)
const pathValues = relatedPathValuesOnDef.map(({ path }) => ({
path,
// 依据数组门路，从data中获取value
value: dataPath.getDataOnPath(this.data, path)
}))
// 将computed属性与计算值设置到data中
this.setData({
// 定义的computed属性 返回实在的的val
[targetField]: dataTracer.unwrap(val)
})
computedWatchInfo._triggerFromComputedAttached[targetField] = true
// 保留每个计算函数的依赖关联关系表
computedWatchInfo.computedRelatedPathValues[targetField] = pathValues（4）设置包装函数并保留到监听对象computedUpdaters属性中，函数外部会取到各自计算函数所依赖的关联关系表，比拟旧的关联关系表中，是否有value值产生了变动，如果有，则阐明须要从新计算，此时则调用原始的计算函数获取新的computed值，并设置新的依赖关联关系表。
// 设置包装函数
const updateValueAndRelatedPaths = () => {
// 取到旧的依赖关联关系
const oldPathValues = computedWatchInfo.computedRelatedPathValues[targetField]
// 默认不须要更新
let needUpdate = false
// 查找旧的依赖关系中，是否有值产生了变动
for (let i = 0; i < oldPathValues.length; i++) {
const { path, value: oldVal } = oldPathValues[i]
const curVal = dataPath.getDataOnPath(this.data, path)
// 新值与旧值不相等 阐明须要更新
if (!equal(oldVal, curVal)) {
needUpdate = true
break
}
}
// 不须要更新就暂停
if (!needUpdate) return false
// 这里阐明须要更新
// 新的依赖关联关系
const relatedPathValues = []
// 取到新值
const val = updateMethod(
// 传入代理对象
dataTracer.create(this.data, relatedPathValues),
)
// 更新computed key value
this.setData({
[targetField]: dataTracer.unwrap(val),
})
// 再次拿到新的依赖关联关系
const pathValues = relatedPathValues.map(({ path }) => ({
path,
// 区别就是从原始对象上拿到了value值
value: dataPath.getDataOnPath(this.data, path),
}))
// 再次保留新的依赖关联关系
computedWatchInfo.computedRelatedPathValues[targetField] = pathValues
return true
}
// 更新办法保留在这里
computedWatchInfo.computedUpdaters.push(
updateValueAndRelatedPaths,
)3.设置observers监听
（1）往observersItems数组中退出监听属性_computedWatchInit，别离在created和attached生命周期中触发上述第一步及第二步的执行。
attached(this: BehaviorExtend) {
this.setData({
_computedWatchInit: ComputedWatchInitStatus.ATTACHED,
})
}
created(this: BehaviorExtend) {
this.setData({
_computedWatchInit: ComputedWatchInitStatus.CREATED,
})
}
// 执行初始化
observersItems.push({
fields: '_computedWatchInit',
observer(this: BehaviorExtend) {
// 拿到以后的组件执行状态
const status = this.data._computedWatchInit
if (status === ComputedWatchInitStatus.CREATED) {
// 执行第一步
} else if (status === status === ComputedWatchInitStatus.ATTACHED) {
// 执行第二步
}
}
})（2）监听data中的所有属性，每当属性值变动时，找到对象的组件实例对应的监听对象，对监听对象的computedUpdaters数组（保留的包装后的计算函数）进行遍历执行。
// 监听所有属性
observersItems.push({
fields: '**',
observer(this: BehaviorExtend) {
if (!this._computedWatchInfo) return
// 取出以后组件的computed信息
const computedWatchInfo = this._computedWatchInfo[computedWatchDefId]
// 没有则返回
if (!computedWatchInfo) return
// 将所有须要更新的computed从新进行计算
let changed: boolean
do {
changed = computedWatchInfo.computedUpdaters.some((func) =>
func.call(this),
)
} while (changed)
}
})（3）将observersItems数组中保留的监听配置，放入到observers对象中去。
// 初始化observers
if (typeof defFields.observers !== 'object') {
defFields.observers = {}
}
// 包装监听函数
if (Array.isArray(defFields.observers)) {
defFields.observers.push(...observersItems)
} else {
// 这边做了兼容 如果曾经监听 就把两个监听函数合并起来
observersItems.forEach((item) => {
// defFields.observers[item.fields] = item.observer
const f = defFields.observers[item.fields]
if (!f) {
defFields.observers[item.fields] = item.observer
} else {
defFields.observers[item.fields] = function () {
item.observer.call(this)
f.call(this)
}
}
})
}Vue与小程序中的computed应用区别
- 1.Vue中computed计算函数中的this指向以后组件实例，而小程序为undefined，只能通过拜访传入的代理data对象，来进行值的运算。
- 2.Vue中的computed属性值只有在拜访时，才进行值运算，而小程序中的computed无论页面中是否应用，都会进行首次值的运算。
- 3.Vue中的computed属性值外部通过dirty值进行脏值测验，依赖属性发生变化后，会批改dirty值，当再次读取computed属性值时，因为dirty产生了变动，则会进行从新计算。而小程序中是通过监听所有的data属性值，当任意值发生变化后，遍历执行所有的包装计算方法，如果该办法所依赖的data属性值产生了变动，则从新计算，并通过setData进行赋值操作，触发页面更新。
发表回复