vue3基础

  • vue3 生命周期详细
  • 在 Vue 3 中,生命周期钩子是组件在其生命周期的不同阶段可以运行的函数。这些钩子提供了一个方式,允许你在组件创建、更新、销毁等关键时刻执行代码。Vue 3 的生命周期钩子与 Vue 2 相比有一些变化,主要是因为 Vue 3 使用了 Composition API。以下是 Vue 3 中可用的主要生命周期钩子:
  1. setup()
  • 这不是传统意义上的生命周期钩子,但它是 Composition API 的入口点。
  • 它在组件实例被创建和生命周期钩子之前被调用。
  • 这是定义响应式变量和函数的地方。
  1. onBeforeMount()
  • 在挂载(即将把模板编译成 DOM)开始之前调用。
  1. onMounted()
  • 在组件挂载到 DOM 上后调用。
  • 这是执行如访问或操作 DOM 的任务的好时机。
  1. onBeforeUpdate()
  • 在响应式数据变化并且 DOM 重新渲染之前调用。
  1. onUpdated()
  • 在响应式数据变化导致的虚拟 DOM 重新渲染和打补丁之后调用。
  • 用于执行依赖于组件已更新的 DOM 的操作。
  1. onBeforeUnmount()
  • 在卸载组件实例之前调用。
  1. onUnmounted()
  • 在组件实例被卸载后调用。
  1. onActivated() 和 onDeactivated()
  • 这些钩子在使用 缓存组件时使用。
  • onActivated 在组件被激活时调用。
  • onDeactivated 在组件被停用时调用。
  1. onErrorCaptured() 和 onRenderTracked() 和 onRenderTriggered()
  • onErrorCaptured 用于捕获子组件抛出的异常。
  • onRenderTrackedonRenderTriggered 用于调试,它们提供了有关渲染过程的信息。

这些生命周期钩子可以在 Composition API 的 setup() 函数内部使用,你可以直接导入它们,例如:

import { onMounted, onUpdated } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });

    onUpdated(() => {
      console.log('组件已更新');
    });

    // ...
  }
}

记住,Vue 3 的 Composition API 引入了更灵活的组织组件逻辑的方式,允许你更好地重用和管理代码。

  • 在 Vue 3 中,

    高级特性

    1. 使用 Props 和 Emits
    • 可以使用 definePropsdefineEmits
      1. 使用组件
        1. 使用计算属性和侦听器
        • 可以直接使用 computedwatch
        
        
        1. 使用生命周期钩子
        • 生命周期钩子可以直接导入并使用。
        
        

        使用

        在上面的例子中,internalStateexposedMethod 被暴露出去,这意味着它们可以从组件的外部访问,例如:

        
        
        
        

        注意事项

        1. 有选择性地暴露 :只有通过 defineExpose 显式暴露的属性和方法才可以从外部访问。这有助于保持组件的封装性,避免无意间暴露内部状态。
        2. 主要用途defineExpose 主要用于需要通过父组件或模板引用访问子组件的情况。
        3. ** 结合使用** :通常与模板中的 ref 指令结合使用,允许父组件直接访问子组件的实例。
        4. 谨慎使用 :过度使用 defineExpose 可能破坏组件的封装性和独立性,应谨慎使用。

        defineExpose 提供了一种在

        1. 触发事件
        • 使用 emit 函数触发事件,并传递所需的参数。
        
        
        
        

        使用带有验证的 Emit

        • 你还可以提供一个带有验证的对象,来确保发出的事件符合预期的格式。
        
        

        注意事项

        1. 组件间通信defineEmits 是组件间通信的一部分,特别是当子组件需要通知父组件某些动作发生时。
        2. 类型安全 :如果你在使用 TypeScript,defineEmits 还可以提供类型检查,增加代码的健壮性。
        3. 与传统 API 的区别 :在 Vue 3 的 Composition API 中,defineEmits 取代了 Vue 2 中的 this.$emit 方法。它与

          在上面的例子中,title prop 如果没有提供值,将默认为 '默认标题'likes prop 将默认为 0

          注意事项

          1. 类型安全 :在使用 TypeScript 时,withDefaults 可以帮助确保 prop 的类型安全性,同时提供默认值。
          2. 清晰的默认值声明 :通过 withDefaults,组件的使用者可以更清楚地看到每个 prop 的默认值,这有助于理解组件的预期行为。
          3. 与 Vue 2 的区别 :在 Vue 2 中,你可以在 props 定义中直接指定默认值。在 Vue 3 的

你可能感兴趣的:(vue.js,前端,javascript)