vue3学习

vue3生命周期函数，父子组件传值，常用工程函数

生命周期

setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数；
onMounted() : 组件挂载完成后执行的函数；
onBeforeUpdate(): 组件更新之前执行的函数；
onUpdated(): 组件更新完成之后执行的函数；
onBeforeUnmount(): 组件卸载之前执行的函数；
onUnmounted(): 组件卸载完成后执行的函数；
onActivated(): 被包含在  中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
PS： 使用 组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用  组件解决。

自定义ref函数

import {customRef} from "vue";

export default {
  setup() {
    // 自定义一个ref，名为myRef
    function myRef(value, delay) {
      let timeout
      return customRef((track, trigger) => {
        return {
          get() {
            console.log(`有人从myRef这个容器中读取数据了，把${value}给他`)
            track() // 通知Vue追踪value的变化
            return value
          },
          set(newValue) {
            console.log(`有人把myRef这个容器中数据改为了${newValue}`)
            timeout = setTimeout(() => {
              value = newValue
              trigger() // 通知Vue去重新解析模板
            }, delay)
          }
        }
      })
    }

    const word = myRef('hello', 500)

    return {
      word,
    }
  }
}