模板应用
Vue3 的模板应用和之前的版本基本一致,但是在一些关键点上有所不同。
Composition API
Vue3 引入了 Composition API,这是一种全新的 API 设计风格,可以更好地组织代码,提高代码的复用性和可读性。与之前的 Options API 相比,Composition API 更加灵活,并且可以将相关代码组合在一起,使得代码更加清晰和易于维护。
Composition API(组合式 API):
详细分析:Composition API 是 Vue3 中的全新API设计风格,可以更好地组织代码,提升代码的复用性和可读性。与 Options API 相比,Composition API 更加灵活,可将相关代码组合在一起,使代码更清晰易于维护。
<script setup>
// 定义一个响应式数据
const count = ref(0);
// 定义一个方法
const increment = () => {
count.value++;
};
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">递增</button>
</div>
</template>
Setup 函数
Vue3 中使用 Setup 函数来代替之前的 created 和 data 属性,Setup 函数用于初始化组件的数据和方法。在 Setup 函数中,可以访问 props、context、attrs 等属性,并且直接返回需要的数据和方法,这样可以使得组件的结构更加清晰和简洁。
Setup 函数:
详细分析:Setup 函数取代了 Vue3 中的 created 和 data 属性,用于初始化组件数据和方法,可以访问props、context、attrs等属性。Setup函数返回需要的数据和方法,使组件结构更清晰简洁。
javascript
<script setup>
import { ref } from 'vue';
// 定义一个响应式数据
const message = ref('你好,Vue3!');
</script>
<template>
<p>{{ message }}</p>
</template>
Teleport
Vue3 引入了 Teleport 功能,可以让组件在 DOM 上的任何位置渲染,这样可以避免一些布局上的问题,比如弹窗组件在父组件中嵌套太多层导致样式混乱等。
Teleport(传送门):
详细分析:Vue3中的 Teleport 功能允许组件在DOM中的任何位置渲染,避免布局问题,像是嵌套导致样式冲突等。
javascript
<template>
<teleport to="body">
<div>
<p>这段内容将被渲染到 body 元素中</p>
</div>
</teleport>
</template>
Fragments
Vue3 支持使用 Fragments,可以在模板中直接使用多个根元素,而不需要包裹在一个父元素中。这样可以更加灵活地组织模板代码,使得代码更加简洁和易于维护。
Fragments(片段):
详细分析:Vue3支持使用 Fragments,允许模板中直接使用多个根元素,而无需包裹在父元素中,使得模板组织更加灵活,代码更加简洁。
javascript
<template>
<>
<div>条目 1</div>
<div>条目 2</div>
<div>条目 3</div>
</>
</template>
组件
组件注册:
在Vue3中,全局注册组件可以使用Vue.createApp().component()方法,局部注册组件可以在组件选项中使用components属性。全局注册的组件可在整个应用程序中使用,局部注册的组件只能在父组件中使用。
例子:
javascript
// 全局注册组件
const app = Vue.createApp({});
app.component('my-component', {
// 组件选项
});
// 局部注册组件
export default {
components: {
'my-component': {
// 组件选项
}
}
}
组件通信
组件之间可以通过props和events实现通信。父组件通过props向子组件传递数据,子组件通过触发事件来与父组件通信。Props可以是静态或动态数据,而events则可以携带数据传递给父组件。
例子:
javascript
// 父组件向子组件传递数据
<my-component :message="parentMessage" />
// 子组件触发事件与父组件通信
<button @click="$emit('child-event', eventData)">触发事件</button>
组件生命周期
Vue3中的组件生命周期钩子函数包括:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等。这些生命周期函数可以在不同阶段执行特定逻辑或操作。
例子:
javascript
export default {
beforeCreate() {
console.log('组件将要被创建');
},
mounted() {
console.log('组件已挂载到DOM');
},
unmounted(){
console.log('组件被销毁');
}
}
动态组件
使用<component>
元素,并将其is
属性绑定到一个数据属性,这个数据属性的值是所希望动态加载的组件的名称。当数据属性的值发生变化时,Vue会自动加载对应的组件。
javascript
<template>
<div>
<button @click="toggleComponent">Toggle Component</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';
export default {
data() {
return {
currentComponent: 'FirstComponent'
};
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
}
},
components: {
FirstComponent,
SecondComponent
}
};
</script>
在这个示例中,我们有两个组件FirstComponent
和SecondComponent
,当用户点击按钮时,会切换显示这两个组件。currentComponent
数据属性决定当前显示的组件,通过点击按钮来切换这个属性的值,从而实现动态组件的效果。