尤雨溪发布的Vue 3.2 有哪些新变化?

大家好,我是若川。今天分享一篇 Vue 3.2 版本的文章。

查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列


1前言

8.10号凌晨,尤雨溪在微博平台官宣 Vue 3.2 版本正式发布:

此版本包含一系列重要的新功能与性能改进,但并不涉及任何重大变更。本文主要介绍一些相对重要 Vue3.2新特性,如需了解更多请查阅官方文档!

2新的 SFC 功能

关于单文件组件(SFC,即.vue 文件)的两项功能已经由实验状态正式毕业,现提供稳定版本

  • <script setup> 是一种编译时语法糖,能够极大改善在 SFC 中使用 Composition API 时的开发者体验。

  • <style> v-bind 用于在 SFC <style> 标签中启用组件状态驱动的动态 CSS 值。

1、<script setup>

<script setup>中,我们不必声明export defaultsetup方法,这种写法会自动将所有顶级变量、函数,均会自动暴露给模板(template)使用。我们先来通过一个例子,对比script setup前后写法的不同,直观感受下setup带给我们的便利:

// script setup之前的写法
<template><div><div>浪里行舟</div><Card>{{ message }}</Card></div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import Card from "./components/Card.vue";export default defineComponent({components: {Card,},setup() {const message = ref("vue 3.2 新特性 script setup");return { message };},
});
</script>
// script setup的写法
<template><div><div>浪里行舟</div><Card>{{message}}</Card></div>
</template><script lang="ts" setup>
import { ref } from "vue";
import Card from "./components/Card.vue";
const message = ref("vue 3.2 新特性 script setup");
</script>

从上面的例子来看,<script setup>语法省去了组件Card的注册步骤,以及return变量message的语句,使得代码更为精简。关于<script setup>的使用还有些细节和注意事项,我将会在下一篇文章详细介绍。

2、<style> v-bind

挺有趣的一个新特性,通过这个指令,Vue SFC 的 CSS 灵活性将大大提高。该指令适用于<script setup>, 并支持 JavaScript 表达式(必须用引号括起来)。

<script setup>
import { ref } from "vue";
const color = ref("pink");
color.value = "green";
const fontSize = ref("18px");
</script>
<template><h2>浪里行舟</h2><h1>Hello Vue3.2</h1><h2>{{ color }}</h2><button @click="color = 'red'">color red</button><button @click="color = 'yellow'">color yellow</button><button @click="color = 'blue'">color blue</button><button @click="fontSize = '40px'">fontSize 40px</button>
</template>
<style scoped>
h1 {color: v-bind(color);
}
h2 {font-size: v-bind(fontSize);
}
</style>

点击按钮更改color 或者 fontSize的数值,可以看到页面样式也会响应式变化。其原理就是自定义属性将通过内联样式应用于组件的根元素,并在数值更改时进行响应更新。

3v-memo

3.2 版本为 Vue 的响应式系统带来了一系列重大性能改进,具体包括:

  • 更高效的 ref 实现(读取速度提高约 260%,写入速度提高约 50%)

  • 依赖项跟踪速度提高约 40%

  • 内存使用量减少约 17%

新版本还提供新的 v-memo 指令,可实现对部分模板树的记忆功能。当v-memo 命中时,不仅允许 Vue 跳过虚拟 DOM 差异、甚至可以完全跳过新 VNode 的创建步骤。虽然这个指令使用频率不高,但它提供了一个逃生舱来在某些情况下(例如处理大型 v-for 列表)获取最大性能。

<div v-for="user of users" :key="user.id" v-memo="[user.name]">{{ user.name }}
</div>

这个例子使用v-memo,不会重新创建虚拟元素,并且会重新使用前一个元素,除非v-memo(此处为用户名)的条件发生变化。这可能看起来是一个很小的改进,但如果您渲染大量元素,它实际上是性能的巨大改进。

其实v-memo可以接受一组条件,请看下面的例子:

<div v-for="user of users" :key="user.id" v-memo="[user.name, selectedUserId === user.id]"><p :class="{ red: selectedUserId === user.id }">{{ user.name }}</p>
</div>

