Vue3 学习笔记 —— （一）深入理解组合式 API

目录

image.png

[toc](Vue3 学习笔记梳理)
Author：Gorit
Date：2021/4/24
Refer：网易云课堂
2021年发表博文： 17/50

Vue3 学习

学习文档
如果是第一次接触 Vue3，可以看这个 Vue3 初体验

零、Vue3.0 与 Vue2.x 的性能对比

1. 框架内部做了大量的性能优化，包括虚拟 DOM，编译模板、Proxy 的新数据监听，更小的打包文件等
2. 新的组合式 API （composition-api），更适合大型项目的编写方式
3. 对 TypeScript 支持更好，去除繁琐的 this 操作，更强大的类型推导

一、搭建环境

1. node 8.9.0 以上
2. 安装好 npm
3. 安装 vue
4. 安装 Vue Cli4 脚手架

二、创建项目

1. vue create vue3-demo

image

2. 其他的选择默认配置即可
3. 安装 yarn ：cnpm i yarn -g (提升安装速度)
4. 测试：yarn --versin

项目结构介绍

• package.json 项目全局管理
• node_modules 项目依赖包，占用大量空间
• public 入口文件
• src：main.js 为入口文件，项目代码在这里编写

三、Vue3 Composition API

Vue3 是向下兼容 Vue2 API 的，但是 Vue3 中提供了一种全新的 Composition API

3.1 ref() or setup() ? reactive()

setup() 作为 Vue3.0 的入口函数

reactive() 作声明式渲染，用来响应数据

ref() 显示响应式数据，配合 reactve()

3.1.1 非响应式数据显示 （reactive）

直接返回数据

3.1.2 响应式数据显示 （reactive）

通过对象的形式

3.1.3 响应式数据展示（整合 ref() ）

因此，我们既要响应式，又要展示数据，折中的方案是直接使用 ref

3.1.4 小案例：实现一个计数器

3.2 toRefs() ? toRef()

在上面的代码中，我们使用 ref() 和 reactive() 分别可以实现响应式的数据，我们是否可以两者一起使用呢？

3.2.1 ref() 和 reactive() 连用

3.2.2 使用 toRefs() 和 reactive()

3.2.3 使用 toRef() 和 reactive()

ref 和 reactive 分别是两种响应式数据的变量风格，具体看个人情况使用

3.3 computed 计算属性

3.3.1 配合 ref() 使用 实现响应式

3.3.2 配合 toRefs() 和 reactive() 实现响应式

3.4 定义函数

3.4.1 函数与 watch

3.4.2 Vue3.0 函数与生命周期函数

文档

新的生命周期函数钩子要在 setup() 中使用

1. onMounted
2. onUpdated
3. onUnmounted

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

四、Vue3 组件化（拆分+传值+注册）

这里主要是回顾 组件化编程

拆分的方式同 Vue2，注册 + 引入
组件拆分的案例我们沿用上面的计数器来实现 （参考 3.1.4 小节的内容）

4.1 组件拆分

预览效果：

在这里插入图片描述

编码如下：

1. 定义一个新的 vue 文件，命名为 CounterView.vue 文件
2. 使用 props 接受父组件 App.vue 穿过来的值

3. 修改父组件 App.vue，改为引用 CounterView.vue ，并注册为组件

4.2 事件拆分

这里我们在上面的基础上，将 setup() 中定义的事件，拆分至另一个新的 vue 文件
首先我们需要补充一些前置概念：

1. 在 setup() 中是没有 this 关键字的

2. setup() 是可以接受两个参数的 （props, context），然后我们打印接受到的值如下

   
   
   在这里插入图片描述
3. cotext 中，可以看到 emit 关键字，是不是很熟悉，vue2 中我们要子组件传事件给父组件，用的是 this.$emit("事件名称", '值"), 在 Vue3 中也会用到类似的，后面会有具体的演示
4. 编码如下：

在子组件完成事件注册

在父组件完成事件调用

五、总结

我们来回顾一下所学内容

1. setup(props, context)， setup() 是代码的入口
2. 响应式 API：reactive() 、ref()、toRef()、toRefs()
3. 计算属性 computed 和 watch 侦听器的使用
4. 组件化思想