vue3.0正式版 从六大亮点逐一解析【持续更新】

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

本文为通过观看B站vue3.0正式版教程所做笔记，从六大亮点逐一展开介绍新特性与使用注意点等

vue3六大亮点

  • Perfomance性能提升（变快）

    • diff算法优化

    • hoistStatic静态提升

    • cacheHandlers事件侦听器缓存

    • ssr渲染

  • Tree shaking support按需编译(变小)

  • Composition API(重点)

    • setup函数

    • 监听数据变化(ref和reactive)

    • 函数式编程

    • 注意点

  • Better TypeScript support

  • Custom Renderer API暴露自定义渲染API

  • Fragment,Teleport(Protal),Suspense更先进的组件

Perfomance性能提升（变快）

diff算法优化

新增标记：PatchFlag

  • 在vue2中，patchNode过程是十分缓慢的，因为当数据改变后就要对所有的节点进行patch和diff操作

  • 在vue3中就弥补了这种不足，给动态节点，比如{{msg}}等打上标记，这样做就会在比较过程中忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效，使得性能和速度有了极大的提升，特别是针对大组件的时候

    从图中可以看出不同

hoistStatic静态提升

对于不参与更新的元素，静态提升，指挥创建一次，渲染时直接从缓存中读取直接复用，节省开销


可以看出，非动态节点的元素都被静态提升了

cacheHandlers事件侦听器缓存

同一个函数没必要追踪变化，可以缓存复用，比如给元素绑定点击事件，这个点击事件是不变的没必要追踪变化，我们就可以缓存起来，避免重复创建

ssr渲染

  • 静态内容大到一定量级会使用_createStaticVNode方法在客户端生成一个静态节点，不需要创建对象，根据对象渲染

  • 有大量静态内容时，内容会当纯字符串推进一个buffer，比虚拟dom渲染快得多

Tree shaking support按需编译(变小)

将无用模块剪辑，只打包需要的，比如<transition>等用不到就不会打包，这样做减少了对不必要的模块的打包，减少了打包后的体积

Composition API(重点)

setup函数

是composition API的入口函数

  1. setup执行时机
    beforeCreate：组件刚被创建，data和methods还没初始化
    setup函数：在beforeCreate和created之间
    created：组件刚被创建，data和methods已经初始化好

  2. setup注意点
    (1)由于在执行setup函数时还没执行created生命周期方法，所以setup函数中无法使用data和methods
    (2)由于不能在setup函数中使用data和methods，所以vue为避免错误使用，所以直接setup函数中的this修改为了undefined
    (3)setup函数只能是同步的不能是异步的,后面会说到如何在setup函数中使用异步方法

监听数据变化(ref和reactive)

  1. ref

只能监听简单类型的变化的响应式数据的方法

  • 如果reactive必须传递一个对象，导致企业开发中，如果只想让一个变量实现响应式会非常麻烦，所以提供ref方法，实现对简单值的监听

  • ref的本质：底层本质还是reactive，系统会根据传入ref的值转换成reactive

  • 注意点：
    (1)在vue中(template中)使用ref值不用通过value获取
    (2) 在js中(script中)ref值必须通过value获取

  1. reactive

监听数组和对象，提供实现响应式数据的方法

  • reactive的本质：vue2响应式用的是defineProperty，vue3则是使用ES6的Proxy

  • 注意点
    (1) reactive参数必须是对象(json和arr)
    (2) 如果给reactive传递其它对象，默认情况修改修改对象，界面不会自动更新，若想更新可通过重新赋值的方式

  1. ref和reactive的区别

如果在template里使用ref类型数据，vue会自动加.value，如果使用的是reactive类型数据，vue不会自动添加.value

  • vue如何决定是否需要添加.value
    在解析数据之前，会自动判断数据是否是ref类型，是则自动添加.value，不是就不添加

  • vue如何判断当前数据是否为ref类型
    (1)vue内部通过当前数据的私有属性__v_ref来判断，有这个属性且取值为true则为ref类型的数据
    (2)手动判断是否为ref属性可调用isRef和isReactive方法进行判断，返回boolean类型数据

  1. toRaw

