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>

在这个示例中,我们有两个组件FirstComponentSecondComponent,当用户点击按钮时,会切换显示这两个组件。currentComponent数据属性决定当前显示的组件,通过点击按钮来切换这个属性的值,从而实现动态组件的效果。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试