vue的属性可访问顺序

 vue从创建到销毁经过的几个阶段

1. 创建Vue实例：通过new Vue()来创建一个Vue实例，并进行初始化操作，如合并选项、初始化数据、方法、计算属性等。
2. 模板编译：将Vue实例中的模板编译成渲染函数render function，这个过程包括将模板转化为render函数，再由render函数转化为vnode（虚拟节点）。
3. 数据响应式处理：利用Object.defineProperty()对数据进行数据劫持，为其绑定getter/setter方法，实现数据响应式。
4. 执行beforeCreate生命周期函数。
5. 注入依赖：进行组件依赖注入，全局依赖注入组件中，初始化事件系统。
6. 执行created生命周期函数：实例已经完成数据观测，属性和方法的运算，但未挂载至页面上。
7. 模板渲染：vue将生成的虚拟dom渲染为真实的dom，并建立dom和虚拟dom之间的关系。
8. 执行beforeMount生命周期函数。
9. 实例挂载：将真实的dom渲染挂载至指定的目标位置。
10. 执行mounted生命周期函数。
11. 数据更新：当数据发生变化时，vue会进行数据更新，触发对应属性的setter函数生成更新虚拟dom。
12. 执行beforeUpdate生命周期函数。
13. 虚拟dom对页面进行重新渲染和打补丁，根据最新的数据更新虚拟dom，并进行对比，进行最小化DOM操作。
14. 执行updated生命周期函数。
15. 执行beforeDestroy生命周期函数。
16. 实例销毁：调用$destroy函数，解除dom关联，自定义事件，移除事件监听。
17. 执行destroyed生命周期函数。

实例化Vue做的核心操作便是执行_init方法进行初始化。初始化操作会经过选项合并配置，初始化生命周期，初始化事件中心，乃至构建数据响应式系统等。

vue2属性的优先级

vue在初始化阶段会调用以下几个函数

入口文件  src\core\instance\init.js

initInjections(vm) // resolve injections before data/props

initState(vm) // 下面会分析内部处理顺序

initProvide(vm) // resolve provide after data/props   

• initSatate 方法

props => methods => data => computed => watch => provide

• 最终处理顺序

inject => props => methods => data => computed => watch => provide

Vue3属性的优先级

core\packages\runtime-core\src\component.ts

initPorps 方法 处理 porps

applyOptions 处理 data、method 等属性

• applyOpitons 方法

inject => methods => data => computed => watch => provide

• 最终处理顺序

porps => inject => methods => data => computed => watch => provide

Vue2和Vue3的区别

1、data 和 inject 冲突

Vue2 和 Vue3 表现是一致的，data 的优先级高于 inject

因为 data 中的每个属性 set 方法都被设置为 NOOP

2、props 和 inject 冲突

Vue2 和 Vue3 就表现不一致了

• Vue2 inject 的优先级高于 porps
• Vue3 porps 的优先级高于 inject