关于前端:10个-Vue3-精华知识点你知道几个

本文不适宜 Vue 初学者，如果你是 Vue2 迁徙者或者是筹备面试的话，那么本文必定很适宜你，废话不多说

Vue2 和 Vue3 有什么区别

对 Vue3 的理解 / Vue3 是怎么得更快的？

• 新增了三个组件：Fragment 反对多个根节点、Suspense 能够在组件渲染之前的等待时间显示指定内容、Teleport 能够让子组件可能在视觉上跳出父组件(如父组件 overflow:hidden)
• 新增指令 v-memo，能够缓存 html 模板，比方 v-for 列表不会变动的就缓存，简略说就是用内存换工夫
• 反对 Tree-Shaking，会在打包时去除一些无用代码，没有用到的模块，使得代码打包体积更小
• 新增 Composition API 能够更好的逻辑复用和代码组织，同一性能的代码不至于像以前一样太扩散，尽管 Vue2 中能够用 minxin 来实现复用代码，但也存在问题，比方办法或属性名会抵触，代码起源也不分明等
• 用 Proxy 代替 Object.defineProperty 重构了响应式零碎，能够监听到数组下标变动，及对象新增属性，因为监听的不是对象属性，而是对象自身，还可拦挡 apply、has 等 13 种办法
• 重构了虚构 DOM，在编译时会将事件缓存、将 slot 编译为 lazy 函数、保留动态节点间接复用(动态晋升)、以及增加动态标记、Diff 算法应用 最长递增子序列 优化了比照流程，使得虚构 DOM 生成速度晋升 200%
• 反对在 <style></style> 里应用 v-bind，给 CSS 绑定 JS 变量(color: v-bind(str))
• 删除了两个生命周期 beforeCreate、created，间接用 setup 代替了
• 新增了 开发环境 的两个钩子函数，在组件更新时 onRenderTracked 会跟踪组件里所有变量和办法的变动、每次触发渲染时 onRenderTriggered 会返回发生变化的新旧值，能够让咱们进行有针对性调试
• 毕竟 Vue3 是用 TS 写的，所以对 TS 的反对度更好
• Vue3 不兼容 IE11

说一下 Composition API

和 Options API 的区别？

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

一是在 Vue2 中只能固定用 data、computed、methods 等选项组织代码，在组件越来越简单的时候，一个性能相干的属性和办法就会在文件上中下到处都有，很扩散，变越来越难保护

二是 Vue2 中尽管能够用 minxin 来做逻辑的提取复用，然而 minxin 里的属性和办法名会和组件外部的命名抵触，还有当引入多个 minxin 的时候，咱们应用的属性或办法是来于哪个 minxin 也不分明

而 Composition API 方才就解决了这两个问题，能够让咱们自在的组织代码，同一性能相干的全副放在一起，代码有更好的可读性更便于保护，独自提取进去也不会造成命名抵触，所以也有更好的可扩展性

说一下 setup

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

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

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

<img height=”150px” src=”https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f6372e90f1f41e3b95b9a69da505470~tplv-k3u1fbpfcp-watermark.image” />

它接管两个参数 props 和 context。它外面不能应用 this，而是通过 context 对象来代替以后执行上下文绑定的对象，context 对象有四个属性：attrs、slots、emit、expose

外面通过 ref 和 rective 代替以前的 data 语法，return 进来的内容，能够在模板间接应用，包含变量和办法

而应用 setup 语法糖时，不必写 export default {}，子组件只须要 import 就间接应用，不须要像以前一样在 components 里注册，属性和办法也不必 return。

并且外面不须要用 async 就能够间接应用 await，因为这样默认会把组件的 setup 变为 async setup

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

3.0~3.2 版本变成了通过 import 引入的 API：defineProps、defineEmit、useContext(在 3.2 版本已废除)，useContext 的属性 {emit, attrs, slots, expose}

3.2+ 版本不须要引入，而间接调用：defineProps、defineEmits、defineExpose、useSlots、useAttrs

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 =>{ ...})

共同点是 watch 和 watchEffect 会共享以下四种行为：

