扣丁书屋

[技术前沿] 最新的 Vue3.2 都更新了些什么了解一下

8月10号尤大宣布 Vue3.2发布,尤大发布的英文版说明原文点这里,github点这里

根据原文内容的更新的内容主要有以下 5 块:

  • SSR:服务端渲染优化。@vue/server-renderer包加了一个ES模块创建,与Node.js解耦,使在非Node环境用@vue/serve-render做服务端渲染成为可能,比如(Workers、Service Workers)
  • New SFC Features:新的单文件组件特性
  • Web Components:自定义 web 组件。这个我们平时很少用到,但是应该知道
  • Effect Scope API:effect 作用域,用来直接控制响应式副作用的释放时间(computed 和 watchers)。这是底层库的更新,开发不用关心,但是应该知道
  • Performance Improvements:性能提升。这是内部的提升,跟开发无关

emmmm.... 原文基本就是这样,说的不清不楚的,这一块放到后面吧

先介绍一下开发相关的变更

新特性和 API

新的 SFC 单文件组件特性

可以在 style 标签里使用 v-bind,如下

<template>
   <div>{{ color }}</div>
   <button @click="color = color === 'red' ? 'green' : 'red'">按钮</button>
</template>
<script setup>
   import { ref } from "vue"
   const color = ref("ref")
</script>
<style scoped>
   div{
       color: v-bind(color)
  }
</style>

废弃 useContext

原来的 useContext 是这样的,现在下面这个都不能用了

import { useContext } from "vue"
const { expose, slots, emit, attrs } = useContext()

由于 exposeslotsemitattrs 都不能通过 useContext 获取了,随之而来的是下面几个新的代替方式

新增 useAttrs、useSlots

不能通过 useContext 获取了,就像下面这样获取

import { useAttrs, useSlots } from "vue"
const attrs = useAttrs()
const slots = useSlots()

新增 defineExpose

不需要通过 import 导入,向下面这样直接使用,功能一样,对外暴露属性和方法

defineExpose({
   name:"沐华"
   someMethod(){
       console.log("这是子组件的方法")
  }
})

defineEmit 改名

原来是可以向上面那样通过 useContext() 获取或者向下面这样导入的

import { defineEmit } from "vue"

改名后,加了一个 s ,并且不需要通过 import 导入,像下面这样直接使用

// import { defineEmit } from "vue"
defineEmits(["getName","myClick"])

defineProps 变更

本来是需要通过 import 导入的,变更后不需要导入,直接像下面这样使用

defineProps(["name"])
//或者
defineProps({
   name: String
})
//或者
defineProps({
   name: {
       type: String,
       default: "",
       ...
  }
})
//或者
const props = defineProps({
   ... // 和上面一样
})
console.log(props.name)

顶级 await

不需要再用 async 就可以直接使用 await,这样默认会把组件的 setup 变为 async setup,像下面这样

<script setup lang="ts">
   const post = await fetch(`/api/post/xxx`).then(res => res.json())
</script>

最终会转换成下面这样

<script lang="ts">
   import { defineComponent, withAsyncContext } from "vue"
   export default defineComponent({
       async setup(){
           const post = await withAsyncContext(
               fetch(`/api/post/xxx`).then(res => res.json())
          )
           return {
               post
          }
      }
  })
</script>

新增 withDefaults

TS 中,像下面这样定义 props 是不能设置默认值的

interface Props{
   name: string,
   age: number
}
defineProps<Props>()

加入 withDefaults 之后就可以指定默认值,像下面这样

import { withDefaults } from
interface Props{
   name: string,
   age: number
}
const props = withDefaults(defineProps<Props>(), {
   name: "沐华"
   age: 3
})

自定义 web 组件

通过 defineCustomElement 方法创建原生自定义组件。也可以通过这种方式发布组件出去给别人使用

// main.js
import { defineCustomElement } from "vue"

const MyVueElement = defineCustomElement({
   // 通用 vue 组件选项
   props:["foo"],
   render(){
       return h("div", "my-vue-element:" + this.foo)
  },
   // 仅适用于 defineCustomElement, css将被注入到 shadow root
   style: [`div { border: 1px solid red }`]
})

