充分认识Vue3的生命周期和watch用法

前端

2023-11-11 19:48:44

Vue3是一套全新的前端框架，它在Vue2的基础上进行了全面的升级和优化，带来了许多新的特性和功能，其中生命周期钩子和watch的使用方式也有了变化。了解这些变化有助于我们更好地理解Vue3的运行机制，从而编写出更加高效的代码。

Vue3中的生命周期钩子函数

Vue3的生命周期钩子函数与Vue2大致相同，但也有几点关键的区别：

beforeCreate ：在Vue3中，beforeCreate钩子函数被移动到了构造函数中，这意味着它现在可以在组件实例化之前访问组件的选项。
created ：created钩子函数现在会在组件实例化后立即调用，而不再等到模板编译完成后才调用。
beforeMount ：beforeMount钩子函数现在会在模板编译完成后立即调用，而不再等到DOM更新完成后才调用。
mounted ：mounted钩子函数现在会在DOM更新完成后立即调用，而不再等到组件完全渲染完成后才调用。
beforeUpdate ：beforeUpdate钩子函数现在会在组件更新之前立即调用，而不再等到模板编译完成后才调用。
updated ：updated钩子函数现在会在组件更新完成后立即调用，而不再等到DOM更新完成后才调用。
beforeDestroy ：beforeDestroy钩子函数现在会在组件销毁之前立即调用，而不再等到组件完全销毁完成后才调用。
destroyed ：destroyed钩子函数现在会在组件完全销毁完成后立即调用。

Vue3中的watch

Vue3中的watch与Vue2大致相同，但也有几点关键的区别：

immediate ：在Vue3中，我们可以使用immediate选项来让watch在组件初始化时立即执行一次。
deep ：在Vue3中，我们可以使用deep选项来让watch监视对象的深层变化，而不仅仅是顶层变化。
handler ：在Vue3中，我们可以使用handler选项来指定一个函数作为watch的处理函数，而不是直接使用一个表达式。

watch的使用方式

我们来看几个使用watch的具体示例：

// 监听ref创建的简单数据类型
const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count has changed from ${oldValue} to ${newValue}`)
})

// 监听reactive创建的数据中的某个值
const user = reactive({
  name: 'John Doe',
  age: 30
})

watch(() => user.age, (newValue, oldValue) => {
  console.log(`user's age has changed from ${oldValue} to ${newValue}`)
})

// 使用immediate选项让watch在组件初始化时立即执行一次
const showModal = ref(false)

watch(showModal, (newValue, oldValue) => {
  if (newValue) {
    showModalDialog()
  }
}, { immediate: true })

// 使用deep选项让watch监视对象的深层变化
const todos = reactive([
  {
    id: 1,
    text: 'Learn Vue 3',
    done: false
  },
  {
    id: 2,
    text: 'Build a Vue 3 project',
    done: false
  }
])

watch(todos, (newValue, oldValue) => {
  console.log('todos list has changed')
}, { deep: true })

// 使用handler选项来指定一个函数作为watch的处理函数
const username = ref('')

watch(username, (newValue, oldValue) => {
  if (newValue.length > 0) {
    // do something
  }
}, {
  handler(newValue, oldValue) {
    if (newValue.length > 0) {
      // do something
    }
  }
})