此时如果user.nameselectedUserId发生变化,div则将更新。

4新 ref 语法糖(实验性)

$ref()避免在更新 ref 值时需要使用.value,可以让代码更加精简!请看下面例子:

<template><input type="number" v-model="count"> * 5€<h1>{{ total }}</h1>
</template><script setup>let count = $ref(0)let total = $computed(() => count * 5)
</script>

⚠️注意:这还是一个实验性特性,所以请谨慎使用,因为它将来可能会发生变化。该提案还引入了其他新的语法糖,包括$computed()$fromRefs()$raw()

5Expose API

Vue 3.2 添加了一个新的 Expose API 来定义组件公开的内容。Expose API 的设想是提供一个像 expose({ ...publicMembers }) 这样的组合式 API,这样组件的作者就可以在 setup() 中使用该 API 来精细设定公开暴露给其他组件的内容。

下例中,该组件只能公开其toggle函数,而不能公开其collapsed变量。

export default defineComponent({setup(props, { expose }) {const collapsed = ref(true)const toggle = () => {collapsed.value = !collapsed.value;}// only expose `toggle` to the parent componentexpose({ toggle })return { collapsed, toggle }}
})

请注意,所有$实例属性都会自动公开,因此使用Collapse的组件可以访问$props$slots以及其他。<script setup>通过调用defineExpose()函数使用时也可以这样做。

当你在封装组件时,如果嫌ref 中暴露的内容过多,不妨用 Expose API  来约束一下输出吧!

6Effect Scope API

Vue 3.2版本引入了新的 Effect scope API,用于创建一个effect Scope对象,该对象可以捕获在其中创建的反应性效果(例如computed 或 watchers),以便可以将这些效果放在一起并轻松处理它们。它可以更轻松地在组件上下文之外使用 Vue 的响应式 API,同时也在组件之内解锁了多种高级用例。Effect scope 是一种高级 API,主要供库作者使用。

我们知道watchwatchEffect,computed等都是绑定到一个特定的组件实例上的,在组件销毁的时候会被 Vue 自动销毁。这可确保应用程序没有内存泄漏。但是如果你想在组件之外使用这些函数,例如在你正在编写的库中,你需要手动处理它们,请看下例:

import { ref, computed, stop, watchEffect } from 'vue';const quantity = ref(0);
const price = ref(10);
const total = computed(() => quantity.value * price.value);
const stopWatch = watchEffect(() => console.log(`total changed to ${total.value}`));let effectsToStop = [];
effectsToStop.push(() => stop(total));
effectsToStop.push(stopWatch);
const stopAll = () => {effectsToStop.forEach(f => f())effectsToStop = []
};
// calling `stopAll()` disposes of all effects

7.prop 和 .attr 修饰符

  • .prop : 被用于强制绑定 DOM 属性 (property)

  • .attr : 被用于强制绑定 DOM 属性 (attribute)

v-bind 默认绑定到 DOM 节点的 attribute 上,使用.prop修饰符后,设置的自定义属性不会在渲染后的 HTML 标签里显示,而.attr修饰符则刚好相反!

.prop修饰符用途:

  • 通过自定义属性存储变量,避免暴露数据

  • 防止污染 HTML 结构

<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 渲染后HTML标签结构
<input id="input" type="foo" value="11"></input>

看了它的用途就知道,如果你不想你的属性显示在html标签里面,就用.prop修饰符吧!

另外这两个修饰符有简写的语法:

<a :title.prop="firstTabTooltip" :aria-selected.attr="isFirstTabSelected">First tab</a><!-- 简写 -->
<a .title="firstTabTooltip" ^aria-selected="isFirstTabSelected">First tab</a>

8Web 组件

Vue 3.2 引入了新的 defineCustomElement 方法,可以使用 Vue 组件 API 轻松创建原生自定义元素:

import { defineCustomElement } from 'vue'const MyVueElement = defineCustomElement({// 常规 Vue 组件选项
})// 注册自定义元素。
// 注册完成后,此页面上的所有 `<my-vue-element>` 标签
// 都将将升级。
customElements.define('my-vue-element', MyVueElement)

此 API 允许开发者们创建由 Vue 驱动的 UI 组件库。这些库可以支持任何框架选项,甚至能够在无框架情况下正常使用。

9总结

以上诸多特性,最让我感兴趣的是setup script,此语法使单个文件组件更简单!只需要给 script 标签添加一个 setup 属性,那么整个 script 就直接会变成setup函数,所有顶级变量、函数,均会自动暴露给模板使用(无需再一个个 return了),开发效率将大大的提高!

以至于连尤大也在微博上呼吁大家:“如果你能用Vue3却还在用 Options API,现在有了< script setup>没有理由不换 Composition API了”

10参考资料

  • Vue 3.2 Released!

  • Vue 3.2 Released!

  • What's new in Vue 3.2?

  • v-bind 指令常用修饰符

  • Vue3 官方文档

  • Vue 3.2正式发布,script setup + TS + Volar = 真香

最近组建了一个湖南人的前端交流群,如果你是湖南人可以加我微信 ruochuan12 私信 湖南 拉你进群。


推荐阅读

我在阿里招前端,该怎么帮你(可进面试群)
我读源码的经历

面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的
老姚浅谈:怎么学JavaScript?

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275560.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

https://zeplin.io/ 设计图标注及切图

2019独角兽企业重金招聘Python工程师标准>>> https://zeplin.io/ 转载于:https://my.oschina.net/soho00147/blog/3025646

更好的设计接口_设计可以而且必须做得更好

更好的设计接口We live in a world that becomes more dependent on technology every day. Tech gives us new ways to communicate, learn, work, and play, and recently it enabled us to reveal the appalling police brutality towards black people in the US by sharin…

linux隐写文件剥离,杂项的基本解题思路(1)——文件操作隐写、图片隐写

文件操作隐写图片隐写压缩文件处理流量取证技术文章本来是分成4部分的&#xff0c;但是前两部分何在一起写了也就没有分开&#xff0c;所以干脆就只分了两部分文件基本类型的识别一、kail 下file 文件名原理就是识别文件文件头比如这个软件&#xff1a;二、WinHex通过winhex分析…

账务管理系统

2011-04-11 21:55最近写了一个账务管理系统&#xff08;个人版&#xff09;使用C#语言编写&#xff0c;编译器VS2010&#xff0c;数据库Access2010&#xff0c;系统采用三层架构&#xff0c;界面可以换肤&#xff0c; 窗体按钮可以移动&#xff0c;可以自定义皮肤&#xff0c;保…

初学者也能看懂的 Vue3 源码中那些实用的基础工具函数

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获&#xff0c;感兴趣可以加我微信ruochuan12&#xff0c;拉你进群学习。写相对很难的源码&#xff0c;耗费了自己的时间和精力&#xff0c;也没收…

细说 Vue.js 3.2 关于响应式部分的优化

大家好&#xff0c;我是若川。上一篇写的是&#xff1a;初学者也能看懂的 Vue3 源码中那些实用的基础工具函数。今天再分享一篇 Vue 3.2 的文章。学习源码整体架构系列、年度总结、JS基础系列背景Vue 3 正式发布距今已经快一年了&#xff0c;相信很多小伙伴已经在生产环境用上了…

linux 运行apj,pxe+ris-linux实现在DELL R710上网络安装windows2003

一、前言网络远程安装windows2003&#xff0c;目前有两种方法&#xff1a;一就是通过windows自带的远程安装服务(RIS&#xff0c;Remote Installation Service)&#xff0c;但这种方法需要用windows做为源服务器&#xff0c;需要安装域控制器&#xff0c;dhcp&#xff0c;tftp等…

写给初中级前端的高级进阶指南

大家好&#xff0c;我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获&#xff0c;感兴趣可以加我微信ruochuan12&#xff0c;拉你进群学习。前言我曾经一度很迷茫&#xff0c;在学了 Vue、React 的实战开发和应用以后&…

linux系统远程教程,Linux下实现远程协助

一、检查系统是否安装有tcl和expect这2个软件包[rootlocalhost:~]$ rpm -qa | grep tcltcl-8.4.7-2tclx-8.3.5-4[rootlocalhost:~]$ rpm -qa | grep expectexpect-5.42.1-1二、检查是否有kibitz命令[rootlocalhost:~]$ whereis kibitzkibitz: /usr/bin/kibitz /usr/share/man/m…

图片相似度对比原理_设计原理:对比和相似性的应用

图片相似度对比原理You know why you are able to read this article right now apart from the availability of your eyes, internet, device, etc.? What is the font color of this text you’re reading? — Black. What is the background color of this page you’re …

学习尤雨溪写的 Vue3 源码中的简单工具函数

大家好&#xff0c;我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获&#xff0c;感兴趣可以加我微信ruochuan12&#xff0c;拉你进群学习。初学者也能看懂的 Vue3 源码中那些实用的基础工具函数本文是纪年小姐姐源码共读第…

Linux manjaro系统安装后无法连接wifi,解决方案

2019独角兽企业重金招聘Python工程师标准>>> 笔记本为联想 thinkpad E480 首先通过命令lspci -k看一下原因是否为缺少wifi驱动&#xff0c;如下&#xff0c;如果没有Kernel driver in use&#xff0c;说明缺少驱动。05:00.0 Network controller: Realtek Semiconduc…

检测输入路径是否存在错误_为什么存在用户输入错误

检测输入路径是否存在错误Errors are a fact of life when using almost any type of software. Forms are the worst though. Nothing is more frustrating than filling out a form and getting a robotic message from the computer telling you that you have failed, plea…

若川邀你进 源码共读 群~长期交流学习

大家好&#xff0c;我是若川。这是一个愉快的周六~估计还是有很多读者不知道我。若川名字由来是取自&#xff1a;上善若水&#xff0c;海纳百川。顺便放两篇文章。我读源码的经历&#xff0c;跟各位读者朋友分享下公众号运营策略加我微信进 源码共读 群最近组织了近200人每周源…

2005 打开 2010 项目经验总结

下面是网上的直接复制粘贴&#xff1a;网址为 http://hi.baidu.com/zealot886/blog/item/7364d4266a2a1555ac34dea6.html/cmtid/65ff140a660e02246159f3db 这里是我自己的总结 &#xff08; 1、用vs2010 将该解决方案的所有 项目都改为 net 2.0&#xff08;方法&#xff0c;右击…

读取linux的运行状态,Linux下安装使用sar工具来获取系统运行状态

sar 找出系统瓶颈的利器sar是System Activity Reporter(系统活动情况报告)的缩写。sar工具将对系统当前的状态进行取样&#xff0c;然后通过计算数据和比例来表达系统的当前运行状态。它的 特点是可以连续对系统取样&#xff0c;获得大量的取样数据&#xff1b;取样数据和分析的…

错过校招_我们在用户测试中容易错过的事情

错过校招What makes a tool well designed? As a designer, I’ve thought about this question for a long time, and over the past few years I’ve developed a system that I now use with every new project I approach, from small startups to large companies like L…

这些 JS 中强大的操作符,总有几个你没听说过

大家好&#xff0c;我是若川。今天推荐一篇相对简单些的文章。大家应该都知道了我最近组织了源码共读活动&#xff0c; 有小伙伴表示读源码上瘾&#xff0c;也很有收获。工作0-5年都可以参与。感兴趣可以加我微信 ruochuan12 私信 源码 进群。1. 数值分割符 _2. 逗号运算符 ,3.…

es6冲刺01

1、let/const 1)作用域&#xff1a;es5中有全局作用域、函数作用域。es6中新增了块级作用域 2&#xff09;let定义的变量在所在块级作用域外失效&#xff0c;严格模式下失效后直接报错&#xff0c; 且不允许重复声明同名变量 3)const用于声明常量&#xff0c;声明时必须赋值&am…

linux网卡固件名,修改CentOS7网卡名称为传统名称eth0格式

使用CentOS7以前系统的小伙伴装完CentOS7以后发现了一个问题&#xff0c;那就是网卡名改变为了“en016777736”&#xff0c;而不是以前的eth0的简易模式了&#xff0c;如图&#xff1a;以往的CentOS7以前的系统网卡命名虽然简单方便&#xff0c;但也会带来一些问题&#xff0c;…