vue学记笔记(十二) Vue3.0之生命周期

生命周期

Vue3.0 中生命周期发生了变化请看对照表

beforeCreate ===  setup()
created === setup()
beforeMount === onBeforeMount()
mounted === onMounted()
beforeUpdate === onBeforeUpdate()
updated === onUpdated()
beforeDestroy === onBeforeUnmount()
destroyed === onUnmounted()
activated === onActivated()
deactivated === onDeactivated()
errorCaptured === onErrorCaptured

又新增了两个

onRenderTracked

onRenderTriggered

• 这两个钩子函数函数都会接收一个参数 e,这个 e 返回组件更新的所有信息

举例 使用钩子函数这回必须要引入

<template>
  <div>
    <span>{{count}}</span>
    <span>{{double}}</span>
    <div @click="changecount">点击增加</div>
  </div>
</template>

<script>
  //ref接收一个参数 返回一个响应式对象
  //computed是一个函数接收一个参数是函数
  import { ref, computed, reactive, toRefs, onMounted } from 'vue'
  export default {
    setup() {
      onRenderTriggered((e) => {
        console.log(e)
      })
      onMounted(() => {
        console.log('挂在了')
      })
      const data = reactive({
        count: 0,
        double: computed(() => {
          return data.count * 2
        }),
        changecount: () => {
          data.count++
        },
      })
      const result = toRefs(data)
      return {
        ...result,
      }
    },
  }
</script>

<style lang="less" scoped></style>