初识 Vue3——项目搭建与 setUP 函数体验

2023-11-22 18:50:31

引言：
踏入 Vue3 的世界，开启一场激动人心的技术之旅。本篇文章将指导您搭建 Vue3 项目，并深入探索 setUP 函数的奥妙，助您踏上探索 Vue3 的第一阶梯。

一、Vue3 的简介
Vue.js3.0 于 2020 年 9 月正式亮相，它承载着 Vue2 的强大特性，更进一步地强化了 Typescript 的支持。得益于虚拟 DOM 的彻底重构以及模板编译的优化，Vue3 的运行性能得到大幅提升，同时有效地降低了运行时开销。

二、项目搭建

安装 Node.js 和 Vue CLI
- 安装 Node.js 并通过 npm install -g @vue/cli 安装 Vue CLI。
创建项目
- 创建一个新文件夹并使用 vue create my-project 创建一个 Vue3 项目。
项目结构
- 项目目录包含 src、public、node_modules 等文件夹。src 文件夹存储源代码，public 文件夹用于静态资源，node_modules 文件夹包含项目依赖。
运行项目
- 进入项目目录并使用 npm run serve 启动开发服务器。
- 访问 http://localhost:8080 查看项目。

三、setUP 函数初体验

setUP 函数是 Vue3 中新增的一个生命周期钩子，它在 beforeCreate 和 created 之间执行。它提供了以下优势：

代替组件选项： setUP 函数取代了 Vue2 中的 data、methods 和 computed 等组件选项。
可访问性： setUP 函数可以访问组件实例，允许您直接设置和修改状态。
响应性： setUP 函数中设置的任何状态都是响应性的，并会触发组件重新渲染。
代码组织： setUP 函数可以帮助您将组件逻辑组织成更清晰可读的结构。

使用 setUP 函数：

导入工具： 在脚本部分导入 setup 函数。
设置状态： 使用 const 声明声明式变量来设置组件状态。
返回对象： setUP 函数返回一个包含组件状态和方法的对象。

示例：

import { setup } from 'vue';

const myComponent = {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};