Vue是专注视图层的渐进式JavaScript框架，通过声明式渲染和响应式系统实现数据与DOM自动同步，支持模板语法、指令及组件化开发，并在Vue 3中采用Proxy提升响应能力。
Vue 是一个用于构建用户界面的 JavaScript 渐进式框架，核心目标是通过简洁的 API 实现数据与视图的自动同步，让开发者能快速创建响应式、可复用的界面组件。
Vue 的本质：声明式渲染 + 响应式系统
Vue 不是全能型框架，而是一个专注视图层的工具。它用模板语法（类似 HTML）描述界面结构，把数据变量直接写在模板里，比如 {{ message }}。当 message 的值变化时，页面上对应的文字会自动更新——这背后是 Vue 的响应式系统在监听数据变化并触发视图重绘。
关键点：
- 数据变化 → Vue 自动追踪依赖 → 更新相关 DOM，无需手动操作 document.getElementById 或 innerHTML
- 响应式只对 data 中定义的初始属性生效；后续动态添加的属性默认不响应，需用 Vue.set() 或 vm.$set()（Vue 2）或使用 ref/reactive（Vue 3）正确声明
- 模板中支持指令（如 v-if、v-for、v-model），让逻辑与结构紧耦合又保持可读性
从零开始构建一个响应式计数器
以最简方式体验响应式：一个点击加一的按钮。
立即学习“Java免费学习笔记（深入）”；
Vue 3 示例（组合式 API）：
<div id="app">
<p>当前数值：{{ count }}</p>
<button @click="increment">+1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}
}).mount('#app')
</script>
说明：
- ref() 创建响应式引用，访问值需用 .value；模板中使用时 Vue 自动解包，直接写 {{ count }} 即可
- @click 是 v-on:click 的缩写，绑定事件处理器
- 修改 count.value 后，{{ count }} 显示内容立刻更新，无需额外代码
响应式背后的“魔法”其实有迹可循
Vue 并非黑箱。Vue 2 使用 Object.defineProperty 劫持数据的 getter/setter；Vue 3 改用 Proxy，能监听对象新增/删除属性、数组索引赋值等更多操作，响应能力更强、性能更优。
但要注意边界：
- Proxy 无法检测直接通过索引设置数组项（如 arr[0] = newVal），应改用 arr.splice(0, 1, newVal) 或 Vue.set(arr, 0, newVal)（Vue 2）
- 响应式只作用于对象层级，原始值（string/number/boolean）本身不可被劫持，所以必须包裹在 ref 或 reactive 中
- 函数返回的对象、解构后的属性会丢失响应性，需保持引用关系或使用 toRefs 解构
构建真实界面：组件化 + 状态管理雏形
实际项目中，响应式不止于单个变量。Vue 鼓励将界面拆分为独立、可复用的 组件（如 UserList、SearchBar），每个组件拥有自己的响应式数据、方法和生命周期。
当多个组件共享状态（如用户登录态、主题色），可逐步引入：
- props / emit：父子组件间传递响应式数据与事件
- provide / inject：跨多层组件共享状态（轻量场景）
- Pinia（官方推荐）：轻量、直观的状态管理库，基于 Composition API 设计，天然响应式，无需额外配置即可在任意组件中读写共享状态
例如用 Pinia 管理全局暗色模式开关，所有用到该状态的组件会随切换实时更新样式，逻辑清晰且易于测试。
