vue3学习笔记

一、创建 vue3 工程

对前端感兴趣的可以关注一下我的博客，会持续更新前端相关的知识和学习笔记，一起学习。

说明：vue2与vue3的学习都是跟随B站尚硅谷张天禹老师学习的。

与 vue2 相同，使用 vue create 项目名字 初始化，但配置选择 vue3

1.Vue3 带来了什么

1.性能的提升

• 打包大小减少 41%

• 初次渲染快 55%, 更新渲染快 133%

• 内存减少 54%

2.源码的升级

• 使用 Proxy 代替 defineProperty 实现响应式

• 重写虚拟 DOM 的实现和 Tree-Shaking

  …

3.拥抱 TypeScript

• Vue3 可以更好的支持 TypeScript

4.新的特性

1. Composition API（组合 API）

   • setup 配置
   • ref 与 reactive
   • watch 与 watchEffect
   • provide 与 inject
   • …

2. 新的内置组件

   • Fragment
   • Teleport
   • Suspense

3. 其他改变

   • 新的生命周期钩子
   • data 选项应始终被声明为一个函数
   • 移除 keyCode 支持作为 v-on 的修饰符

2.分析项目工程结构

vue2

vue3

首先是分析项目的入口文件 main.js，对比发现，vue3 中引入的不再是 Vue 构造函数了，而是一个名为 createApp 的工厂函数。构造函数与工厂函数最大的区别就是构造函数需要使用 new 关键字调用，而工厂函数不需要。

同时创建应用实例对象时不再是 vm，而是 app，并且 app 身上的属性与方法比 vm 少。

然后是 App 组件，vue3 与 vue2 不同，vue3 组件中的模板结构可以没有根标签

vue2

vue3

二、常用 Composition API

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

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.ref 函数

• 作用: 定义一个响应式的数据
• 语法: const xxx = ref(initValue)
  • 创建一个包含响应式数据的引用对象（reference 对象，简称 ref 对象）。
  • JS 中操作数据： xxx.value
  • 模板中读取数据: 不需要.value，直接：
    {{xxx}}
• 备注：
  • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型的数据：内部 “ 求助 ” 了 Vue3.0 中的一个新函数—— reactive函数。

3.reactive 函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象，简称 proxy 对象）
• reactive 定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

4.Vue3.0 中的响应式原理

vue2.x 的响应式

• 实现原理：

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

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

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

• 存在问题：

  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。

Vue3.0 的响应式

• 实现原理:

  • 通过 Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

  • 通过 Reflect（反射）: 对源对象的属性进行操作。

  • MDN 文档中描述的 Proxy 与 Reflect：

    • Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

    • Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

      new Proxy(data, {
        // 拦截读取属性值
        get(target, prop) {
          return Reflect.get(target, prop);
        },
        // 拦截设置属性值或添加新属性
        set(target, prop, value) {
          return Reflect.set(target, prop, value);
        },
        // 拦截删除属性
        deleteProperty(target, prop) {
          return Reflect.deleteProperty(target, prop);
        },
      });
      
      proxy.name = "tom";
      

5.reactive 对比 ref

• 从定义数据角度对比：
  • ref 用来定义：基本类型数据。
  • reactive 用来定义：对象（或数组）类型数据。
  • 备注：ref 也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
• 从原理角度对比：
  • ref 通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  • reactive 通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
• 从使用角度对比：
  • ref 定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
  • reactive 定义的数据：操作数据与读取数据：均不需要.value。

6.setup 的两个注意点

• setup 执行的时机
  • 在 beforeCreate 之前执行一次，this 是 undefined。
• setup 的参数
  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit。