たぶんあなたと私は会ったことがないかもしれませんが、遅く会うことになる可能性が非常に高いです、私はフロントエンドのファットヘッドフィッシュです
序文
これまでの記事を通じて、Vue3 のレスポンシブ デザインについて予備的に理解しました。
- インタビュアー: Vue3 レスポンシブ システムを書くことさえできないのに、あえて熟練していると言えますか?
- インタビュアー: Vue の応答システムは単なるプロキシだと思いますか?
- Vue3: そんな「非同期更新」であることが判明
日常的に使われる計算されたプロパティ( )についてはcomputed
、その秘密や原理を知りたくなるはずですよね。さあ行こう!!!
計算されたものの特徴から始める
computed
最も素晴らしい機能は何ですか?
1. 依存関係の追跡
import { reactive, computed } from 'vue'
const state = reactive({
a: 1,
b: 2,
c: 3,
})
const sum = computed(() => {
return state.a + state.b
})
応答データstate
と計算プロパティを定義すると、 sum
Vue は自動的にsum
依存データを追跡し、対応する依存関係を確立します。state.a
state.b
つまり、合計が変化したstate.a
場合にのみ再計算され、どのように変化してもまったく影響を受けません。state.b
sum
state.c
sum
2. キャッシュ
上記の例でも、値が強制終了された後に変更されなくなった場合state.a
、state.b
値sum
を読み取ると、再計算する代わりに最後の計算の結果が返されます。
3. 遅延コンピューティング
この機能は比較的無視されやすく、簡単に言うと、計算されたプロパティが実際に使用される (読み取られる) ときにのみ計算され、それ以外の場合は単に変数を定義するだけです。
import { reactive, computed } from 'vue'
const state = reactive({
a: 1,
b: 2,
c: 3
})
const sum = computed(() => {
console.log('执行计算')
return state.a + state.b
})
setTimeout(() => {
// 没有读取sum.value之前,sum不会进行计算
console.log('1-sum', sum.value)
// 我们改变了a的值,但是sum并不会立刻进行计算
state.a = 4
setTimeout(() => {
// 而是要等到再次读取的时候才会触发重新计算
console.log('2-sum', sum.value)
}, 1000)
}, 1000)
計算された特徴を 1 つずつ実装する
1. 遅延コンピューティング
私たちは依然としてeffect
関数を中心に作業を行っており、これまでのところ、effect
登録されたコールバックはすぐに実行されます。
const state = reactive({
a: 1,
b: 2,
c: 3
})
// 有没有很像计算属性的感觉
const sum = effect(() => {
console.log('执行计算') // 立刻被打印
const value = state.a + state.b
return value
})
console.log(sum) // undefined
遅延実行を実装したい場合は、前の記事「Vue3:追加のパラメーターを追加するなどの "非同期更新" アイデアがあることが判明しました」computed
を参照してください。lazy
它要实现的功能是:如果传递了lazy
为true
,副作用函数将不会立即执行,而是将执行的时机交还给用户,由用户决定啥时候执行。
当然啦!回调的结果我们也应该一并返回(例如上面的value值)
你能想象,我们仅仅需要改造几行代码就能离computed
近了一大步。
const effect = function (fn, options = {}) {
const effectFn = () => {
// ... 省略
// 新增res存储fn执行的结果
const res = fn()
// ... 省略
// 新增返回结果
return res
}
// ... 省略
// 新增,只有lazy不为true时才会立即执行
if (!options.lazy) {
effectFn()
}
// 新增,返回副作用函数让用户执行
return effectFn
}
测试一波
const state = reactive({
a: 1,
b: 2,
c: 3,
});
// 有没有很像计算属性的感觉
const sum = effect(() => {
console.log("执行计算"); // 调用sum函数后被打印
const value = state.a + state.b;
return value;
}, {
lazy: true
});
// 不执行sum函数,effect注册的回调将不会执行
console.log(sum()); // 3
2. 依赖追踪
咱们初步实现了懒执行的特性,为了更像computed
一点,我们需要封装一个函数。
function computed (getter) {
const effectFn = effect(getter, {
lazy: true,
})
const obj = {
get value () {
return effectFn()
}
}
return obj
}
这就有点那么味道啦!
测试一波
可以看到computed
只会依赖state.a
和state.b
,而不会依赖state.c
,这得益于我们前面几篇文章实现的响应式系统,所以到了计算属性这里,我们不用改动任何代码,天然就支持。
不过还是有点小问题,我们读取了两次sum.value
,sum却被执行了两次,这和computed
缓存的特性就不符了。
别急,马上就要实现了这个最重要的特性了。
const state = reactive({
a: 1,
b: 2,
c: 3
})
const sum = computed(() => {
console.log('执行计算')
return state.a + state.b
})
console.log(sum.value)
console.log(sum.value)
3. 缓存
回顾一下computed
的缓存特性:
- 只有当其依赖的东西发生变化了才需要重新计算
- 否则就返回上一次执行的结果。
为了缓存上一次计算的结果,咱们需要定义一个value变量,现在的关键是怎么才能知道其依赖的数据发生变化了呢?
function computed (getter) {
const effectFn = effect(getter, {
lazy: true,
})
let value
let dirty = true
const obj = {
get value () {
// 2. 只有数据发生变化了才去重新计算
if (dirty) {
value = effectFn()
dirty = false
}
return value
}
}
return obj
}
测试一波
const state = reactive({
a: 1,
b: 2,
c: 3
})
const sum = computed(() => {
console.log('执行计算')
return state.a + state.b
})
console.log(sum.value) // 3
console.log(sum.value) // 3
state.a = 4
console.log(sum.value) // 3 答案是错误的
寄上任务调度
不得不说,任务调度实在太强大了,不仅仅可以实现数组的异步批量更新、在computed
和watch
中也是必不可少的。
function computed (getter) {
const effectFn = effect(getter, {
lazy: true,
// 数据发生变化后,不执行注册的回调,而是执行scheduler
scheduler () {
// 数据发生了变化后,则重新设置为dirty,那么下次就会重新计算
dirty = true
}
})
let value
let dirty = true
const obj = {
get value () {
// 2. 只有数据发生变化了才去重新计算
if (dirty) {
value = effectFn()
dirty = false
}
return value
}
}
return obj
}
测试一波
const state = reactive({
a: 1,
b: 2,
c: 3
})
const sum = computed(() => {
console.log('执行计算')
return state.a + state.b
})
console.log(sum.value) // 3
console.log(sum.value) // 3
state.a = 4
console.log(sum.value) // 3 答案是错误的
完美!!!这下面试官再也难不倒我了!!!
结尾
最近在阅读霍春阳大佬的 《Vue.js技术设计与实现》,本文的内容主要来源于这本书,强烈推荐对Vue底层实现感兴趣的同学阅读。