• 进行监听：组件卸载时都会主动进行监听
• 革除副作用：onInvalidate 会作为回调的第三个参数传入
• 副作用刷新机会：响应式零碎会缓存副作用函数，并异步刷新，防止同一个 tick 中多个状态扭转导致的反复调用
• 监听器调试：开发模式下能够用 onTrack 和 onTrigger 进行调试

Vue3 响应式原理和 Vue2 的区别

家喻户晓 Vue2 数据响应式是通过 Object.defineProperty() 劫持各个属性 getter 和 setter，在数据变动时公布音讯给订阅者，触发相应的监听回调，而这之间存在几个问题

• 初始化时须要遍历对象所有 key，如果对象档次较深，性能不好
• 告诉更新过程须要保护大量 dep 实例和 watcher 实例，额定占用内存较多
• Object.defineProperty 无奈监听到数组元素的变动，只能通过劫持重写数办法
• 动静新增，删除对象属性无奈拦挡，只能用特定 set/delete API 代替
• 不反对 Map、Set 等数据结构

而在 Vue3 中为了解决这些问题，应用原生的 proxy 代替，反对监听对象和数组的变动，并且多达 13 种拦挡办法，动静属性增删都能够拦挡，新增数据结构全副反对，对象嵌套属性只代理第一层，运行时递归，用到才代理，也不须要保护特地多的依赖关系，性能获得很大提高

更多细节和源码分析能够看我另一篇文章 Vue3.2 响应式原理源码分析，及与 Vue2 响应式的区别

defineProperty 和 Proxy 的区别

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

• Object.defineProperty 是 Es5 的办法，Proxy 是 Es6 的办法
• defineProperty 不能监听到数组下标变动和对象新增属性，Proxy 能够
• defineProperty 是劫持对象属性，Proxy 是代理整个对象
• defineProperty 局限性大，只能针对单属性监听，所以在一开始就要全副递归监听。Proxy 对象嵌套属性运行时递归，用到才代理，也不须要保护特地多的依赖关系，性能晋升很大，且首次渲染更快
• defineProperty 会净化原对象，批改时是批改原对象，Proxy 是对原对象进行代理并会返回一个新的代理对象，批改的是代理对象
• defineProperty 不兼容 IE8，Proxy 不兼容 IE11

Vue3 的生命周期

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

Vue3 的 8 种组件通信

能够看我另一文章，就不搬过去了 Vue3 的 8 种和 Vue2 的 12 种组件通信，值得珍藏

Vue3 Diff 算法和 Vue2 的区别

咱们晓得在数据变更触发页面从新渲染，会生成虚构 DOM 并进行 patch 过程，这一过程在 Vue3 中的优化有如下

编译阶段的优化：

• 事件缓存：将事件缓存(如: @click)，能够了解为变成动态的了
• 动态晋升：第一次创立动态节点时保留，后续间接复用
• 增加动态标记：给节点增加动态标记，以优化 Diff 过程

因为编译阶段的优化，除了能更快的生成虚构 DOM 以外，还使得 Diff 时能够跳过 ” 永远不会变动的节点 ”，Diff 优化如下

• Vue2 是全量 Diff，Vue3 是动态标记 + 非全量 Diff
• 应用最长递增子序列优化了比照流程

依据尤大颁布的数据就是 Vue3 update 性能晋升了 1.3~2 倍

源码分析能够看我另一篇文章 深入浅出虚构 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别

往期精彩

• 12 个 Vue 开发中的性能优化小技巧
• 一次弄懂 Vue2 和 Vue3 的 nextTick 实现原理
• Vue3.2 响应式原理源码分析，及与 Vue2 .x 响应式的区别
• 深入浅出 Vue2 响应式原理源码分析
• 深入浅出虚构 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
• Vue3 的 8 种和 Vue2 的 12 种组件通信，值得珍藏
• JavaScript 进阶知识点
• 20 分钟助你拿下 HTTP 和 HTTPS，坚固你的 HTTP 常识体系

结语

老铁，求点赞啊~~