Vue组件各个属性执行顺序问题

转自：https://blog.csdn.net/m0_62763606/article/details/131694339

        在制作波动短视频效果时，在data中定义了一个变量，默认值为null。后来该变量在mounted中被赋值，而后在watch侦听属性中使用立即侦听时使用了该变量却显示为null，后发现这关系到各个组件属性执行顺序问题。主要问题有以下两点：

        1、dom渲染方法优先级比较

        2、属性优先级比较

        一、渲染方法el、render、template优先级

        关于Dom结构的渲染，在组件中可以通过el，render，template进行渲染，在这三者中render函数优先级最高，其次是template模板，如果二者都没有，则通过挂载点el进行渲染。

        二、各个属性优先级比较

        组件内部各个属性主要有props、data、computed、watch、created、mounted、methods。

        （1）props自定义属性：父组件传递给子组件的属性会首先被处理

        （2）data数据区：在处理完 props 之后，Vue 会处理数据对象中的所有属性，并将它们添加到 Vue 实例中。

        （3）computed计算属性：在处理完 data 之后被计算，并添加到 Vue 实例中。

        （4）created函数：在处理完所有选项后，Vue 实例会调用 created 钩子，并完成实例化

        （5）mounted函数：在实例挂载到DOM元素之后，Vue 实例会调用 mounted 钩子。

        （6）methods方法区：会在 mounted 之后被处理，并添加到 Vue 实例中。