Vue.js 渲染次的原因揭秘-数据在创建组件时被初始化-这衣服穿上了以后数据一变衣服也得跟着变
Vue.js 渲染两次的原因揭秘
Vue.js 渲染两次的现象可能让人摸不着头脑，但别担心，我来帮你解开这个谜团。
一、数据初始化
Vue.js 里的数据初始化就像给组件穿衣服，一开始得穿上合适的“衣服”，也就是初始化数据。这衣服穿上了，以后数据一变，衣服也得跟着变。
| 数据定义 | 数据变化 |
|---|---|
| 在组件选项中定义的数据，组件实例化时被初始化为响应式数据。 | 数据在组件生命周期不同阶段变化时，Vue会自动检测变化并触发渲染更新。 |
举个例子，数据在创建组件时被初始化，然后在某个生命周期钩子中被更新，这就导致了两次渲染。
二、组件生命周期
Vue.js 组件的生命周期就像一个人的成长过程，有出生（创建）、长大（挂载）、变化（更新）和死亡（销毁）。在关键阶段，Vue会调用一些生命周期钩子函数，让开发者有机会做一些事情。
| 挂载阶段 | 更新阶段 |
|---|---|
| 组件挂载到DOM之前，Vue进行初次渲染，调用`created`和`mounted`钩子。 | 组件的响应式数据变化时，调用`updated`和`rendered`钩子，触发视图的重新渲染。 |
同样，以数据变化为例，组件挂载时数据被初始化，然后在更新钩子中数据被更新，这也会引起两次渲染。
三、开发模式
Vue.js 的开发模式就像是在玩游戏时打开了“上帝模式”，Vue会做一些额外的检查和警告，帮你发现潜在的问题。但这些额外的检查有时也会引起额外的渲染。
| 开发工具 | 性能监控 |
|---|---|
| Vue Devtools会注入额外代码，追踪组件状态和渲染情况。 | Vue在开发模式下监控性能，记录组件渲染时间和频率。 |
比如，在开发模式下打开Vue Devtools，可以看到组件的渲染情况，这些信息虽然有助于优化性能，但也可能引起额外的渲染。
四、虚拟 DOM 更新
Vue.js 使用虚拟 DOM来优化渲染，就像是用一个轻量级的模型来代表真实的DOM。当数据变化时，Vue会创建新的虚拟 DOM，并与旧的进行比较，只更新变化的部分。
虚拟 DOM比较和视图更新可能会引起多次渲染，尤其是数据频繁变化时。
比如，每次调用某个方法，数组数据都会变化，Vue会创建新的虚拟 DOM进行比较和更新。
Vue.js 渲染两次的原因主要是数据初始化、组件生命周期、开发模式和虚拟 DOM 更新。了解这些原因有助于开发者优化性能，减少不必要的渲染。
- 尽量减少数据变化和视图更新。
- 利用Vue Devtools等工具进行性能监控和优化。