Vue3有哪些新特性和优势？

本文共计1412个文字，预计阅读时间需要6分钟。

目录- 引言- 构建 Web Components- 属性- 事件- 插件- 子组件样式问题- 方法- 总结- 引言- 有时候想写一个无关框架的组件- 不想用原生或 jQuery，那套去写- 还要避免样式冲突- 用 Web Components

目录

• 引言
• 构建 Web Components
• 属性
• 事件
• 插槽
• 子组件样式问题
• 方法
• 总结

引言

有时候想写一个无关框架组件，又不想用原生或者 Jquery 那套去写，而且还要避免样式冲突，用 Web Components 去做刚觉就挺合适的。但是现在 Web Components 使用起来还是不够灵活，很多地方还是不太方便的，如果能和 MVVM 搭配使用就好了。

早在之前 Angular 就支持将组件构建成 Web Components，Vue3 3.2+开始终于支持将组建构建成 Web Components 了。正好最近想重构下评论插件，于是上手试了试。

构建 Web Components

vue 提供了一个defineCustomElement方法，用来将 vue 组件转换成一个扩展至HTMLElement的自定义函数构造函数，使用方式和defineComponent参数api基本保持一致。

import { defineCustomElement } from 'vue' const MyVueElement = defineCustomElement({ // 在此提供正常的 Vue 组件选项 props: {}, emits: {}, template: `...`, // defineCustomElement 独有特性: CSS 会被注入到隐式根 (shadow root) 中 styles: [`/* inlined css */`] }) // 注册 Web Components customElements.define('my-vue-element', MyVueElement)

如果需要使用单文件，需要@vitejs/plugin-vue@^1.4.0或vue-loader@^16.5.0或更高版本工具。如果只是部分文件需要使用，可以将后缀改为.ce.vue。

若果需要将所有文件都构建Web Components可以将@vitejs/plugin-vue@^1.4.0或vue-loader@^16.5.0的customElement配置项开启。这样不需要再使用.ce.vue后缀名了。

属性

vue 会把所有的的 props 自定义元素的对象的 property 上，也会将自定义元素标签上的 attribute 做一个映射。

<com-demo type="a"></com-demo> props:{ type:String }

因为 HTML 的attribute的只能是字符串，除了基础类型(Boolean、Number) Vue 在映射时会帮忙做类型转换，其他复杂类型则需要设置到 DOM property 上。

事件

在自定义元素中，通过this.$emit或在setup中的emit发出的事件会被调度为原生CustomEvents。附加的事件参数 (payload) 会作为数组暴露在 CustomEvent 对象的 details property 上。

插槽

编写组件时，可以想 vue 一样，但是使用时只能原生的插槽语法，所以也不在支持作用域插槽。

子组件样式问题

使用子组件嵌套的时，有个坑的地方就是默认不会将子组件里的样式抽离出来。

父组件

<template> <div class="title">{{ title }}</div> <Childer /> </template> <script> import Childer from "./childer.vue" export default { components: { Childer }, data() { return { title: "父组件" } }, } </script> <style lang="less" scoped> .title { padding: 10px; background-color: #eee; font-weight: bold; } </style>

子组件

<template> <div class="childer">{{ title }}</div> </template> <script> export default { data() { return { title: "子组件" } }, } </script> <style lang="less" scoped> .childer { padding: 10px; background-color: #222; color: #fff; font-weight: bold; } </style>

可以看到子组件的样式没有插入进去，但是样式隔离的标识是有生成的 data-v-5e87e937。不知道vue官方后续会不会修复这个bug

查看组件是可以看到，子组件的样式是有被抽离出来的，这样就只需要自己注入进去了。

将子组件样式抽离插入到父组件里，参考这个的实现

import ComDemo from '~/demo/index.vue' const deepStylesOf = ({ styles = [], components = {} }) => { const unique = array => [...new Set(array)]; return unique([...styles, ...Object.values(components).flatMap(deepStylesOf)]); } // 将子组件样式插入到父组件里 ComDemo.styles = deepStylesOf(ComDemo) !customElements.get('com-demo') && customElements.define('com-demo', defineCustomElement(ComDemo))

完美解决子组件样式问题

方法

defineCustomElement构建的组件默认是不会将方法挂到customElement上的，看 Vue 源码中，只有 _def（构造函数），_instance（组件实例)）。

如果想调用组件内的方法，dom._instance.proxy.fun()，感觉实在不太优雅。

我们当然希望我们组件暴露的方法能像普通dom那样直接 dom.fun() 去掉用，我们对defineCustomElement稍作扩展。

import { VueElement, defineComponent } from 'vue' const defineCustomElement = (options, hydate) => { const Comp = defineComponent(options); class VueCustomElement extends VueElement { constructor(initialProps) { super(Comp, initialProps, hydate); if (Comp.methods) { Object.keys(Comp.methods).forEach(key => { // 将所有非下划线开头方法 绑定到 元素上 if(!/^_/.test(key)){ this[key] = function (...res) { if (this._instance) { // 将方法thi改为 组件实例的proxy return Comp.methods[key].call(this._instance.proxy, ...res) } else { throw new Error('未找到组件实例') } } } }) } } } VueCustomElement.def = Comp; return VueCustomElement; }

总结

总体来说坑还是有不少的，如果仅仅需要构建一些比较简单跨框架插件，使用这种方式来构建 Web Components 也是一种不错的方案。

以上就是Vue3 构建 Web Components使用详解的详细内容，更多关于Vue3 构建 Web Components的资料请关注易盾网络其它相关文章！