网站登录界面html,国际物流公司网站,长安网站建设免费咨询,进销存软件排行榜前十名大家好#xff0c;我是若川。今天分享一篇 Vue 3.2 版本的文章。查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列1前言8.10号凌晨#xff0c;尤雨溪在微博平台官宣 Vue 3.2 版本正式发布#xff1a;此版本包含一系列重要的新功能与性能改进#xff0c;但并… 大家好我是若川。今天分享一篇 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 default和setup方法这种写法会自动将所有顶级变量、函数均会自动暴露给模板template使用。我们先来通过一个例子对比script setup前后写法的不同直观感受下setup带给我们的便利// script setup之前的写法
templatedivdiv浪里行舟/divCard{{ message }}/Card/div
/template
script langts
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的写法
templatedivdiv浪里行舟/divCard{{message}}/Card/div
/templatescript langts 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
templateh2浪里行舟/h2h1Hello Vue3.2/h1h2{{ color }}/h2button clickcolor redcolor red/buttonbutton clickcolor yellowcolor yellow/buttonbutton clickcolor bluecolor blue/buttonbutton clickfontSize 40pxfontSize 40px/button
/template
style scoped
h1 {color: v-bind(color);
}
h2 {font-size: v-bind(fontSize);
}
/style
点击按钮更改color 或者 fontSize的数值可以看到页面样式也会响应式变化。其原理就是自定义属性将通过内联样式应用于组件的根元素并在数值更改时进行响应更新。3v-memo3.2 版本为 Vue 的响应式系统带来了一系列重大性能改进具体包括更高效的 ref 实现读取速度提高约 260%写入速度提高约 50%依赖项跟踪速度提高约 40%内存使用量减少约 17%新版本还提供新的 v-memo 指令可实现对部分模板树的记忆功能。当v-memo 命中时不仅允许 Vue 跳过虚拟 DOM 差异、甚至可以完全跳过新 VNode 的创建步骤。虽然这个指令使用频率不高但它提供了一个逃生舱来在某些情况下例如处理大型 v-for 列表获取最大性能。div v-foruser of users :keyuser.id v-memo[user.name]{{ user.name }}
/div
这个例子使用v-memo不会重新创建虚拟元素并且会重新使用前一个元素除非v-memo此处为用户名的条件发生变化。这可能看起来是一个很小的改进但如果您渲染大量元素它实际上是性能的巨大改进。其实v-memo可以接受一组条件请看下面的例子div v-foruser of users :keyuser.id v-memo[user.name, selectedUserId user.id]p :class{ red: selectedUserId user.id }{{ user.name }}/p
/div
此时如果user.name或selectedUserId发生变化div则将更新。4新 ref 语法糖实验性$ref()避免在更新 ref 值时需要使用.value可以让代码更加精简请看下面例子templateinput typenumber v-modelcount * 5€h1{{ total }}/h1
/templatescript setuplet count $ref(0)let total $computed(() count * 5)
/script
⚠️注意这还是一个实验性特性所以请谨慎使用因为它将来可能会发生变化。该提案还引入了其他新的语法糖包括$computed()、$fromRefs()和$raw()。5Expose APIVue 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 APIVue 3.2版本引入了新的 Effect scope API用于创建一个effect Scope对象该对象可以捕获在其中创建的反应性效果例如computed 或 watchers以便可以将这些效果放在一起并轻松处理它们。它可以更轻松地在组件上下文之外使用 Vue 的响应式 API同时也在组件之内解锁了多种高级用例。Effect scope 是一种高级 API主要供库作者使用。我们知道watch, watchEffect,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 idinput typefoo value11 :data.propinputData/input
// 渲染后HTML标签结构
input idinput typefoo value11/input
看了它的用途就知道如果你不想你的属性显示在html标签里面就用.prop修饰符吧!另外这两个修饰符有简写的语法a :title.propfirstTabTooltip :aria-selected.attrisFirstTabSelectedFirst tab/a!-- 简写 --
a .titlefirstTabTooltip ^aria-selectedisFirstTabSelectedFirst tab/a
8Web 组件Vue 3.2 引入了新的 defineCustomElement 方法可以使用 Vue 组件 API 轻松创建原生自定义元素import { defineCustomElement } from vueconst 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!Whats new in Vue 3.2?v-bind 指令常用修饰符Vue3 官方文档Vue 3.2正式发布script setup TS Volar 真香最近组建了一个湖南人的前端交流群如果你是湖南人可以加我微信 ruochuan12 私信 湖南 拉你进群。推荐阅读我在阿里招前端该怎么帮你可进面试群我读源码的经历面对 this 指向丢失尤雨溪在 Vuex 源码中是怎么处理的老姚浅谈怎么学JavaScript················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
