Composition API使用记录

1. 生命周期

Vue3 生命周期对应模块

import { onMounted, onUpdated, onUnmounted } from "@vue/composition-api";
export default {
  setup() {
    onMounted(() => {
        console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
    return {}
  }
}

生命周期对比

1. beforeCreate -> setup()
2. created -> setup()
3. beforeMounted -> onBeforeMount
4. mounted -> onMounted
5. beforeUpdate -> onBeforeUpdate
6. updated -> onUpdated
7. beforeDestroy -> onBeforeUnmount
8. destroyed -> onUnmounted

新的生命周期（帮助调试代码）
onRenderTracked
onRenderTriggered

setup

setup()函数是Vue3中为组件提供的新属性，为使用Composition API新特性提供统一入口

执行时机：setup 函数会在beforeCreate之后，Created之前执行
setup参数：第一个形参 接收props数据，第二个形参是上下文

setup(props,{root,emit,slots,refs,parent,attrs}){}

props 、component

<script>
import { reactive } from '@vue/composition-api'
export default {
  components:{},
  props:{
    title:String,
    color:String
  },
  setup(props) {
    const co = props.color
    const state = reactive({ name: 'Eno Yao' });
    // return 暴露到 template 中
    return {
      // Model
      ...state
    }
  }
}
</script>

reactive、toRefs、ref、isRef

reactive() :接收一个普通对象，返回一个响应式的数据对象
ref()：根据给定的值创建一个响应式的数据对象，这个对象只包含一个 value属性
toRefs()：将reactive创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据，配合 v-model 指令能完成数据的双向绑定
isRef() ：判断某个值是否为ref()创建的对象

<script>
import { reactive，ref，roRefs，isRef } from '@vue/composition-api'
export default {
  setup() {
    const count = ref(0)
    console.log(count.value); // 0
    count.value++;
    console.log(count.value); // 1
    
    const data=reactive({
       name:'yely',
       sex:''
    })

   const unwrapped = isRef(foo) ? foo.value : foo;
   
    return {
      ...toRefs(data)
    }
  }
}
</script>

computed 、watch

computed() 计算属性
watch()监视某些数据项变化

<script>
import {computed, watch } from '@vue/composition-api'
export default {
  setup() {
   const count = ref(0)
   const page = ref('')
   // const plusOne = computed(() => count.value + 1)
    const plusone = computed({
      //取值
      get:()=> count.value +1,
      //赋值
      set:val=>{count.value = val-1}
    })

    const data=reactive({
       name:'yely',
       sex:''
    })
  //监视ref类型的数据项
   watch(count, (count, prevCount) => { /* ... */ })

  //监视reactive中指定的数据项
   watch(()=>data.name,(name,prevname)=>{/* ... */ })
  //监听多个
   //ref类型
    watch([count, page],([count, page], [prevCount, prevPage])=> {
      console.log(count)
      console.log(page)
      console.log('-------------')
      console.log(prevCount)
      console.log(prevPage)
    },
    {
      lazy: true // 在 watch 被创建的时候，不执行回调函数中的代码
    })
    
//reactive类型
    watch([()=>{data.name},()=>{data.sex}],([name, sex], [prevName, prevSex])=> {
    },
    //watch options  lazy,deep,flush
     
    {
      lazy: true // 在 watch 被创建的时候，不执行回调函数中的代码
    })
    
    return {
      ...toRefs(data)
    }
  }
}
</script>

实例

列表分页查询 ：将其重复的逻辑抽离出来放置到 @/hooks/paging-query.ts 中

import { ref, Ref, reactive } from '@vue/composition-api'
import { UnwrapRef } from '@vue/composition-api/dist/reactivity'

export default function usePaging() {
  const conditions: UnwrapRef<{
    page: Ref<number>,
    pageSize: Ref<number>,
    totalCount: Ref<number>,
  }> = reactive({
    page: ref(1),
    pageSize: ref(10),
    totalCount: ref(0),
  })
  const handleSizeChange = (val: number) => {
    conditions.pageSize = val
  }
  const handleCurrentChange = (val: number) => {
    conditions.page = val
  }
  return {
    conditions,
    handleSizeChange,
    handleCurrentChange,
  }
}

在页面中使用

<template>
  <div class="paging-demo">
    <Input v-model="query"></Input>
    <Page
      :total="cons.totalCount"
      :page-size="cons.pageSize"
      :current="cons.page"
      show-elevator
      show-sizer
      show-total
      @on-change="handleCurrentChange"
      @on-page-size-change="handleSizeChange"
    />
  </div>
</template>
 
<script lang="ts">
import { usePaging } from '@/hooks/paging-query'
import { ref, Ref, watch } from '@vue/composition-api'
 
export default createComponent({
  setup () {
   const {
   conditions: cons,
   handleSizeChange,
   handleCurrentChange,
  } = usePaging()
   const query: Ref<string> = ref('')
    watch([
      () => cons.page,
      () => cons.pageSize,
      () => query.value
    ], ([val1, val2, val3]) => {
      console.log('conditions changed，do search', val1, val2, val3)
    })
    return {
      cons,
      query,
      handleSizeChange,
      handleCurrentChange
    }
  }
})