C语言学习网

Vue3.2有哪些新特性

发表于:2022-12-07 作者:安全数据网编辑
编辑最后更新 2022年12月07日,本篇内容介绍了"Vue3.2有哪些新特性"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!第一个: 正式

本篇内容介绍了"Vue3.2有哪些新特性"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

第一个:

因为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 `` 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

他们不需要引入,会在编译的时候处理掉。

然而不引入你用的时候就会报错。

首先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有哪些新特性"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!

0