Vue学习记录（九）--- Vue3

为什么要学习 Vue3

• 优势
• 
• 

使用 create-vue 搭建 vue3 项目

• 
• create-vue
  • create-vue 是 vue 官方最新的脚手架工具，底层是 vite
  • vue-cli 的底层是 webpack
• 使用 create -vue 创建项目 -
  1. 环境条件：node.js 版本 在16.0及以上
  2. 创建一个 Vue 应用：npm init vue@latest
• 快快快，特别快
• 

项目目录和关键文件

• 
• main.js 文件中的区别
  • 本质上是对创建 Vue 应用实例进行了一个封装，封装为一个函数
  • 类似还有 createRouter() createStore()
  • 

组合式 api -- setup 选项

• setup 的写法和时机
  • 
  1. 执行时机早于 beforeCreated
  2. setup 函数中获取不到 this
• setup 选项中写代码的特点
  • setup 中提供的任何数据和函数必须 return
  • 
• 当方法和变量多了之后很麻烦，解决方法
• 

reactive 和 ref 函数

reactive()

• 作用：
• 接收对象类型数据参数的传入，然后返回一个响应式对象
• 核心步骤
  • 
  1. 从 vue 包中导入 reactive 函数
  2. 在 <script setup> 中调用 reactive 函数并传入类型为对象的初始值，并使用变量接收

ref()

• 作用：
• 接收简单类型或者对象类型的数据并返回一个响应式的对象
• 核心步骤
  • 
  1. 从 vue 包中导入 ref 函数
  2. 在 <script setup> 中调用 ref 函数并传入初始值，使用变量接收 ref 函数的返回值
• 本质: 是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
• 底层：包成复杂类型之后，再借助 reactive 实现的响应式
• 注意：脚本中访问数据需要使用 .value，template 中访问数据不需要加（自动帮我们扒了一层）
  • 

computed计算属性

• 基本思想与 Vue2 的完全一致，组合式 api 下的计算属性只是修改了写法
• 核心步骤
  • 
  1. 导入 computed 函数
  2. 执行函数在回调参数中 return 基于响应式数据做计算的值，用变量接收
• 最佳实践
  1. 计算属性中不应该有‘副作用’：如异步请求、修改dom等
  2. 避免直接修改计算属性的值：计算属性应该是只读的

watch 监听函数

• 作用：监听一个或多个数据的变化，数据变化时立即执行回调函数
• 两个额外参数：1. immediate(立即执行) 2. deep（深度监听）

监听单个数据

• 步骤：
  1. 导入 watch 函数
  2. 执行 watch 函数传入要监听的响应式数据 (ref对象) 和回调函数
  • -
  • 

监听多个数据

• 说明：同时监听多个响应式数据的变化，不管哪个数据变化都需要执行回调函数
  • 
  • 

immediate 参数

• 在监听器创建时立刻触发回调
  • 
  • 
  • 

deep 参数

• 说明：watch 默认为浅层监视，即简单类型的响应式数据可以直接监视，但无法监视到复杂类型内部数据的变化
• 

精确监听对象的某个属性

• 需求：在不开启 deep 的条件下，监听 age 的变化
• 
• 

生命周期函数

• 
• 

父子组件通信

父传子

• defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换
• 

子传父

• 基本思想
  1. 父组件中给子组件标签通过@绑定事件
  2. 子组件内部通过 emit方法触发事件
• 

模板引用 + defineExpose宏函数

模板引用

• 概念：通过 ref标识 获取真实的 dom 对象或者组件实例对象
• 步骤
  • 通过调用 ref函数 生成一个 ref对象
  • 通过 ref标识绑定 ref 对象到标签
  • 

defineExpose()

• 背景：默认情况下在 <script setup> 语法糖下组件内部的属性和方法是不开放给父母组件访问的
• 作用：可以通过 defineExpose 编译宏指定哪些属性和方法允许访问
  • 

inject + provide

• 作用：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
• 
• 作用
  1. 顶层组件通过 provide 函数提供数据
  2. 底层组件通过 inject 函数获取数据
  • 
  • 顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据
  • 

Vue3.3 新特性 - defineOptions

• 背景：
• 
• 
• 
• 解决
• 

Vue3 中的 v-model 和 defineModel

• 
• 使用 defineModel 前
  • 
• 使用 的 defineModel 后
  • 

Pinia

Pinia 简介

• 

Vue3 中导入pinia

• 步骤
  • 创建 vue 项目：npm create vue@latest
  • 使用 npm install 安装相关依赖
  • 安装pinia：npm install pinia
  • 在 mian.js 中导入并安装有关 pinia 的依赖
    • 

pinia 的基本语法

• 

storeToRefs

• 
• 
• 

pinia 持久化插件

• 官网：prazdevs.github.io/pinia-plugi…
• 安装步骤参考官网
•