• vue3详解

    认识Vue3

    1. Vue2 选项式 API vs Vue3 组合式API

    特点：

    1. 代码量变少

    2. 分散式维护变成集中式维护

    2. Vue3的优势

    使用create-vue搭建Vue3项目

    1. 认识create-vue

    create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

    2. 使用create-vue创建项目

    前置条件 - 已安装16.0或更高版本的Node.js

    执行如下命令，这一指令将会安装并执行 create-vue

    npm init vue@latest

    熟悉项目和关键文件

    组合式API - setup选项

    1. setup选项的写法和执行时机

    写法

    执行时机

    在beforeCreate钩子之前执行

    2. setup中写代码的特点

    在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用

    3.

    组合式API - reactive和ref函数

    1. reactive

    接受对象类型数据的参数传入并返回一个响应式的对象

    
​

    2. ref

    接收简单类型或者对象类型的数据传入并返回一个响应式的对象

    
​

    3. reactive 对比 ref

    1. 都是用来生成响应式数据

    2. 不同点

      1. reactive不能处理简单类型的数据

      2. ref参数类型支持更好，但是必须通过.value做访问修改

      3. ref函数内部的实现依赖于reactive函数

    3. 在实际工作中的推荐

      1. 推荐使用ref函数，减少记忆负担，小兔鲜项目都使用ref

    组合式API - computed

    计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

    组合式API - watch

    侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听

    1. 侦听单个数据

    2. 侦听多个数据

    侦听多个数据，第一个参数可以改写成数组的写法

    3. immediate

    在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

    4. deep

    通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

    组合式API - 生命周期函数

    1. 选项式对比组合式

    2. 生命周期函数基本使用

    1. 导入生命周期函数

    2. 执行生命周期函数，传入回调

    
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})

    3. 执行多次

    生命周期函数执行多次的时候，会按照顺序依次执行

    
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})

onMounted(()=>{
  // 自定义逻辑
})

    组合式API - 父子通信

    1. 父传子

    基本思想

    1. 父组件中给子组件绑定属性

    2. 子组件内部通过props选项接收数据

    2. 子传父

    基本思想

    1. 父组件中给子组件标签通过@绑定事件

    2. 子组件内部通过 emit 方法触发事件

    组合式API - 模版引用

    概念：通过 ref标识 获取真实的 dom对象或者组件实例对象

    1. 基本使用

    实现步骤：

    1. 调用ref函数生成一个ref对象

    2. 通过ref标识绑定ref对象到标签

    2. defineExpose

    默认情况下在