您好,欢迎访问一九零五行业门户网

Vue3.2已发布,带来了这些新特性!

第一个:5101c0cdbdc49998c642c71f6b6410a8 正式毕业
从一开始学习vue3就注意到了实验性的5101c0cdbdc49998c642c71f6b6410a8。因为简洁的写法受到许多人追捧(写过setup(){return{}} 的人都知道),甚至有人说这才是vue3的完全形态。看了更新描述,emmm....官方吐槽最为致命。
5101c0cdbdc49998c642c71f6b6410a8 是一种编译时语法糖,可在 sfc 内使用 composition api 时**极大地改善工作效率。
第二个:新增c9ccee2e6ea535a969eb3f532ad9fe89 v-bind
而c9ccee2e6ea535a969eb3f532ad9fe89 v-bind呢,简单地来说就是可以在内使用组件定义的动态值。官方给出了例子:
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>
因为vue中文官网暂时没有此次的更新内容,需要的同学可能要到外网啃啃英文文档了。
文档地址:
https://v3.vuejs.org/api/sfc-script-setup.html
第三个:新增 definecustomelement方法
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)
第四个:性能改进
此处有很大篇幅讲述3.2版本的性能升级,其中提到了新的指令v-memo,简单来说这个指令会记住模板树的一部分,不仅跳过虚拟 dom 差异,而且完全跳过新 vnode 的创建。可用于复杂的大型页面。
第五个:服务器渲染
最后提到了服务端渲染与新的effect scope api。有兴趣的同学可以仔细看一看更新文档。
blog.vuejs.org/posts/vue-3…
第6个:1024lab 再说点儿
相信很多同学已经上手开始使用了。在文档中可以看到,
defineprops、defineemits、defineexpose、withdefaults属于compiler macro,编译器宏。文档中也说到:
they do not need to be imported, and are compiled away when is processed
他们不需要引入,会在编译的时候处理掉。
然而不引入你用的时候就会报错。
<script setup>const props = defineprops<{ value?: number;}>();const emit = defineemits<{ (e: 'update:value', value: number): void;}>();</script>
首先eslint会报错:
eslint: 'defineemits' is not defined.(no-undef)
此时你需要更改eslint-plugin-vue的配置
//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rulemodule.exports = { globals: { defineprops: "readonly", defineemits: "readonly", defineexpose: "readonly", withdefaults: "readonly" }}
然后可能编译后浏览器控制台会报错
defineemits is not defined
你可能会发现defineemits等并没有在编译的时候处理掉,通过浏览器看源代码defineemits还在,且画着红色波浪线。此时你可能需要查看package.json中各个包的版本以及vite的版本2.4.x,更新后重试,此时编译出来的代码应该是这样:
const _sfc_main = _definecomponent({ props: { value: { type: number, required: false } }, emits: ["update:value"], setup(__props, { expose, emit }) {} })
以上就是vue3.2已发布,带来了这些新特性!的详细内容。
其它类似信息

推荐信息