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函数返回需要的数据和方法，使组件结构更清晰简洁。

<script setup>
import { ref } from 'vue';

// 定义一个响应式数据
const message = ref('你好，Vue3！');
</script>

<template>
  <p>{{ message }}</p>
</template>

 

Teleport

Vue3 引入了 Teleport 功能，可以让组件在 DOM 上的任何位置渲染，这样可以避免一些布局上的问题，比如弹窗组件在父组件中嵌套太多层导致样式混乱等。

Teleport（传送门）：
详细分析：Vue3中的 Teleport 功能允许组件在DOM中的任何位置渲染，避免布局问题，像是嵌套导致样式冲突等。

<template>
  <teleport to="body">
    <div>
      <p>这段内容将被渲染到 body 元素中</p>
    </div>
  </teleport>
</template>

Fragments

Vue3 支持使用 Fragments，可以在模板中直接使用多个根元素，而不需要包裹在一个父元素中。这样可以更加灵活地组织模板代码，使得代码更加简洁和易于维护。

Fragments（片段）：
详细分析：Vue3支持使用 Fragments，允许模板中直接使用多个根元素，而无需包裹在父元素中，使得模板组织更加灵活，代码更加简洁。

<template>
  <>
    <div>条目 1</div>
    <div>条目 2</div>
    <div>条目 3</div>
  </>
</template>

 

组件

组件注册：

在Vue3中，全局注册组件可以使用Vue.createApp().component()方法，局部注册组件可以在组件选项中使用components属性。全局注册的组件可在整个应用程序中使用，局部注册的组件只能在父组件中使用。

例子：

// 全局注册组件
const app = Vue.createApp({});
app.component('my-component', {
  // 组件选项
});

// 局部注册组件
export default {
  components: {
    'my-component': {
      // 组件选项
    }
  }
}

组件通信

组件之间可以通过props和events实现通信。父组件通过props向子组件传递数据，子组件通过触发事件来与父组件通信。Props可以是静态或动态数据，而events则可以携带数据传递给父组件。

例子：

// 父组件向子组件传递数据
<my-component :message="parentMessage" />

// 子组件触发事件与父组件通信
<button @click="$emit('child-event', eventData)">触发事件</button>

组件生命周期

Vue3中的组件生命周期钩子函数包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等。这些生命周期函数可以在不同阶段执行特定逻辑或操作。

例子：

export default {
  beforeCreate() {
    console.log('组件将要被创建');
  },
  mounted() {
    console.log('组件已挂载到DOM');
  },
  unmounted(){
    console.log('组件被销毁');
  }
}

动态组件 

使用<component>元素，并将其is属性绑定到一个数据属性，这个数据属性的值是所希望动态加载的组件的名称。当数据属性的值发生变化时，Vue会自动加载对应的组件。

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