10 个 Vue3 精华知识点,你知道几个?

1288次阅读  |  发布于3年以前

本文不适合 Vue 初学者,如果你是 Vue2 迁移者或者是准备面试的话,那么本文肯定很适合你,废话不多说

Vue2 和 Vue3 有什么区别

对 Vue3 的了解 / Vue3 是怎么得更快的?

说一下 Composition API

和 Options API 的区别?

Composition API 也叫组合式 API,它主要就是为了解决 Vue2 中 Options API 的问题。

一是在 Vue2 中只能固定用 datacomputedmethods 等选项组织代码,在组件越来越复杂的时候,一个功能相关的属性和方法就会在文件上中下到处都有,很分散,变越来越难维护

二是 Vue2 中虽然可以用 minxin 来做逻辑的提取复用,但是 minxin 里的属性和方法名会和组件内部的命名冲突,还有当引入多个 minxin 的时候,我们使用的属性或方法是来于哪个 minxin 也不清楚

Composition API 刚才就解决了这两个问题,可以让我们自由的组织代码,同一功能相关的全部放在一起,代码有更好的可读性更便于维护,单独提取出来也不会造成命名冲突,所以也有更好的可扩展性

说一下 setup

// 方法
setup(props, context){ return { name:'沐华' } }

// 语法糖
<script setup> ... </script>

setup() 方法是在 beforeCreate() 生命周期函数之前执行的函数;

它接收两个参数 propscontext。它里面不能使用 this,而是通过 context 对象来代替当前执行上下文绑定的对象,context 对象有四个属性:attrsslotsemitexpose

里面通过 refrective 代替以前的 data 语法,return 出去的内容,可以在模板直接使用,包括变量和方法

而使用 setup 语法糖时,不用写 export default {},子组件只需要 import 就直接使用,不需要像以前一样在 components 里注册,属性和方法也不用 return。

并且里面不需要用 async 就可以直接使用 await,因为这样默认会把组件的 setup 变为 async setup

用语法糖时,props、attrs、slots、emit、expose 的获取方式也不一样了

3.0~3.2版本变成了通过 import 引入的 API:definePropsdefineEmituseContext(在3.2版本已废弃),useContext 的属性 { emit, attrs, slots, expose }

3.2+版本不需要引入,而直接调用:definePropsdefineEmitsdefineExposeuseSlotsuseAttrs

Vue3.2 版本的变更

可以看我另一文章,就不搬过来了 最新的 Vue3.2 都更新了些什么了解一下

watch 和 watchEffect 的区别

watch 作用是对传入的某个或多个值的变化进行监听;触发时会返回新值和老值;也就是说第一次不会执行,只有变化时才会重新执行

const name = ref('沐华')
watch(name, (newValue, oldValue)=>{ ... }, {immediate:true, deep:true})

// 响应式对象
const boy = reactive({ age:18 })
watch(()=>boy.age, (newValue, oldValue)=>{ ... })

// 监听多个
watch( [name, ()=>boy.age], (newValue, oldValue)=>{ ... } )

watchEffect 是传入一个立即执行函数,所以默认第一次也会执行一次;不需要传入监听内容,会自动收集函数内的数据源作为依赖,在依赖变化的时候又会重新执行该函数,如果没有依赖就不会执行;而且不会返回变化前后的新值和老值

watchEffect(onInvalidate =>{ ... })

共同点是 watchwatchEffect 会共享以下四种行为:

Vue3 响应式原理和 Vue2 的区别

众所周知 Vue2 数据响应式是通过 Object.defineProperty() 劫持各个属性 getter 和 setter,在数据变化时发布消息给订阅者,触发相应的监听回调,而这之间存在几个问题

而在 Vue3 中为了解决这些问题,使用原生的 proxy 代替,支持监听对象和数组的变化,并且多达13种拦截方法,动态属性增删都可以拦截,新增数据结构全部支持,对象嵌套属性只代理第一层,运行时递归,用到才代理,也不需要维护特别多的依赖关系,性能取得很大进步

更多细节和源码剖析可以看我另一篇文章 Vue3.2 响应式原理源码剖析,及与 Vue2响应式的区别

defineProperty 和 Proxy 的区别

为什么要用 Proxy 代替 defineProperty ?好在哪里?

Vue3 的生命周期

基本上就是在 Vue2 生命周期钩子函数名基础上加了 on;beforeDestory 和 destoryed 更名为 onBeforeUnmount 和 onUnmounted;然后删了两个钩子函数 beforeCreate 和 created;新增了两个开发环境用于调试的钩子

未命名文件 (1).png

Vue3 的 8 种组件通信

可以看我另一文章,就不搬过来了 Vue3的8种和Vue2的12种组件通信,值得收藏

Vue3 Diff算法和 Vue2 的区别

我们知道在数据变更触发页面重新渲染,会生成虚拟 DOM 并进行 patch 过程,这一过程在 Vue3 中的优化有如下

编译阶段的优化:

由于编译阶段的优化,除了能更快的生成虚拟 DOM 以外,还使得 Diff 时可以跳过"永远不会变化的节点",Diff 优化如下

根据尤大公布的数据就是 Vue3 update 性能提升了 1.3~2 倍

源码剖析可以看我另一篇文章 深入浅出虚拟 DOM 和 Diff 算法,及 Vue2 与 Vue3 中的区别

结语

老铁,求点赞啊~~

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8