vue响应式核心是依赖追踪与主动通知机制：模板读取数据时通过getter收集依赖，数据变更时通过setter通知对应watcher更新dom；非响应式赋值需用$set或替换对象解决。
Vue 的响应式数据与模板指令之间不是简单的一对一绑定，而是一套依赖追踪 + 主动通知的联动机制。核心在于：模板中用到的数据会被自动收集为依赖，当这些数据变化时，对应指令控制的 DOM 区域才会更新。
数据如何被模板“看见”
当你在模板中写 {{ message }} 或 v-model="count"，Vue 在首次渲染时会执行一次“求值”——也就是读取 message 或 count 的值。这个读取动作会触发对应属性的 getter，而 getter 内部会把当前正在工作的 watcher（即这个模板渲染所对应的观察者）记录进该属性的依赖池（Dep）里。
- 每个组件实例默认有一个渲染 watcher
- 每个
v-if、v-for、插值表达式、v-bind绑定等，都会让 watcher “接触”某些数据字段 - 只要读了，就记下来；没读的，即使存在也不会被监听
指令如何响应数据变化
当后续代码执行 this.message = 'hello'，会触发 message 的 setter。setter 不只是赋值，还会遍历它所记录的所有 watcher，并调用它们的 update() 方法。
-
v-text和插值会触发文本节点内容重设 -
v-model除了更新数据，还会同步设置表单元素的value或checked -
v-if的 watcher 更新后，会重新判断条件并增删 DOM 节点 -
v-for的 watcher 更新后，会比对新旧列表，执行最小化 DOM 操作（如复用、移动、新增、删除）
为什么有些修改不触发更新
不是所有赋值都能被 Vue 捕获。根本原因是：只有经过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持的属性，才有 getter/setter 可供追踪。
- 直接给已有对象添加新属性，比如
this.obj.newKey = 'x'，不会响应（Vue 2 中） - 通过
Array.prototype.push等方法修改数组，Vue 2 已做拦截；但直接用索引赋值arr[0] = 'x'或修改length仍无效 - 用
Object.assign(this.obj, {...})合并属性，新增字段不会进入响应系统 - 解决办法统一：用
this.$set、Vue.set或替换整个对象（如this.obj = {...this.obj, newKey: 'x'}）
模板指令其实是在“用数据驱动行为”
指令本身不存储状态，而是定义了一种行为契约。例如：
-
v-html="raw"表示“把raw的值作为 HTML 插入”，它依赖raw的响应性来决定何时重写 innerHTML -
v-bind:class="{ active: isActive }"表示“当isActive为真时加 class”，它监听isActive的变化来切换 class 列表 -
v-on:click="handleClick"不参与响应式映射，但它执行的函数内部若修改响应式数据，就会间接触发视图更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
