Vue 3.2 正式发布,尤雨溪:<script setup> + TS + Volar = 真香

栏目: 软件资讯 · 发布时间: 3年前

内容简介:今日凌晨,尤雨溪宣布 Vue 3.2 正式发布(代号"Quintessential Quintuplets"),此版本增加了许多重要的新特性和性能改进,且不包含破坏性变更。 单文件组件 (SFC) 的新特性 单文件组件(SFC,又称作.vue 文件)的...

今日凌晨,尤雨溪宣布 Vue 3.2 正式发布(代号"Quintessential Quintuplets"),此版本增加了许多重要的新特性和性能改进,且不包含破坏性变更。

Vue 3.2 正式发布,尤雨溪:<script setup> + TS + Volar = 真香

单文件组件 (SFC) 的新特性

单文件组件(SFC,又称作.vue 文件)的两项实验特性已毕业,现已提供稳定版本:

  • <script setup>属于编译时 (compile-time) 语法糖,可显著提升在 SFC 中使用 Composition API 时的开发效率

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

使用示例

<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>

在线体验:SFC Playground。相关文档:

对于<script setup>特性,尤雨溪表示,“<script setup> + TS + Volar = 真香”。

Vue 3.2 正式发布,尤雨溪:<script setup> + TS + Volar = 真香

Web 组件

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

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

性能改进

Vue 3.2 针对响应式系统进行了重要的性能优化:

以及优化模板编译器的性能:

最后,新增的v-memo指令提供了针对部分模板树进行 memoize 的能力,并显著提升了性能。

Vue 3.2 正式发布,尤雨溪:<script setup> + TS + Volar = 真香

服务器端渲染

Vue 3.2 的@vue/server-renderer包现已提供 ES module build,并与 Node.js 的内置模块解耦。因此,开发者可在非 Node.js runtime 中(例如 CloudFlare Workers 和 Service Workers)绑定和使用@vue/server-renderer

此版本还改进了流式渲染 API,为 Web Streams API 的渲染提供了新方法。详情查看@vue/server-renderer文档。

更多内容查看发布公告


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

征服C指针

征服C指针

前桥和弥 / 吴雅明 / 人民邮电出版社 / 2013-2 / 49.00元

《图灵程序设计丛书:征服C指针》被称为日本最有营养的C参考书。作者是日本著名的“毒舌程序员”,其言辞犀利,观点鲜明,往往能让读者迅速领悟要领。书中结合了作者多年的编程经验和感悟,从C语言指针的概念讲起,通过实验一步一步地为我们解释了指针和数组、内存、数据结构的关系,展现了指针的常见用法,揭示了各种使用技巧。另外,还通过独特的方式教会我们怎样解读C语言那些让人“纠结”的声明语法,如何绕过C指针的陷阱......一起来看看 《征服C指针》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具