Vue3计算属性与监听属性和生命周期

一、计算属性与监视

1、computed函数

• 与computed配置功能一致
• 只有getter
• 有getter和setter

2、watch函数

• 与watch配置功能一致
• 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
• 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
• 通过配置deep为true, 来指定深度监视

3、watchEffect函数

• 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
• 默认初始时就会执行第一次, 从而可以收集需要监视的数据
• 监视数据发生变化时回调

二、生命周期

1、与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

2、新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

• onRenderTracked
  • 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
  • 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
• onRenderTriggered
  • 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
  • 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

3、代码实例

<template>
<div class="about">
  <h2>msg: {{msg}}</h2>
  <hr>
  <button @click="update">更新</button>
</div>
</template>

<script lang="ts">
import {
  ref,
  onMounted,
  onUpdated,
  onUnmounted, 
  onBeforeMount, 
  onBeforeUpdate,
  onBeforeUnmount
} from "vue"

export default {
  beforeCreate () {
    console.log('beforeCreate()')
  },

  created () {
    console.log('created')
  },

  beforeMount () {
    console.log('beforeMount')
  },

  mounted () {
    console.log('mounted')
  },

  beforeUpdate () {
    console.log('beforeUpdate')
  },

  updated () {
    console.log('updated')
  },

  beforeUnmount () {
    console.log('beforeUnmount')
  },

  unmounted () {
     console.log('unmounted')
  },
  

  setup() {
    
    const msg = ref('abc')

    const update = () => {
      msg.value += '--'
    }

    onBeforeMount(() => {
      console.log('--onBeforeMount')
    })

    onMounted(() => {
      console.log('--onMounted')
    })

    onBeforeUpdate(() => {
      console.log('--onBeforeUpdate')
    })

    onUpdated(() => {
      console.log('--onUpdated')
    })

    onBeforeUnmount(() => {
      console.log('--onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('--onUnmounted')
    })
    
    return {
      msg,
      update
    }
  }
}
</script>