vue3——(模板应用，组件)

模板应用

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数据属性决定当前显示的组件，通过点击按钮来切换这个属性的值，从而实现动态组件的效果。