• vue3.0组合式api使用总结

    ⭐️ 作者：船长在船上
    🚩 主页：来访地址船长在船上的博客
    🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习

    🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好了，在这里博主不胜感激！！！

    如有疑问可以留言、评论，看到后会及时回复。  
     

    16acfaa15de640c3a0132a9b3f2c5bc6.png

    目录

    1.setup使用

    2.生命周期函数

    Vue应用程序中有4个主要事件

    3.vuex

    4.toRef介绍

    5.ref介绍

    6.组件传值

    7.shallowRef和shallowReactive

    8.watchEffect

    9.watch侦听器

    10.computed

    11.reactive介绍

    12.toRefs介绍

    vue2开发缺点和vue3开发优点

    • vue2代码冗余，杂乱
    • vue3则可以把相关的功能代码抽离分割在一起，方便开发者快速阅读

    1.setup使用

    • setup函数是 Composition API（组合API）的入口
    • setup是启动页面后会自动执行的一个函数
    • 项目中定义的所有变量，方法等都需要在setup中
    • 在setup函数中定义的变量和方法最后都需要 return 出去， 否则无法在视图层中使用
    1. setup(){
    2.   console.log('自动执行')
    3.   const name = '林一'
    4.   const age = 20
    5.   const company = '阿里巴巴'
    6.   
    7.   const btn =  ()=>{
    8.       const res = `我叫${name},今年${age}岁了,在${company}上班`
    9.       console.log(res)
    10.   }
    11.  
    12.   // 计算属性
    13.   // 侦听器
    14.   return {name,btn}
    15.  }

    2.生命周期函数

    • onBeforeMount —— 在挂载开始之前被调用
    • onMounted —— 组件挂载时调用
    • onBeforeUpdate —— 数据更新时调用
    • onUpdated —— 数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子
    • onBeforeUnmount —— 在卸载组件实例之前调用
    • onErrorCaptured —— 当捕获一个来自子孙组件的错误时被调用

    Vue应用程序中有4个主要事件

    • 创建 — 在组件创建时执行
    • 挂载 — DOM 被挂载时执行
    • 更新 — 当响应数据被修改时执行
    • 销毁 — 在元素被销毁之前立即运行
    import { onBeforeMount, ....... } from 'vue'

    3.vuex

    • 同vue2一致
    • 需要安装，引入
    1. //安装
    2. npm install vuex@next --save
    3. //引入
    4. import {useStore} from 'vuex'

    4.toRef介绍

    • toRef也可以创建一个响应式数据
    • ref本质是拷贝粘贴一份数据，脱离了与原数据的交互
    • ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层
    • toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
    • 使用需引入
    1. import {toRef} from 'vue'
    2. //toRef接收两个参数，第一个参数是要操作的对象，第二个参数是对象的某个属性
    3. const obj = {name:'林一'}
    4. toRef(obj,'name')
    1. setup(){
    2.      
    3.     const obj = {name:'林一',age:40}
    4.     //  const res = ref(obj.name)
    5.     const res = toRef(obj,'name')
    6.     const btn = ()=>{
    7.          res.value = '林二'
    8.          console.log(res)
    9.          console.log(obj)
    10.      }
    11.     return {res,btn}
    12.  }

    5.ref介绍

    • ref 为我们的值创建了一个响应式引用
    • 使用需引用
    1. import {ref} from 'vue'//组合式api
    2. ref('林一')

    • 当ref里的值发生改变时，视图层会自动更新
    • ref可操作基本数据类型，也可以操作复杂数据类型：对象，数组
    • 建议：ref用来操作基本数据类型：数字，字符串
    1. setup(){
    2.      const name = ref('林一')
    3.      const age = ref(52)
    4.      const company = ref('阿里巴巴')
    5.     //  对象类型
    6.      const obj = ref({
    7.          taobao:'淘宝',
    8.          tamll:'天猫'
    9.      })
    10.     //  数组类型
    11.     const arr = ref([
    12.         {
    13.             xiami:'林二',
    14.             huabei:'京东'
    15.         }
    16.     ])
    17.      const btn = ()=>{
    18.         //  响应对象类型
    19.         //  name.value = '林三'
    20.         //  obj.value.taobao = '淘宝000'
    21.         //  console.log(obj)
    22.         // 响应数组类型
    23.         arr.value[0].xiami = '京东000'
    24.         console.log(arr)
    25.      }
    26.      return {name,age,company,btn,obj,arr}
    27.  }

    6.组件传值

    1. //第一种：进入页面即刻传值（祖孙传值）
    2. const p1 = reactive({name:'林一',age:52})
    3. provide('p',p1)//祖传
    4.  
    5. const res = inject('p')//孙收
    6.  
    7. //第二种：点击传值
    8. <Vue ref="val"/>//引入子组件，使用ref调用该子组件
    9. const val = ref()
    10. const p1 = reactive({name:'林一',age:52})
    11. function btn(){
    12.     val.value.receive(p1)
    13. }

    7.shallowRef和shallowReactive

    • shallowRef只处理基本类型数据
    • shallowReactive只处理第一层数据
    • 使用需引入
    import { shallowReactive,shallowRef } from 'vue'
    1. setup() {
    2.         //shallowReactive:只处理第一层的数据
    3.         const p1 = shallowReactive({
    4.             name:'林一',
    5.             product:{
    6.                 taobao:5
    7.             }
    8.         })
    9.         // shallowRef:只处理基本类型数据
    10.         const p2 = shallowRef({
    11.             val:1
    12.         })
    13.         console.log(p2)
    14.         return{...toRefs(p1),p2}
    15.     },

    8.watchEffect

    • watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖
    • watch 可以获取到新值与旧值（更新前的值），而  watchEffect是拿不到的 
    •  watchEffect不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watchEffect 只能监听指定的属性而做出变更
    • 使用需引入
    import { watchEffect } from 'vue'
    1. setup() {
    2.         const p1 = ref(0)
    3.         const p2 = ref(1)
    4.         const p3 = reactive({
    5.             name:'林一',
    6.             age:50,
    7.             product:{
    8.                 wx:14
    9.             }
    10.         })
    11.        const S =  watchEffect(()=>{
    12.             const a = p1.value
    13.             const b = p2.value
    14.             console.log('进入页面我就执行')
    15.         })
    16.         S()//停止监听
    17.         return {p1,p2,p3}
    18.     },

    9.watch侦听器

    • 与vue2一致，均是用来侦听数据变化的
    • 使用需引入
    mport { watch } from 'vue'
    1. setup() {
    2.         const p1 = ref(0)
    3.         const p2 = ref(1)
    4.         const p3 = reactive({
    5.             name:'林一',
    6.             age:50,
    7.             product:{
    8.                 wx:14
    9.             }
    10.         })
    11.         // 一：侦听ref的基本数据
    12.         // watch(p1,(newVal,oldVal)=>{
    13.         //     console.log(newVal,oldVal)
    14.         // },{immediate:true})//{immediate:true}立即侦听
    15.  
    16.         // 二：侦听多个ref响应数据
    17.         // watch([p1,p2],(newVal,oldVal)=>{
    18.         //     console.log(newVal,oldVal)
    19.         // })
    20.  
    21.         // 三：侦听整个reactive定义的数据:只能监听到最新的结果，之前的结果监听不到
    22.         // watch(p3,(newVal,oldVal)=>{
    23.         //     console.log(newVal,oldVal)
    24.         // })
    25.         
    26.         // 四：侦听reactive定义的数据中的某一个值:可以监听到,无论层级有多深
    27.         watch(()=>p3.product.wx,(newVal,oldVal)=>{
    28.             console.log(newVal,oldVal)
    29.         })
    30.         return {p1,p2,p3}
    31.     },

    10.computed

    • 与vue2一致，均是用来监听数据变化
    • 使用需引入
    import { computed } from 'vue'
    1. setup() {
    2.  
    3.     const mayun = ''
    4.     const huateng = ''
    5.     const res = reactive({linyi,liner})
    6.  
    7.     // 计算年龄总和
    8.     const sum = computed({
    9.         get(){
    10.             return res.linyi + res.liner
    11.         },
    12.         set(val){
    13.             console.log(val)
    14.         }
    15.     })
    16.      
    17.     return {...toRefs(res),sum}
    18. }

    11.reactive介绍

    • reactive同样为我们的值创建了一个响应式引用
    • 定义基本普通类型数据不能用reactive，用ref
    • reactive主要定义复杂数据类型，比如数组，对象
    • reactive可响应深层次的数据，比如多维数组
    • reactive返回一个响应式的proxy对象
    • 使用需引入
    1. import { reactive } from 'vue'
    2. reactive({name:'林一'})
    1. setup(){
    2.     //  const name = reactive({name:'林一'})
    3.     //  const age = reactive({age:20})
    4.     //  const company = reactive({company:'阿里巴巴'})
    5.     // //  深层次响应式
    6.     //  const pro = reactive({
    7.     //      a:'淘宝',
    8.     //      b:'天猫',
    9.     //      c:{
    10.     //          d:'京东',
    11.     //          e:'顺丰'
    12.     //      }
    13.     //  })
    14.      const btn = ()=>{
    15.     //    name.name = '林二'
    16.     //    age.age = 40
    17.     //    pro.c.d = '京东0000'
    18.           res.name = '林三'
    19.      }
    20.     // 共用一个reactive
    21.     const name = '林四'
    22.     const age = 52
    23.     const company = '阿里巴巴'
    24.     const res = reactive({name,age,company})
    25.  
    26.  
    27.      return {res,btn}
    28.  }

    12.toRefs介绍

    • 用于批量设置多个数据为响应式数据
    • toRefs与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
    • toRefs还可以与其他响应式函数交互，更加方便处理视图层数据
    • 使用需引入
    1. import {toRefs} from 'vue'
    2. toRefs(obj)
    1. setup(){
    2.     const obj = {name:'林一',age:40}
    3.     const refs = reactive(obj)
    4.     // const res = toRefs(refs)
    5.      const btn = ()=>{
    6.         //  res.name.value = '林三'
    7.         //  console.log(res)
    8.          console.log(refs)
    9.          refs.name = '林二'
    10.          console.log(refs)
    11.          console.log(obj)
    12.      }
    13.      return {...toRefs(refs),btn}
    14.  }

    👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。  

  • 相关阅读:
    这三个步骤让你知道WPS如何转换成WORD文档
    【Proteus仿真】【51单片机】电蒸锅温度控制系统
    牛客前端宝典——刷题 ##Day10
    基于paddlehub 未戴口罩检测算法
    C++编写的局域网tcp license认证服务
    队列的简单实现
    CentOS 7使用RPM包安装MySQL5.7
    UDS知识整理（二）：UDS诊断服务简介
    Matlab数值计算（多项式插值）
    Java——ArrayList类的常用方法
  • 原文地址：https://blog.csdn.net/SmartJunTao/article/details/126152824