Vue3学习 创建Vue3项目、ref、reactive、setup、Vue3生命周期、Composition API

目录

1.创建Vue3.0工程

1.1 使用 vue-cli 创建

1.2 使用 vite 创建

1.3 分析Vue3结构

2.常用 Composition API

2.1 拉开序幕的setup函数

2.2 ref函数

2.3 reactive函数

2.4 Vue3.0中的响应式原理

2.4.1 vue2.x的响应式

2.4.2 Vue3.0的响应式

2.5 reactive对比ref

2.6 setup的两个注意点

2.7 计算属性与监视

2.7.1 computed函数

2.7.2 watch函数

2.7.3 watchEffect函数

2.8 生命周期

2.9 自定义hook函数

2.10 toRef

3.其它 Composition API

3.1 shallowReactive 与 shallowRef

3.2 readonly 与 shallowReadonly

​编辑

3.3 toRaw 与 markRaw

3.4 customRef

3.5 provide 与 inject

3.6 响应式数据的判断

4.Composition API 的优势

4.1 Options API 存在的问题

5.新的组件

5.1 Fragment

5.2 Teleport

5.3 Suspense

6.其他

6.1 全局API的转移

6.2 其他改变

---

1.创建Vue3.0工程

1.1 使用 vue-cli 创建

官方文档：创建一个项目 | Vue CLI

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

1.2 使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

vite官网：Vite中文网

• 什么是vite？—— 新一代前端构建工具。

• 优势如下：

  • 开发环境中，无需打包操作，可快速的冷启动。

  • 轻量快速的热重载（HMR）。

  • 真正的按需编译，不再等待整个应用编译完成。

• 传统构建 与 vite构建对比图

• 传统构建工具：在开发环境中，传统的构建工具（如 Webpack）通常需要先对整个应用进行打包，生成一个或多个 bundle 文件，然后再启动开发服务器。这个过程可能需要几秒到几分钟不等，尤其是在项目规模较大时。
• Vite：Vite 采用了一种不同的策略。它直接利用浏览器的原生 ES 模块（ESM）支持，在开发服务器启动时，不会对整个应用进行打包。相反，Vite 会启动一个轻量级的开发服务器，并根据浏览器的请求，按需编译和提供模块。这意味着当你访问一个页面时，只有该页面所需的模块会被编译和提供，而不是整个应用。

1.3 分析Vue3结构

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数

import { createApp } from 'vue'

import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)

const app = createApp(App)

//挂载，页面才会显示

app.mount('#app')

注意事项：

Vue3组件中的模板结构<template>可以没有根标签

2.常用 Composition API

官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

2.1 拉开序幕的setup函数

1. 理解：Vue3.0中一个新的配置项，值为一个函数。

2. setup是所有Composition API（组合API）“ 表演的舞台 ”。

3. 组件中所用到的：数据、方法等等，均要配置在setup中。

4. setup函数的两种返回值：

   1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

5. 注意点：

   1. 尽量不要与Vue2.x配置混用

      • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。

      • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。

      • 如果有重名, setup优先。

   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise对象, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

2.2 ref函数

• 作用: 定义一个响应式的数据

• 语法: const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象），是一个RefImpl。

  • JS中操作数据： xxx.value

  • 模板中读取数据: 不需要.value，直接：<div>{ {xxx}}</div>

• 注意事项：

  • 接收的数据可以是：基本类型、也可以是对象类型。

  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

2.3 reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

• reactive定义的响应式数据是“深层次的”。

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

// 因为p是代理对象，因此p下的属性都具备响应式  
let p = reactive({
      schoolName: 'GGS',
      schoolId: '3022',
      job: {
        type: 'Java高级工程师',
        saraly: '20k'
      }
    })

2.4 Vue3.0中的响应式原理

2.4.1 vue2.x的响应式

• 实现原理：

  • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

  • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

    Object.defineProperty(data, 'count', {
        get () {}, 
        set () {}
    })

• Vue2存在问题：

  • 新增属性、删除属性（delete 对象.属性名），界面不会更新。没有响应式

  • 直接通过下标修改数组, 界面不会自动更新。没有响应式

• 解决问题：

  • vm.$set(对象/数组，属性名/索引值，属性值)

  • Vue.set(对象/数组，属性名/索引值，属性值)