生命周期

在v3的生命周期中beforeCreate和create被setup代替。并且每个函数都要按需使用。

onBeforeMount: 组件挂载到节点上之前执行的函数
onMounted: 组件挂载完成后执行的函数
onBeforeUpdate: 组件更新之前执行的函数
onUpdated: 组件更新完成之后执行的函数
onBeforeUnmount: 组件卸载之前执行的函数
onUnmounted: 组件卸载完成后执行的函数
onActivated: 被包含在 keep-alive 中的组件，会多出两个生命周期钩子函数，被激活时执行
onDeactivated: 比如从 A 组件，切换到 B 组件，A 组件消失时执行
onErrorCaptured: 当捕获一个来自子孙组件的异常时激活钩子函数

    onBeforeMount(() => {
      console.log('onBeforeMount: 组件挂载到节点上之前执行的函数')
    })
    onMounted(() => {
      console.log('onMounted: 组件挂载完成后执行的函数')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate: 组件更新之前执行的函数')
    })
    onUpdated(() => {
      console.log('onUpdated: 组件更新完成之后执行的函数')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount: 组件卸载之前执行的函数')
    })
    onUnmounted(() => {
      console.log('onUnmounted: 组件卸载完成后执行的函数')
    })
    onActivated(() => {
      console.log('onActivated: 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行')
    })
    onDeactivated(() => {
      console.log('onDeactivated: 比如从 A 组件，切换到 B 组件，A 组件消失时执行')
    })
    onErrorCaptured(() => {
      console.log('onErrorCaptured:  当捕获一个来自子孙组件的异常时激活钩子函数')
    })

新特性

数据绑定

在Vue2中响应式数据是通过defineProperty来实现的
而在Vue3响应式数据是通过ES6的Proxy来实现的
reactive是Vue3中提供实现响应式数据的方法，reactive参数必须是对象(json/arr)

<template>
  <h1>事件</h1>
  <h2>{{state.count}}</h2>
  <button style="color:blue" @click="changeMsg">点击改变内容</button>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup () {
    const state = reactive({
      count: 1
    })
    const changeMsg = () => {
      state.count++
    }
    return {
      state,
      changeMsg
    }
  }
})
</script>

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值

const myCount = ref(1)

const changeCount = () => {
   myCount.value = myCount.value + 2
}

return {
      myCount,
      changeCount
}

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接

    const state = reactive({
      a: 1,
      b: 2
    })
    const myToRef = toRef(state, 'a')
    myToRef.value++
    console.log(state.a) // 2
    state.a++
    console.log(myToRef.value) // 3

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 [ref]

    const state = reactive({
      a: 1,
      b: 2
    })
    const myToRefs = toRefs(state)
    state.a++
    console.log(myToRefs.a.value) // 2
    myToRefs.a.value++
    console.log(state.a) // 3

computed

接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 [ref] 对象,或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象

    const count = ref(1)
    const plusOne = computed({
      get: () => count.value + 1,
      set: val => {
        count.value = val - 1
      }
    })

    plusOne.value = 1
    console.log(count.value) // 0

watch

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

侦听器数据源可以是一个具有返回值的 getter 函数，也可以直接是一个ref
侦听器还可以使用数组以同时侦听多个源

    const state = reactive({
      count: 1
    })

    watch(() => state.count, (count, prevCount) => {
      console.log(count, prevCount)
    })

多个源

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

未完待续。。。。

搭建管理后台-6(vue3响应api)