初面网初面网

属性执行顺序

生命周期数据绑定的执行顺序如下:

  1. data, 组件会首先调用data函数,其中返回的对象的属性和方法会被分配给组件的$data
  2. init, 组件调用init函数,初始化组件
  3. created, 调用created函数,用于组件创建后执行某些操作
  4. mounted, 调用mounted函数,用于组件挂载到DOM后执行某些操作
  5. updated, 数据更新时调用,用于组件更新后执行某些操作
  6. ready, 最后调用ready函数,用于组件被渲染并准备好后续执行某些操作

属性执行顺序是:

  1. props: 父组件传递给子组件的属性会首先被处理
  2. data: 处理完props后,Vue会处理数据对象中的所有属性,并将他们添加到Vue实例中
  3. computed: 计算属性会在处理完data之后被计算,并添加到Vue实例中
  4. watch :侦听器会在 computed 之后被处理,并添加到 Vue 实例中。
  5. created :在处理完所有选项后,Vue 实例会调用 created 钩子,并完成实例化。
  6. mounted :在实例挂载到DOM元素之后,Vue 实例会调用 mounted 钩子。
  7. methods :实例方法会在 mounted 之后被处理,并添加到 Vue 实例中。

综上,选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods。

更新于 2025/2/26