Appearance
属性执行顺序
生命周期数据绑定的执行顺序如下:
- data, 组件会首先调用data函数,其中返回的对象的属性和方法会被分配给组件的$data
- init, 组件调用init函数,初始化组件
- created, 调用created函数,用于组件创建后执行某些操作
- mounted, 调用mounted函数,用于组件挂载到DOM后执行某些操作
- updated, 数据更新时调用,用于组件更新后执行某些操作
- ready, 最后调用ready函数,用于组件被渲染并准备好后续执行某些操作
属性执行顺序是:
- props: 父组件传递给子组件的属性会首先被处理
- data: 处理完props后,Vue会处理数据对象中的所有属性,并将他们添加到Vue实例中
- computed: 计算属性会在处理完data之后被计算,并添加到Vue实例中
- watch :侦听器会在 computed 之后被处理,并添加到 Vue 实例中。
- created :在处理完所有选项后,Vue 实例会调用 created 钩子,并完成实例化。
- mounted :在实例挂载到DOM元素之后,Vue 实例会调用 mounted 钩子。
- methods :实例方法会在 mounted 之后被处理,并添加到 Vue 实例中。
综上,选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods。