Vue3设计思路 -- 响应式API

• effect 副作用函数

• track 绑定值与副作用函数

• trigger指定值的所有副作用函数执行

逻辑链路

响应式本质上是有在内存中存一种数据结构，类似于{state:{title:[effect,effect]}},其实efftec就是一个个的可以触发页面更新的函数，只要当这里的title更新了，就去遍历title对应的副作用数组，分别去触发即可实现页面的响应式更新

依赖收集与触发

整体思路就是：第一次初始化的时候就会触发第一次的effect，effect触发页面第一次更新，因为是proxy数据第一次更新只要有拿响应式对象的值就会触发track（依赖收集），之后我们修改响应式对象的值又会触发Proxy的set，set再触发trigger更新页面页面数据

非常的绕，但是多看代码多理解几次就能理解了，要手写下来确实是需要有很深的功力，我是肯定写不下来的，只能跟着视频操作边理解变操作的写下来，确实对依赖收集的概念有了很深的理解

上代码 – 这里主要要从reactive函数开始看

function reactive(obj) {

const proxy = new Proxy(obj, {

get(target, key) {

/*

render函数第一次渲染的时候会获取引用的值 所以第一次渲染就会走到这个 get 方便我们开始做依赖收集

*/

track(target, key) // 触发依赖收集

return target[key]

},

set(target, key, value) {

target[key] = value

console.log(‘proxy’, key)

/*

修改的时候，去依赖收集的数据结构中 找到对应的key 把 key 对应的 更新函数都执行一遍，这就触发了页面的响应式

*/

trigger(target, key)

// app.update()

}

/*

proxy 的优势出了可以监听get 和 set之外 还是可以监听另外十多种情况，这个Object.defineProperty()做不到的

这个是语言层面上的升级

*/

})

return proxy

}

// 副作用函数 – 这里是为了暂时的存放每一个副作用函数，当副作用函数已经和依赖关系建立好了之后再清除空间

const effectStack = []

function effect(fn) {

const eff = function () {

try {

effectStack.push(eff)

fn() // 执行 最重要的 render函数 页面才更新

} finally {

effectStack.pop()

}

}

eff()

return eff

}

// 依赖收集函数

/*

依赖收集的数据结构是这样的

{

state:{

title:[effect,effect] // effect 对应的就是一个个的更新函数，每个响应式对象的值都是存着更新函数的数组，当这个值变化的时候遍历执行数组里面的一个个effect函数

}

}

*/

const trackMap = {}

function track(target, key) {

/*

effectStack 是临时存放副作用函数的地方，每次关系建立完成之后就会再清空掉，所以获取数组的最后一个元素即可

*/

const effect = effectStack[effectStack.length - 1]

if (effect) {

let map = trackMap[target]

if (!map) {

map = trackMap[target] = {}

}

let deps = map[key]

if (!deps) {

deps = map[key] = []

}

// 将副作用函数放入 deps

if (deps.indexOf(effect) === -1) {

deps.push(effect)

}

}

}

// 触发 指定的 target 下指定的key 下所有的 副作用函数都执行一遍

function trigger(target, key) {

// 数据结构类似 {state:{title:[effect,effect]}}

const map = trackMap[target]

if (map) {

const effects = map[key]

effects.forEach(effect => effect())

}

}

function createApp(config) {

let app = {}

app.mount = function (id) {

this.rootDOM = document.getElementById(id)

if (!config.render) {

config.render = this.compile(this.rootDOM.innerHTML)

}

if (config.setup) {

this.setupCtx = config.setup()

} else {

this.dataCtx = config.data()

}

this.proxy = new Proxy(this, {

get(target, key) {

if (key in target.setupCtx) {

return target.setupCtx[key]

} else {

return target.dataCtx[key]

}

},

set(target, key, value) {

if (key in target.setupCtx) {

target.setupCtx[key] = value

} else {

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！