Vue 3.0 TypeScript 组件开发入门指南

2023-11-24 13:57:21

前言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它允许您使用清晰和简洁的模板语法创建组件，并使用响应式数据绑定实现交互性。Vue.js 的单文件组件 (SFC) 使您能够将 HTML、CSS 和 JavaScript 代码组织在一个文件中，从而提高开发效率。

TypeScript 是一个由微软开发的开源编程语言。它基于 JavaScript，并增加了静态类型系统和其他特性，使其更易于维护和重构代码。Vue.js 和 TypeScript 可以很好地协同工作，使您能够构建出健壮且可维护的前端应用程序。

环境搭建

在开始之前，您需要安装必要的依赖项。

Node.js 16.0 或更高版本
Vue CLI 4.5 或更高版本
TypeScript 4.1 或更高版本

您可以通过以下命令安装这些依赖项：

npm install -g @vue/cli
npm install -g typescript

安装完成后，您就可以使用 Vue CLI 创建一个新的 Vue 项目了。

vue create my-vue-project --template vue3-ts

单文件组件

单文件组件 (SFC) 是 Vue.js 的一个重要特性。它允许您将 HTML、CSS 和 JavaScript 代码组织在一个文件中，从而提高开发效率。

在一个 SFC 中，您需要使用 <template> 标签来定义 HTML 结构，使用 <script> 标签来定义 JavaScript 代码，并使用 <style> 标签来定义 CSS 样式。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World',
      message: 'This is a message.'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}

p {
  color: blue;
}
</style>

响应式数据

响应式数据是 Vue.js 的另一个重要特性。它允许您在数据发生变化时自动更新 UI。

要在 Vue.js 中创建响应式数据，您需要使用 data() 方法。data() 方法返回一个对象，该对象中的所有属性都是响应式的。

export default {
  data() {
    return {
      title: 'Hello World',
      message: 'This is a message.'
    }
  }
}

计算属性

计算属性允许您根据其他响应式数据计算出一个新的值。计算属性的值是只读的，这意味着您不能直接更改它。

要创建计算属性，您需要使用 computed() 方法。computed() 方法返回一个函数，该函数接收其他响应式数据作为参数，并返回一个新的值。

export default {
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
}

侦听器

侦听器允许您在响应式数据发生变化时执行某些操作。

要创建侦听器，您需要使用 watch() 方法。watch() 方法接收两个参数：要侦听的数据和一个回调函数。当数据发生变化时，回调函数就会被调用。

export default {
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from "${oldValue}" to "${newValue}".`);
    }
  }
}

插槽

插槽允许您在组件中定义一个占位符，然后在使用该组件时向其中插入内容。

要创建插槽，您需要使用 <slot> 标签。<slot> 标签可以包含任何 HTML 代码。

要向插槽中插入内容，您需要使用 v-slot 指令。v-slot 指令可以应用于任何 HTML 元素。

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<my-component>
  <template v-slot:header>
    <h1>Header</h1>
  </template>
  <p>This is the default slot.</p>
  <template v-slot:footer>
    <p>Footer</p>
  </template>
</my-component>

生命周期钩子

生命周期钩子允许您在组件的不同生命周期阶段执行某些操作。

Vue.js 提供了多个生命周期钩子，包括：

beforeCreate()：在组件创建之前调用。
created()：在组件创建之后调用。
beforeMount()：在组件挂载之前调用。
mounted()：在组件挂载之后调用。
beforeUpdate()：在组件更新之前调用。
updated()：在组件更新之后调用。
beforeDestroy()：在组件销毁之前调用。
destroyed()：在组件销毁之后调用。

要使用生命周期钩子，您需要在组件选项中定义它们。

export default {
  beforeCreate() {
    console.log('Before create.');
  },

  created() {
    console.log('Created.');
  },

  beforeMount() {
    console.log('Before mount.');
  },

  mounted() {
    console.log('Mounted.');
  },

  beforeUpdate() {
    console.log('Before update.');
  },

  updated() {
    console.log('Updated.');
  },

  beforeDestroy() {
    console.log('Before destroy.');
  },

  destroyed() {
    console.log('Destroyed.');
  }
}

路由

Vue.js 提供了一个内置的路由系统，使您能够轻松地构建单页应用程序 (SPA)。

要使用 Vue.js 的路由系统，您需要先安装 vue-router 包。

npm install vue-router

安装完成后，您可以在 Vue 实例中使用 VueRouter 类来创建路由器。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

状态管理

在大型 Vue.js 项目中，您需要使用状态管理库来管理应用程序的状态。

Vue.js 官方推荐的状态管理库是 Vuex。

要使用 Vuex，您需要先安装 vuex 包。

npm install vuex

安装完成后，您可以在 Vue 实例中使用 Vuex.Store 类来创建 Vuex 存储。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },

  mutations: {
    increment(state) {
      state.count++
    }
  }
})

new Vue({
  store
}).$mount('#app')