Vue数据绑定实现
Vue 数据绑定的核心机制
Vue 的数据绑定基于响应式系统，通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现。当数据变化时，视图自动更新。
双向绑定的实现方式
v-model 指令
<input v-model="message">
<p>{{ message }}</p>v-model 是 v-bind:value 和 v-on:input 的语法糖，适用于表单元素。
手动实现双向绑定
<input :value="text" @input="text = $event.target.value">响应式原理
Vue 2 的 defineProperty
Object.defineProperty(obj, key, {
get() { return value; },
set(newVal) {
value = newVal;
dep.notify(); // 触发更新
}
});Vue 3 的 Proxy
const observed = new Proxy(data, {
get(target, key) { return target[key]; },
set(target, key, value) {
target[key] = value;
trigger(key); // 触发更新
return true;
}
});计算属性和侦听器
计算属性
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}侦听器
watch: {
message(newVal, oldVal) {
console.log('消息变化:', newVal);
}
}数组和对象的响应式处理
Vue 对数组方法（push/pop/shift/unshift/splice/sort/reverse）进行了包裹，使其触发视图更新。对象新增属性需使用 Vue.set 或 this.$set。
this.$set(this.obj, 'newKey', 'value');性能优化建议
- 避免大对象深度响应式转换
- 合理使用
Object.freeze()冻结不需要响应的数据 - 对于静态内容使用
v-once指令 - 复杂计算使用计算属性而非模板内表达式
