首先,在文章正式开始之前,让我们回忆一下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语法糖简写的代码
<Son :value="msg" @input="msg=$event" />
在vue3.0中v-model语法糖有所调整:
<Son:modelValue="msg" @update:modelValue="msg=$event"/>
总结: 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