第三节 Vue3的基本知识

博主

亮子

专辑

第三节 Vue3的基本知识

亮子 2024-02-19 11:57:39

开篇总结

首先声明：这篇笔记中是在学习禹神最新Vue3教程记下来的，其中有一些自己写的笔记见解、搬禹神、vue、vite官网的一些笔记。主要目的还是给自己多一点知识点的总结。其实一遍下来，基本大部分都会，所以学习会很快。有几点我得好好在下面总结。

1、学习到的新点

props和provide传值可以通过传函数给下面的组件，组件调用后传参可以更改父元素。
一个reactive响应式对象中包含有ref类型数据，通过reactive可以直接获取数据，有解包的过程
新了解的mitt进行组件间的通信
禹神（本文作者）yyds，作用域插槽每次看到都会有不一样的见解，但是不用容易忘，这次讲的例子很让人记忆深刻

2、学习的建议

虽然之前通过各个方面资源学习vue，其中主要是通过官网和禹神的vue2视频学习，学习也简单，但是很重要的一点，就是要去多练，多接触，要不然很容易忘的。
想学习更多的东西，看官网挺好的，当然听老师讲可能会对一个知识点豁然开朗。

1、创建 Vue3 工程

1.1 【基于 vue-cli 创建】

备注：现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。

## 查看 @vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
vue -V
## 安装或 升级你的 @vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择 3.x
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)

## 下面基于webpack搭建项目成功后执行下面的命令就是成功创建Vue3项目！！！
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in F:\桌面\vue_test.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 864 packages in 35s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 103 packages in 7s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue_test.
👉  Get started with the following commands:

 $ cd vue_test
 $ npm run serve

1.2 【基于 Vite 创建】（Vue 官方推荐）

## 创建命令
npm create vue@latest
## 一些可选项
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
## 在项目被创建后，通过以下步骤安装依赖并启动开发服务器
> cd <your-project-name>
> npm install
> npm run dev

总结：

Vite 项目中，index.html 是项目的入口文件，在项目的最外层。
加载 index.html 后，Vite 解析指向的 JavaScript。
Vue3 中是通过 createApp 函数创建一个实例应用的。

1.3 【基于 Vite 官方 create-vite 创建】

## vite构建vue项目
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bunx create-vite my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，qwik-ts。

2、Vue3 语法核心

2.1 【拉开序幕的 setup】

setup 是 Vue3 中的一个新配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视……等，均配置在 setup 当中。

特点如下

setup 函数返回的对象中的内容，可直接在模板中使用。
setup 中访问的 this 是 undefined。
setup 函数会在 beforeCreate 之前调用，它是“领先”所有钩子执行的。

setup 的返回值

//返回一个对象！！！
return {
  name,
  age,
  tel,
  changeName,
  changeAge,
  showTel,
};

//一个渲染函数
return () => "哈哈";

涉及到的面试问题

1、（data、methods……）和 setup 能不能同时存在？
能，可以在一个 Vue 3 组件中同时使用 Options API 和 Composition API。但是，它们的使用场景是不同的。一般来说，如果你想要定义一些基础的响应式数据和钩子函数，使用 Options API 就足够了。而当你需要更复杂的逻辑或希望更好地组织你的代码时，Composition API 会是一个更好的选择。

2、setup 中定义的数据，在 data 中能否获得？
能，setup 这个钩子执行的时期比 data 早，当 data 中数据解析完毕时，setup 中数据早已经解析完毕了！！！但是注意的是 setup 不能再去读取 data 中的数据了

官网的 setup 语法糖

是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 TypeScript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

要启用该语法，需要在代码块上添加 setup attribute：

<script setup>console.log('hello script setup')</script>

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的只在组件被首次引入的时候执行一次不同，中的代码会在每次组件实例被创建的时候执行。

Vue3 项目注意点

Vue3 中可能会遇到两个 script 标签，一个是用来配置组件名称的，另一个是用来配置 setup 的。

<script lang="ts">
    export default {
        name:"Person123"
    }
</script>

<script lang="ts" setup>
  ...
</script>

和上面这样写可能有点麻烦了！我们可以进行如下配置：

1、我们可以借助一个插件

npm i vite-plugin-vue-setup-extend -D

2、在 vite.config.ts 中进行配置

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from "vite-plugin-vue-setup-extend";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueSetupExtend()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

参考文章

https://blog.csdn.net/m0_63231347/article/details/135438085