从reactive或者ref中得到原始数据

  • 做一些不想被监听的事情，提升性能
    由于ref和reactive数据每次修改都会被追踪，都会触发界面更新，非常消耗性能，所以当我们做一些不想被监听的事情的时候可以用toRaw获取原始数据类型并进行操作，就不会被追踪了

  • 注意点
    从reactive中获取原始数据类型直接用toRaw即可，从ref中需要加.value，因为经过vue处理之后，.value中保存的才是当初创建的数据

  1. markRaw

可设置数据永远不被追踪

  1. toRef

用ref将某一个对象中的属性变成响应式的数据，修改响应式的数据是不会影响到原始数据的

  • 如果利用toRef将某一个对象中的属性编程响应式的数据是影响到原始数据的，但如果响应式的数据是通过toRef创建的，那么修改了数据并不会触发界面的更新

  • 应用场景
    如果想让响应式数据和以前的数据关联起来，并更新响应式数据之后还不想更新界面，就可使用

  1. ref和toRef的区别

  • 对数据的影响
    ** ref是复制原始数据，修改响应式数据不影响原始数据
    ** toRef是引用原始数据，修改响应式数据会影响以前的数据

  • 界面更新
    ** ref数据发生改变，界面发生自动更新
    ** toRef数据发生改变，界面不发生自动更新

  1. toRefs

有多个属性要改变成响应式数据的时候可以使用，相当于执行了多次toRef

  1. customRef

自定义一个ref，返回一个ref对象，可以显式地控制依赖追踪和触发响应

  • return 一个get和set，在get中使用track()可以告诉vue这个数据是需要追踪变化的，在set中使用trigger告诉vue触发界面更新

  • 由于setup函数不能异步，可以使用回调函数，若想要以同步的形式展示可以用customRef

  • 注意
    ** 不能在get方法中发送网络请求，在return前先发送网络请求
    ** 渲染界面->调用get->发送网络请求
    ** 保存数据->更新界面->调用get

  1. vue3使用ref获取元素

  • vue2中通过给元素添加ref=‘xxx’，再通过$refs.xxx获取元素

  • vue3中没有$这种符号，给元素添加ref='xxx’后，再setup中，定义let box=ref(null)，添加生命周期，在onMounted获取元素（需要import）

  1. 递归监听

默认情况下，无论是ref还是reactive都是递归监听

  • 递归监听存在的问题：如果数据量比较大，会非常消耗性能，因为递归之后把每一层都包装成Proxy对象

  • 非递归监听
    (1) reactive改为shallowReactive

    只监听第一层的变化，只有第一层数据改变时才会触发界面更新

    (2) ref改为shallowRef

    监听的并不是第一层的变化，而是.value的变化
    shallowRef的本质：是一个shallowReactive，所以如果是通过shallowRef创建的数据，它监听的是.value的变化，因为底层本质上value才是第一层

    (3) triggerRef

    可以根据传入的数据主动更新页面，只有triggerRef没有triggerReactive，意味着reactive数据类型是无法主动触发数据更新的

  • 应用场景
    一般情况下使用ref和reactive即可，只有在需要监听的数据量比较大的时候，才使用shallowRef和shallowReactvie

函数式编程

函数式编程，把一整个业务模块放在一个函数中（写在export default外部），再在setup中调用并暴露出去

函数式编程还可以把业务模块单独拉到一个js模块中管理，即新建一个js文件，再在.vue文件中import引入

注意点

  • 变量和方法直接定义即可

  • 在组合API定义的变量和方法，要在外界使用，必须通过return暴露出去

  • Composition api和option api可以混合使用

Better TypeScript support

Custom Renderer API暴露自定义渲染API

Fragment,Teleport(Protal),Suspense更先进的组件

以上是 vue3.0正式版 从六大亮点逐一解析【持续更新】 的全部内容， 来源链接： utcz.com/z/378041.html

回到顶部