vue3新特性理论——纸上谈兵

几天前you大大发布消息说vue3已经处在cr阶段了，也就是说，新加的功能已经确定，接下来就是查改bug了。

前不久公司人员分享了一些关于vue3相关的知识，刚好我也对vue3很感兴趣并且之前就进行了了解，所以在这里记录一下。

这篇文章主要以理论为主，代码实践请移步：vue3新特性实践——南征北战

首先来说说you大大最为自豪的改进：Composition API

you大大说以前在2点几的版本中我们使用mixin来混入公用方法或者其它内容，这样做混入的对象来源不明，相同功能代码陈列杂乱，修改起来上翻下翻，对开发者造成困扰。

而使用Composition API，来源明确、相同功能的代码块在一起，修改的时候只需要专注一个地方，更易于维护。

以前我们在代码里都是使用this来访问属性，比如this.foo() this.obj this.$watch，这样vue对外暴露的东西太多，引入第三方组件安全问题无法保障，造成困扰。vue3之后我们将不再使用this，api以模块的方式引入，函数的方式使用。

接下来我们一起来看一下Composition API的实现，我们把源码fork下来，发现vue3的代码结构变了好多有木有！它的文件入口呢？它的核心代码呢？

原来全都在packages里面了，一个代码部分在一个文件夹里面。公共部分在compiler-core、ssr编译相关在compiler-ssr、与dom编译相关的在compiler-dom…

我们先去找ref这个API，顺藤摸瓜，在reactivity文件夹下的ref.ts里。不要被一堆的重载函数迷惑眼睛，我们直接看实现它的函数：

function createRef(rawValue: unknown, shallow = false) {if (isRef(rawValue)) {return rawValue}let value = shallow ? rawValue : convert(rawValue)const r = {__v_isRef: true,get value() {track(r, TrackOpTypes.GET, 'value')return value},set value(newVal) {if (hasChanged(toRaw(newVal), rawValue)) {rawValue = newValvalue = shallow ? newVal : convert(newVal)trigger(r,TriggerOpTypes.SET,'value',__DEV__ ? { newValue: newVal } : void 0)}}}return r
}

createRef返回一个__v_isRef属性为true并进行get、set操作的对象，分别调了track trigger方法。
track方法收集依赖，

export function track(target: object, type: TrackOpTypes, key: unknown) {if (!shouldTrack || activeEffect === undefined) {return}let depsMap = targetMap.get(target)if (!depsMap) {targetMap.set(target, (depsMap = new Map()))}let dep = depsMap.get(key)if (!dep) {depsMap.set(key, (dep = new Set()))}if (!dep.has(activeEffect)) {dep.add(activeEffect)activeEffect.deps.push(dep)if (__DEV__ && activeEffect.options.onTrack) {activeEffect.options.onTrack({effect: activeEffect,target,type,key})}}
}

trigger方法根据映射关系执行对应cb。

然后我们来看toRefs，toRefs循环每个对象属性，Proxy会对每个属性读写操作拦截。

export function toRefs<T extends object>(object: T): ToRefs<T> {if (__DEV__ && !isProxy(object)) {console.warn(`toRefs() expects a reactive object but received a plain one.`)}const ret: any = {}for (const key in object) {ret[key] = toRef(object, key)}return ret
}export function toRef<T extends object, K extends keyof T>(object: T,key: K
): Ref<T[K]> {return {__v_isRef: true,get value(): any {return object[key]},set value(newVal) {object[key] = newVal}} as any
}

因为vue3使用Proxy拦截对象，所以不需要像以前那样使用Object.definepropty挨个定义对象了，Object.definepropty去定义的缺点就是每次创建组件实例的时候开销比较大。

Fragment
以前我们在template中根节点只能有一个元素标签，vue3以后将支持多个同级标签共存。

<tempalate><div>haha</div><div>hehe</div>
</tempalte>

组件递归操作相比之前会减少很多无用代码，这样一来，我们做一些无尽列表就可以优化很多。

内部做的性能优化

Tree shaking 没有用的代码不打包
内部模块可以直接拿出来单独引用（按需引入）
之前vdom是不管动态静态节点全部一股脑diff。vue3做了静态分析。
Ssr编译策略改变，能静态化的就静态字符串化（静态代码部分直接字符串拼接）重写了渲染器
之前使用this访问属性，而暴露在this上的属性是用object.definepropty去定义，所以每次创建组建实例的时候开销比较大。vie3直接用proxy拦截。
渲染的时候最大化利用node异步状态。精准处理了服务器异步并发问题。
动静比越大优势越大

在vue3中，我们可能不能像往常一样写ts装饰器，ts 装饰器对vue3代码可能会有影响。

vue3新特性理论——纸上谈兵相关推荐

卷死了！再不学vue3就没有人要你了！速来围观vue3新特性
一文全面了解vue3新特性一.
vue-cli创建vue2或vue3新项目步骤【留底收藏】
vue-cli创建vue2或vue3新项目步骤一.安装 1. 安装:node (已安装忽略,命令行:node -v 检查是否成功) 方式一: 官网 https://nodejs.org/en/ 一直 ...
Vue基础+Vue3新特性
目录模板语法文本原始HTML 属性Attribute 使用 JavaScript 表达式条件渲染 v-if v-else v-show v-if vs v-show 的区别列表渲染事件处理 ...
vue3新开窗口并传参
vue3新开窗口并传参,怎么搞呢?这里有个例子: 1.组件1 点击"浏览",打开一个新页面(组件2). <template><div class="br ...
Vue3新属性 — css中使用v-bind（v-bind in css）
Vue3新属性:CSS 中的 v-bind() 写在前面: 本文主要介绍Vue3中的新增的v-bind()的常用使用方式,主要包括在css,less,scss中的使用,可以参考官方文档查看:Vue3官 ...
vue3新拟态组件库开发流程——button组件源码
首先写最基础的button组件 <script setup> const props = defineProps({}) const emit = defineEmits(["c ...
Vue3新特性和使用方法系统总结
目录 1.vue3带来的新变化(加+) 2.移除vue2中的某些语法(减-) 3.目录变化 4.组合式API和选项式API的区别 5.组合API-setup函数 6 . 组合API-生命周期 7.组合 ...
Vue3 新特性内置组件＜Teleport＞
任意传送门--Teleport Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新: Vue3 还新增了一个内置组件:Teleport.这个组件 ...
开发效率提升300％，Vue3新特性已成气候！
在 Vue2.0 时代,国内大厂的前端开发框架,几乎清一色偏向 React.因为对于业务成熟的公司而言,一个项目,可能会包含很多非侵入式的代码和服务,并不是功能实现了就万事大吉. 但随着 Vue3.0 ...

vue3新特性理论——纸上谈兵

内部做的性能优化

vue3新特性理论——纸上谈兵相关推荐

最新文章

热门文章