customElements.define("my-vue-element", MyVueElement)

然后在 vite.config.js 里配置白名单

export default defineConfig({
   plugins: [
       vue({
           template: {
               compilerOptions: {
                   // vue 将跳过 my-vue-element 解析
                   isCustomElement: (tag) => tag === "my-vue-element"
              }
          }
      })
  ]
})

然后使用

<my-vue-element foo="foo" />

新增指令 v-memo

官方说的是我们写程序很少有场景能用到。官方文档点这里

它可以缓存模板中的一部分,从而提升速度。比如说大量 v-for 的列表,只创建一次,就不会再更新了,直接用缓存,就是用内存换时间

下面这样组件重新渲染时,如果 valueA 和 valueB 没有变化,div 将跳过此组件和其子组件的所有更新

<div v-memo="[valueA, valueB]">
   ...
</div>

还有像下面这样,部分缓存。需要注意的是在 v-memo 里面不能用 v-for

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
   ...
</div>

性能提升

响应式的优化

  • 更高效的 ref 实现,读取提升约 260%,写入提升约 50%
  • 依赖收集速度提升约 40%
  • 减少内存消耗约 17%

模板编译器优化

  • 创建元素 VNodes 速度提升约 200%

看这数据是真的吊

结语

点赞支持,手留余香,与有荣焉

你的一赞一评,都是我前行的最大动力

参考

https://blog.vuejs.org/posts/vue-3.2.html

https://github.com/vuejs/rfcs/pull/227


https://mp.weixin.qq.com/s/Ft--VRhL9Bf5AUgCYKKUXA

Vue 新玩具 VueUse

发布于:10月以前  |  539次阅读  |  详细内容 »

从 Vuex 出发,全方位解读状态管理全貌

发布于:10月以前  |  481次阅读  |  详细内容 »

60个Vue常见问题汇总及解决方案

发布于:10月以前  |  481次阅读  |  详细内容 »

9个值得推荐的 VUE3 UI 框架

发布于:10月以前  |  715次阅读  |  详细内容 »

史上最全 Vue 前端代码风格指南

发布于:10月以前  |  459次阅读  |  详细内容 »

Vue3的7种和Vue2的12种组件通信

发布于:10月以前  |  546次阅读  |  详细内容 »

深入浅出 Vue 中的模板编译

发布于:10月以前  |  466次阅读  |  详细内容 »

深入浅出 Vue 响应式原理源码剖析

发布于:10月以前  |  424次阅读  |  详细内容 »

Vue 的完整生命周期源码流程详解

发布于:10月以前  |  441次阅读  |  详细内容 »

12 个 Vue 开发中的性能优化小技巧

发布于:10月以前  |  467次阅读  |  详细内容 »

一次弄懂 Vue2 和 Vue3 的 nextTick 实现原理

发布于:10月以前  |  572次阅读  |  详细内容 »

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

发布于:10月以前  |  452次阅读  |  详细内容 »

聊聊vue中的keep-alive

发布于:10月以前  |  560次阅读  |  详细内容 »

万万没想到,Vue3 的 setup 还能这么玩

发布于:10月以前  |  482次阅读  |  详细内容 »

20 个顶级的 Vue 组件库

发布于:10月以前  |  702次阅读  |  详细内容 »

【Vuejs】1148- 关于Vue3实践的一些问题清单

发布于:10月以前  |  564次阅读  |  详细内容 »

基于 Vue3 和 TypeScript 项目大量实践后的思考

发布于:10月以前  |  569次阅读  |  详细内容 »

所属标签

最多阅读

html <table>表数据转 Json 格式 3年以前  |  2918次阅读
element中input的change事件 2年以前  |  2625次阅读
使用 Vue 3.0,你可能不再需要Vuex了 2年以前  |  1882次阅读
VS Code 配置与插件推荐 2019 年版 2年以前  |  1816次阅读
Vue表单支持回车键自动提交 2年以前  |  1627次阅读
koa2入门使用总结 2年以前  |  1621次阅读
Vue如何实现疫情地图展示 2年以前  |  1617次阅读
2020 Vue经典面试题 2年以前  |  1610次阅读

手机扫码阅读