欢迎来到我的博客！#

使用 Markdown 格式编写。

今天学到了什么#

当 data 中的数据（比如你代码中的 opacity 或 a）发生变化时，Vue 并不会把整个页面直接推翻重头渲染，而是走一套非常高效的**“响应式更新流程”**：

流程： 数据变化 -> Vue的响应式系统监听到改变 -> 触发组件重新计算/渲染 -> 生成新的虚拟DOM(Virtual DOM) -> Diff 算法对比新旧虚拟DOM -> 找出差异（比如只是某个h2的opacity改变了） -> 局部更新真实的DOM。
哪些会被重新调用？
- 页面模板 (Template)： 模板中用到该数据的地方会自动更新到真实 DOM 上。如果在模板里调用了 methods 中的方法（例如 <h2>{{ showMsg() }}</h2>），那么只要有数据变化引发重新解析，这个 showMsg 就会被重新调用。
- watch (侦听器)： 如果你写了 watch 并专门监听了这个正在变化的数据，那么该数据的 watch 回调会被调用。
- computed (计算属性)： 如果有计算属性依赖了这个变化的数据，它也会被重新计算。
- 特定的生命周期： 数据变化会触发更新阶段的生命周期函数：beforeUpdate 和 updated。

mounted 的意思是**“挂载完毕”**。
对于一个 Vue 实例或组件来说，从创建到渲染到页面上，这个过程只发生一次。只要这个 Vue 实例没有被销毁，它就一直“挂载”在页面上。
后续任何数据的变化，修改的只是现有的页面内容，这属于**“更新阶段”(Update)，而不是从头“出生”(Mount)。因此 mounted 只会在第一次把页面渲染出来后调用唯一的一次**。

你在 HTML 里写的带有 {{}} 或者 v-if 等指令的代码，其实是一堆“字符串模板”。浏览器根本看不懂 Vue 语法。
Vue 在初始化（new Vue）阶段，拿到这段模板把它编译成浏览器能看懂的正常 DOM 节点（比如原本带有 :style="{opacity}" 的 <h2>，变成普通的 <h2 style="opacity: 1;">）。
Vue 把这些首次经过完全解析、干干净净、浏览器认识的 HTML 元素，第一次塞给浏览器让他显示出来，这就叫**“初始的真实 DOM 元素”**。塞进去的这个动作就是“挂载”。

对于整个 new Vue 实例而言：不会重新挂载（不会调 mounted），它触发的是实例的 updated（更新周期）。
就底层的真实 DOM 而言：原本 a 为 false 时，因为用的是 v-if，页面上是彻底没有第一个 <h2> 这个 DOM 元素的。当 a 变为 true 时，Vue 会真真切切地去创建一个全新的 <h2> DOM 节点并把它插入到浏览器的 DOM 树里面响应的位置。
所以，局部那一个 <h2> 是新插入的，但站在全局掌控者 Vue 实例的角度看，这只是一次对页面的“修补（更新操作）”。

总结： Vue 之所以快且智能，就是因为它知道什么是只有一次的（挂载 Mounted），什么是反复发生的（更新 Updated / Computed / Watch），并且依靠 Diff 算法只去修改发生改变的那一丁点 DOM。