vue如何实现数据绑定
Vue 数据绑定的实现方式
Vue 的数据绑定主要通过响应式系统和模板语法实现，核心机制包括数据劫持、依赖收集和派发更新。以下是具体实现方法：
双向数据绑定（v-model）
v-model 是语法糖，结合 v-bind 和 v-on 实现双向绑定：
<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">单向数据绑定（插值表达式）
使用 {{ }} 插值表达式或 v-bind 指令：
<p>{{ message }}</p>
<a v-bind:href="url">链接</a>
<!-- 简写 -->
<a :href="url">链接</a>响应式原理
- 数据劫持：通过
Object.defineProperty（Vue 2）或Proxy（Vue 3）监听对象属性变化。 - 依赖收集：在 getter 中收集依赖（Watcher），在 setter 中触发更新。
- 虚拟DOM：数据变化时，通过 Diff 算法高效更新真实 DOM。
对象和数组的响应式处理
- Vue 2：需使用
Vue.set()或this.$set()添加新属性。 - Vue 3：Proxy 原生支持深层监听，无需特殊处理。
计算属性和侦听器
- 计算属性：基于依赖缓存结果，适合复杂逻辑：
computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } - 侦听器：监听数据变化执行异步操作：
watch: { message(newVal, oldVal) { console.log('消息变化:', newVal); } }
手动实现简单数据绑定
以下是一个极简的响应式实现示例：
function defineReactive(obj, key, val) {
const deps = [];
Object.defineProperty(obj, key, {
get() {
if (currentWatcher) deps.push(currentWatcher);
return val;
},
set(newVal) {
val = newVal;
deps.forEach(watcher => watcher());
}
});
}
let currentWatcher = null;
function watch(fn) {
currentWatcher = fn;
fn();
currentWatcher = null;
}注意事项
- 避免直接修改数组索引或对象属性，使用响应式方法如
push/splice。 - Vue 3 的 Composition API 中，
ref和reactive是创建响应式数据的主要方式。
