Vue3的常用api

首先,在文章正式开始之前,让我们回忆一下vue2的相关特点

在vue2中,我们会在data里面去定义响应式数据,来对数据进行保存,在methods里面,我们一般会写方法去进行对数据的增删改查,这一种方法我们将其称为Options Api(选项api),但是在vue3中,我们会使用Composition Api(组合api),这两种有什么区别和好处呢?放一张图,可以更深刻的去理解两者有什么异同,vue3有什么好处.

什么是选项API写法：Options ApI

• 咱们在vue2.x项目中使用的就是 选项API 写法
  • 代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散。
• 优点：易于学习和使用，写代码的位置已经约定好
• 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。
• 补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。

 

什么是组合API写法：Compositon API

• 咱们在vue3.0项目中将会使用 组合API 写法
  • 代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）
• 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护
• 缺点：需要有良好的代码组织能力和拆分逻辑能力，PS：大家没问题。
• 补充：为了能让大家较好的过渡到vue3.0的版本来，也支持vue2.x选项API写法

在正式开始vue3的学习前,需要去认识一下vite

vite是什么：官方文档(opens new window)https://cn.vitejs.dev/

• 它是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。
• 相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。

vite基本使用：

• 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称
• 安装依赖 npm i 或者 yarn
• 启动项目 npm run dev 或者 yarn dev

总结： vite是什么？

• 使用vite创建项目学习vue3语法，使用vue-cli创建项目正式开发。

然后就可以开始vue3部分api的正式学习了

-----------------------------------------一道华丽的分割线--------------------------------------------------

NO.1组合API-setup函数

使用细节：

• setup 是一个新的组件选项，作为组件中使用组合API的起点。
• 从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
• 这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
• 在模版中需要使用的数据和函数，需要在 setup 返回。

总结： setup 组件初始化之前执行，它返回的数据和函数可在模版使用。

提到这就需要去回忆一下vue2中的生命周期钩子函数了.

回顾vue2.x生命周期钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

认识vue3.0生命周期钩子函数

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

总结： 组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。 

在这里需要注意,我们需要使用的api都要去按需导入. 

NO.2 组合API-reactive函数

定义响应式数据：

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

在这里,vue3不同于vue2,我们所需要的响应式数据都要去自己定义了

总结： 通常是用来定义响应式对象数据

NO.3 组合API-toRef函数 

定义响应式数据：

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

NO.4 组合API-toRefs函数 

定义响应式数据：

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。

NO.5 组合API-ref函数

定义响应式数据：

• ref函数，常用于简单数据类型定义为响应式数据
• 再修改值，获取值的时候，需要.value
• 在模板中使用ref申明的响应式数据，可以省略.value

使用场景：

• 当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可
• 其他情况使用ref

知识运用小demo

基本步骤：

• 记录鼠标坐标
  • 定义一个响应式数据对象，包含x和y属性。
  • 在组件渲染完毕后，监听document的鼠标移动事件
  • 指定move函数为事件对应方法，在函数中修改坐标
  • 在setup返回数据，模版中使用
• 累加1功能
  • 定义一个简单数据类型的响应式数据
  • 定义一个修改数字的方法
  • 在setup返回数据和函数，模板中使用

 

NO.6 组合API-computed函数

定义计算属性：

• computed函数，是用来定义计算属性的，计算属性不能修改。

 

 

目的：让计算属性支持双向数据绑定。

总结：计算属性两种用法

• 给computed传入函数，返回值就是计算属性的值
• 给computed传入对象，get获取计算属性的值，set监听计算属性改变。

NO.7 组合API-watch函数

定义计算属性：

• watch函数，是用来定义侦听器的

监听ref定义的响应式数据

监听多个响应式数据数据

监听reactive定义的响应式数据

监听reactive定义的响应式数据，某一个属性

深度监听

默认执行

 

NO.8 组合API-ref属性

获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开

获取单个DOM或者组件

获取v-for遍历的DOM或者组件

 

总结：

• 单个元素：先申明ref响应式数据，返回给模版使用，通过ref绑定数据

• 遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模版使用，通过ref绑定这个函数

  • 有一个边界问题：组件更新的时候会重复的设置dom元素给数组：

NO.9 组合API-父子通讯

 

 

 

扩展：

• 在vue2.x的时候 .sync 除去v-model实现双向数据绑定的另一种方式

• 在vue3.0的时候，使用 v-model:money="money" 即可

总结：

• 父传子：在setup种使用props数据 setup(props){ // props就是父组件数据 }
• 子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ // emit 就是触发事件函数 }
• 在vue3.0中 v-model 和 .sync 已经合并成 v-model 指令

NO.10 组合API-依赖注入

使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。

 

 

总结：

• provide函数提供数据和函数给后代组件使用
• inject函数给当前组件注入provide提供的数据和函数

NO.11 补充-v-model语法糖

在vue2.0中v-mode语法糖简写的代码 

在vue3.0中v-model语法糖有所调整：

 

总结： vue3.0封装组件支持v-model的时候，父传子:modelValue 子传父 @update:modelValue

补充： vue2.0的 xxx.sync 语法糖解析 父传子 :xxx 子传父 @update:xxx 在vue3.0 使用 v-model:xxx 代替。

最后总结一下在vue中组件通信的方式:

1.父子组件:porps + $emit()

2.兄弟组件:eventbus

3.大范围数据共用:vuex

4.子代组件:provide + inject (依赖注入)

6.自定义传值:v-model