Vue3设计思路 -- 响应式API

Vue3设计思路 – 响应式API

---

vue3 基于推出了一套基于ES6 Proxy代码的全新composition API，这套API相比与原来的option API更加的规范，但是也是做了一些兼容性的让步

compositionAPI优势主要体现在:

• proxy拥有着更好的性能，因为原来的响应式是通过Object.defineProperty来实现的，而这个操作是非常的消耗性能的

• 原来的optionAPI是将各个内容块进行分开，如data(){},method：{}生命周期等等，如果一个组件比较大的情况下，我们通常的逻辑是现在data定义数据，可能再去生命周期写事件，然后再去method里面写方法，就会面临反复横跳的问题，非常的不利于开发

• optionAPI因为将各个块都分开，可能在开发小项目的时候会非常爽，但是实际上有弊端，一方面是前面说的反复横跳不便于维护，另外一方面是对TS的支持太弱了，因为开发的时候非常的依赖this，而this是一个可变的东西，所以在typeScript上面就有着天然的劣势。

• composition API就是完全的函数式的编程方式，配合上reactive响应式，可以非常好的实现逻辑的复用，甚至是不同项目之间的复用。

const {createApp,reactive} = Vue

// useState 就可以写在其他的单文件里面 方便日后复用，这里写在一起主要是为了体现逻辑的抽离

function useState(){

// 状态和方法 等等都写在一起，告别了反复横跳

const state = reactive({

count:1

})

setInterval(() => {

state.count++

}, 1000);

return state

}

const app = createApp({

setup(){

const state = useState()

return {state}

console.log(‘hello world’)

}

})

app.mount(‘#app’)

• 因为vue3的响应式是基于Proxy的，所以为了这套更优雅的代码也不得不做出让步，没有办法兼容不支持Proxy的浏览器，如果浏览器不支持Proxy，就只能使用Vue2了

响应式实现的过程及原理

首先要明白的是能实现响应式其实靠的就是Proxy，其可以让我们知道何时触发了获取和修改事件。

几个关键的名词

• 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 下所有的 副作用函数都执行一遍

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
6ttH-1715674058952)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！