2024年Vue 3学习笔记:Vu3基础的完整指南

文章目录

  • 开篇总结
  • 1.创建 Vue3 工程
    • 1.1 【基于 vue-cli 创建】
    • 1.2 【基于 Vite 创建】(Vue 官方推荐)
    • 1.3 【基于 Vite 官方 create-vite 创建】
  • 2.Vue3 语法核心
    • 2.1 【拉开序幕的 setup】
    • 2.2 ref 和 reactive 的学习
    • 2.3 toRefs、toRef、computed
    • 2.4 【watch】
      • \*情况一:监视【ref】定义的 【基本类型】数据
      • \*情况二:监视【ref】定义的 【对象类型】数据
      • \*情况三:监视 【reactive】定义的【对象类型】数据,且默认开启了深度监视
      • \*情况四:监视 ref 或 reactive 定义的【对象类型】数据中的 某个属性
      • \*情况五:监视多个数据
    • 2.5【watchEffect】
    • 2.6【标签的 ref 属性】
    • 2.7 props
    • 2.8 Hooks
  • 3.路由
    • 3.1 两个注意点
    • 3.2 RouterLink 中 to 的两种写法
    • 3.3 路由器的工作模式
    • 3.4 路由传参
      • query 传参
      • parmas 传参
    • 3.5 路由的Props配置
    • 3.6 【replace属性】
    • 3.7 【编程式路由导航 和 重定向】
  • 4.【pinia】(建议看官网)
    • 4.1 在Vue3项目中引入pinia
    • 4.2 官网的一个基础示例
    • 4.3 【定义一个Store】
      • 【Option Store】
      • 【Setup Store】
    • 4.4【使用一个Store】
    • 4.5 【State】
      • 重置 state
      • 变更 state
      • 订阅 state
    • 4.6 【Getter】
      • getter 拿什么来计算?
      • 向 getter 传递参数
    • 4.7【Action】
      • 订阅 action
  • 5.组件通信
    • 5.1. 【props】
    • 5.2 【mitt】
    • 5.3 【v-model】
      • 原生input上使用v-model
      • 在一个输入组件上使用v-model
    • 5.4【$attrs 】
    • 5.5 【\$refs、$parent】
    • 5.6 【provide、inject】
    • 5.7 【slot】
      • 1. 默认插槽
      • 2. 具名插槽
      • 3. 作用域插槽
  • 6.其它 API
    • 6.1【shallowRef 与 shallowReactive 】
      • `shallowRef`
      • `shallowReactive`
      • 总结
    • 6.2【readonly 与 shallowReadonly】
      • **`readonly`**
      • **`shallowReadonly`**
    • 6.3【toRaw 与 markRaw】
      • `toRaw`
      • `markRaw`
    • 6.4【customRef】
  • 7.Vue3新组件
    • 7.1 【Teleport】
    • 7.2 【Suspense】
    • 7.3【全局API转移到应用对象】
    • 7.4【其他】

开篇总结

首先声明:这篇笔记中是在学习禹神最新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 语法糖

    注意:子组件中不用编写任何东西,是不受到任何打扰的

    【第二步】孙组件中使用inject配置项接受数据。

    
    
    
                        
                        

你可能感兴趣的:(vue.js,学习,笔记)