vue3.0组合式api的使用小结

目录

• 1.setup使用
• 2.生命周期函数
• 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 出去， 否则无法在视图层中使用

setup(){
  console.log('自动执行')
  const name = '林一'
  const age = 20
  const company = '阿里巴巴'

  const btn =  ()=>{
      const res = `我叫${name},今年${age}岁了,在${company}上班`
      console.log(res)
  }

  // 计算属性
  // 侦听器
  return {name,btn}
 }

2.生命周期函数

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

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

• 创建 — 在组件创建时执行
• 挂载 — DOM 被挂载时执行
• 更新 — 当响应数据被修改时执行
• 销毁 — 在元素被销毁之前立即运行

import { onBeforeMount, ....... } from 'vue'

3.vuex

• 同vue2一致
• 需要安装，引入

//安装
npm install vuex@next --save
//引入
import {useStore} from 'vuex'

4.toRef介绍

• toRef也可以创建一个响应式数据
• ref本质是拷贝粘贴一份数据，脱离了与原数据的交互
• ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层
• toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
• 使用需引入

import {toRef} from 'vue'
//toRef接收两个参数，第一个参数是要操作的对象，第二个参数是对象的某个属性
const obj = {name:'林一'}
toRef(obj,'name')

setup(){

    const obj = {name:'林一',age:40}
    //  const res = ref(obj.name)
    const res = toRef(obj,'name')
    const btn = ()=>{
         res.value = '林二'
         console.log(res)
         console.log(obj)
     }
    return {res,btn}
 }

5.ref介绍

• ref 为我们的值创建了一个响应式引用
• 使用需引用

import {ref} from 'vue'//组合式api
ref('林一')

• 当ref里的值发生改变时，视图层会自动更新
• ref可操作基本数据类型，也可以操作复杂数据类型：对象，数组
• 建议：ref用来操作基本数据类型：数字，字符串

setup(){
     const name = ref('林一')
     const age = ref(52)
     const company = ref('阿里巴巴')
    //  对象类型
     const obj = ref({
         taobao:'淘宝',
         tamll:'天猫'
     })
    //  数组类型
    const arr = ref([
        {
            xiami:'林二',
            huabei:'京东'
        }
    ])
     const btn = ()=>{
        //  响应对象类型
        //  name.value = '林三'
        //  obj.value.taobao = '淘宝000'
        //  console.log(obj)
        // 响应数组类型
        arr.value[0].xiami = '京东000'
        console.log(arr)
     }
     return {name,age,company,btn,obj,arr}
 }

6.组件传值

//第一种：进入页面即刻传值（祖孙传值）
const p1 = reactive({name:'林一',age:52})
provide('p',p1)//祖传

const res = inject('p')//孙收

//第二种：点击传值
<Vue ref="val"/>//引入子组件，使用ref调用该子组件
const val = ref()
const p1 = reactive({name:'林一',age:52})
function btn(){
    val.value.receive(p1)
}

7.shallowRef和shallowReactive

• shallowRef只处理基本类型数据
• shallowReactive只处理第一层数据
• 使用需引入

import { shallowReactive,shallowRef } from 'vue'

setup() {
        //shallowReactive:只处理第一层的数据
        const p1 = shallowReactive({
            name:'林一',
            product:{
                taobao:5
            }
        })
        // shallowRef:只处理基本类型数据
        const p2 = shallowRef({
            val:1
        })
        console.log(p2)
        return{...toRefs(p1),p2}
    },

8.watchEffect

• watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖
• watch 可以获取到新值与旧值（更新前的值），而  watchEffect是拿不到的
• watchEffect不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watchEffect 只能监听指定的属性而做出变更
• 使用需引入

import { watchEffect } from 'vue'

setup() {
        const p1 = ref(0)
        const p2 = ref(1)
        const p3 = reactive({
            name:'林一',
            age:50,
            product:{
                wx:14
            }
        })
       const S =  watchEffect(()=>{
            const a = p1.value
            const b = p2.value
            console.log('进入页面我就执行')
        })
        S()//停止监听
        return {p1,p2,p3}
    },

9.watch侦听器

• 与vue2一致，均是用来侦听数据变化的
• 使用需引入

import { watch } from 'vue'

setup() {
        const p1 = ref(0)
        const p2 = ref(1)
        const p3 = reactive({
            name:'林一',
            age:50,
            product:{
                wx:14
            }
        })
        // 一：侦听ref的基本数据
        // watch(p1,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // },{immediate:true})//{immediate:true}立即侦听

        // 二：侦听多个ref响应数据
        // watch([p1,p2],(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })

        // 三：侦听整个reactive定义的数据:只能监听到最新的结果，之前的结果监听不到
        // watch(p3,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })

        // 四：侦听reactive定义的数据中的某一个值:可以监听到,无论层级有多深
        watch(()=>p3.product.wx,(newVal,oldVal)=>{
            console.log(newVal,oldVal)
        })
        return {p1,p2,p3}
    },

10.computed

• 与vue2一致，均是用来监听数据变化
• 使用需引入

import { computed } from 'vue'

setup() {

    const mayun = ''
    const huateng = ''
    const res = reactive({linyi,liner})

    // 计算年龄总和
    const sum = computed({
        get(){
            return res.linyi + res.liner
        },
        set(val){
            console.log(val)
        }
    })

    return {...toRefs(res),sum}
}

11.reactive介绍

• reactive同样为我们的值创建了一个响应式引用
• 定义基本普通类型数据不能用reactive，用ref
• reactive主要定义复杂数据类型，比如数组，对象
• reactive可响应深层次的数据，比如多维数组
• reactive返回一个响应式的proxy对象
• 使用需引入

import { reactive } from 'vue'
reactive({name:'林一'})

setup(){
    //  const name = reactive({name:'林一'})
    //  const age = reactive({age:20})
    //  const company = reactive({company:'阿里巴巴'})
    // //  深层次响应式
    //  const pro = reactive({
    //      a:'淘宝',
    //      b:'天猫',
    //      c:{
    //          d:'京东',
    //          e:'顺丰'
    //      }
    //  })
     const btn = ()=>{
    //    name.name = '林二'
    //    age.age = 40
    //    pro.c.d = '京东0000'
          res.name = '林三'
     }
    // 共用一个reactive
    const name = '林四'
    const age = 52
    const company = '阿里巴巴'
    const res = reactive({name,age,company})

     return {res,btn}
 }

12.toRefs介绍

• 用于批量设置多个数据为响应式数据
• toRefs与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层
• toRefs还可以与其他响应式函数交互，更加方便处理视图层数据
• 使用需引入

import {toRefs} from 'vue'
toRefs(obj)

setup(){
    const obj = {name:'林一',age:40}
    const refs = reactive(obj)
    // const res = toRefs(refs)
     const btn = ()=>{
        //  res.name.value = '林三'
        //  console.log(res)
         console.log(refs)
         refs.name = '林二'
         console.log(refs)
         console.log(obj)
     }
     return {...toRefs(refs),btn}
 }

到此这篇关于vue3.0组合式api的使用小结的文章就介绍到这了,更多相关vue3组合式api使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！