详解vue中属性执行顺序

vue中属性的执行顺序

在Vue 2中，组件的生命周期和数据绑定的执行顺序如下：

• data ：首先，组件会调用 data 函数，该函数返回一个对象，该对象的属性和方法会被分配给组件的 $data 。
• init ：接下来，组件会调用 init 函数，该函数用于初始化组件。
• created ：然后，组件会调用 created 函数，该函数用于在组件被创建后执行某些操作。
• mounted ：接着，组件会调用 mounted 函数，该函数用于在组件被挂载到DOM后执行某些操作。
• updated ：当组件的数据更新时，组件会调用 updated 函数，该函数用于在组件更新后执行某些操作。
• ready ：最后，组件会调用 ready 函数，该函数用于在组件被渲染并且准备好后执行某些操作。

至于props和watch，它们不是生命周期函数，而是特殊的属性。props是父组件传递给子组件的属性，而watch用于观察和响应数据的变化。

至于methods，它们只是普通的JavaScript函数，可以在组件的任何地方定义。当需要使用方法时，只需要直接调用即可。方法不遵循任何特定的执行顺序。

总的来说，执行顺序是：

• data
• init
• created
• mounted
• updated
• ready

同时，props和watch可以在任何阶段使用，而methods可以在任何阶段定义和使用。

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

vue中的属性执行顺序 props -＞ data -＞ computed -＞ watch -＞ created -＞ mounted -＞ methods

在 Vue 2 中，这些选项的执行顺序是：

• 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。

这样的话，其实父组件给子组件传递一个比较全面的info对象就可以，子组件就可以在computed或者后续步骤中使用这些数据，进而制造出自己想要的数据：省去了组附件组装，然后再传递给子组件的步骤

到此这篇关于vue中属性执行顺序的文章就介绍到这了,更多相关vue属性执行顺序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论