转自：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 实例中。