---
URL: "/zh-CN/blog/2025-07/vue_3_5.html"
LLMS_URL: "/zh-CN/blog/2025-07/vue_3_5.md"
lastUpdated: true
commentabled: true
recommended: true
title: "Vue 3 的新特性解析与开发实践指南"
description: "Vue 3 的新特性解析与开发实践指南"
date:
pageClass: "blog-page-class"
cover: "/covers/vue.svg"
---
---
lastUpdated: true
commentabled: true
recommended: true
title: Vue 3 的新特性解析与开发实践指南
description: Vue 3 的新特性解析与开发实践指南
date: 2025-07-15 14:05:00
pageClass: blog-page-class
cover: /covers/vue.svg
---
## 使用defineCustomElement定义组件 ##
在 Vue 3 中，`defineCustomElement` 是用来创建自定义元素的 API，它允许开发者将 Vue 组件封装成*自定义元素（Custom Element）*，自定义元素是 Web Components 的一部分，可以在其他框架或者原生 HTML、JavaScript 环境中使用。这对于构建可复用的 UI 组件非常有用，以下是defineCustomElement 的解析和使用方法
### 什么是自定义元素（Custom Element）？ ###
自定义元素是浏览器原生支持的组件化技术，具有以下特点：
- **跨框架**：可以在 Vue、React、Angular 或原生 HTML 中使用
- **封装性**：样式和行为封装在组件内部，不会影响外部
- **生命周期**：支持自定义生命周期钩子（如 `connectedCallback`、`disconnectedCallback` 等）
### defineCustomElement 的作用 ###
`defineCustomElement` 是 Vue 3 提供的 API，用于将 Vue 组件转换为自定义元素。转换后的组件可以像原生 HTML 标签一样使用
### 使用 defineCustomElement 的步骤 ###
#### 定义 Vue 组件 ####
首先，定义一个普通的 `MyComponent.vue` 组件
```vue:MyComponent.vue
{{ message }}
```
#### 将MyComponent.vue组件转换为自定义元素 ####
使用 `defineCustomElement` 将 Vue 组件转换为自定义元素
`customElements` 对象是Web Components API的一部分，用于定义自定义元素。 在JavaScript中，`customElements` 对象是由浏览器提供的，用于创建和管理自定义元素。你可以通过调用 `customElements.define()` 方法来定义一个新的自定义元素。这个方法接受两个参数：元素的名称和元素的构造函数
```js:main.js
import { defineCustomElement } from 'vue';
import MyComponent from './MyComponent.vue';
// 将 Vue 组件转换为自定义元素
const MyCustomElement = defineCustomElement(MyComponent);
// 注册自定义元素
customElements.define('my-component', MyCustomElement);
```
#### 在 HTML 中使用 ####
```html
Vue Custom Element
```
### 传递 Props ###
可以通过属性（Attributes）或属性（Properties）向自定义元素传递数据
#### 通过属性传递 ####
属性值只能是字符串，需要通过 `props` 接收
```js
```
通过 JavaScript 设置属性值，可以传递任意类型的数据
```js
const element = document.querySelector('my-component');
element.message = 'Hello from Property!';
```
#### 在组件中接收 ####
```vue:MyComponent.vue
{{ message }}
```
### 监听事件 ###
自定义元素可以触发自定义事件，父组件可以通过 `addEventListener` 监听
```vue:MyComponent.vue
{{ message }}
```
在父组件中监听：
```js
const element = document.querySelector('my-component');
element.addEventListener('custom-click', (event) => {
console.log(event.detail.message); // 输出: Button clicked!
});
```
### 生命周期钩子 ###
```js
class MyCustomElement extends HTMLElement {
connectedCallback() {
console.log('Custom element added to the DOM');
}
disconnectedCallback() {
console.log('Custom element removed from the DOM');
}
}
customElements.define('my-custom-element', MyCustomElement);
```
### 样式封装 ###
自定义元素支持 Shadow DOM，可以将样式封装在组件内部
```js
class MyCustomElement extends HTMLElement {
connectedCallback() {
console.log('Custom element added to the DOM');
}
disconnectedCallback() {
console.log('Custom element removed from the DOM');
}
}
customElements.define('my-custom-element', MyCustomElement);
```
Vue 3.5 对自定义元素defineCustomElement的支持进一步增强，增加了多个实用的 API 和功能：
- 通过 configureApp 选项支持自定义元素的应用程序配置,允许在自定义元素初始化时配置 Vue 应用实例，例如全局插件、混入或依赖注入
- 添加 useHost()、useShadowRoot() 和 this.$host API，用于访问自定义元素的宿主元素和影子根
- 支持通过传递 shadowRoot: false 来在没有 Shadow DOM 的情况下挂载自定义元素,默认情况下, Vue 自定义元素会使用 Shadow DOM 进行封装，以提高样式隔离性
- 支持提供 nonce 选项，该选项将附加到自定义元素注入的 `