一、响应式系统
Vue 2 的响应式系统
Vue 2 使用了基于依赖收集的观察模式。对于对象，Vue 2 会遍历对象属性，为每个属性创建一个 Watcher 实例，并在访问这些属性时收集依赖。当属性改变时，会通知相关的 Watcher 更新视图。
Vue 2 响应式原理代码示例
Javascript
深色版本
// Vue 2 的数据响应式部分简化示例
function observe(value) {
if (!value || typeof value !== 'object') {
return;
}
new Observer(value);
}
function defineReactive(obj, key, val) {
let dep = new Dep();
Object.defineProperty(obj, key, {
get() {
Dep.target && dep.addDep(Dep.target);
return val;
},
set(newVal) {
if (newVal === val) return;
val = newVal;
dep.notify();
}
});
}
function initState(vm) {
const opts = vm.$options;
if (opts.data) {
vm._data = data = opts.data;
for (const key in data) {
proxy(vm, '_data', key);
}
observe(data);
}
}
function proxy(target, sourceKey, key) {
Object.defineProperty(target, key, {
get() {
return target[sourceKey][key];
},
set(val) {
target[sourceKey][key] = val;
}
});
}
class Dep {
constructor() {
this.deps = [];
}
addDep(dep) {
this.deps.push(dep);
}
notify() {
this.deps.forEach(dep => dep.update());
}
}
Vue 3 的响应式系统
Vue 3 利用了 JavaScript 的 Proxy 对象来实现数据的响应性，这使得整个过程更为简洁和高效。Proxy 对象可以拦截对象的访问和修改操作，并执行相应的处理逻辑。
Vue 3 响应式原理代码示例
Javascript
深色版本
import { reactive, effect } from 'vue';
const state = reactive({ count: 0 });
effect(() => {
console.log('Count is now ', state.count);
});
state.count++; // 输出 "Count is now 1"
这里 reactive 创建了一个响应式对象，而 effect 则是一个副作用函数，它会在依赖的数据发生变化时自动重新运行。
二、Composition API
Vue 3 引入了 Composition API，这是一组新的 API，用于在 Vue 组件中以函数的方式组织和重用逻辑。与 Options API 相比，Composition API 更适合逻辑的复用和测试。
Vue 2 Options API 示例
Vue
深色版本
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
Vue 3 Composition API 示例
Vue
深色版本
<template>
<div>{{ count }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
onMounted(() => {
console.log('Component mounted');
});
return {
count,
increment
};
}
};
</script>
三、其他改进
性能优化：Vue 3 重构了渲染器，提高了性能。
TypeScript 支持：Vue 3 原生支持 TypeScript，提供了更好的类型定义和工具支持。
构建工具：Vue 3 使用 Rollup 构建工具替代了 Webpack，提供了更好的 Tree-shaking 支持。
依赖项更新：Vue 3 升级了许多底层依赖库，如 Lodash 至按需引入的 lodash-es。
总结
Vue 3 相对于 Vue 2 的主要改进在于响应式系统的现代化（使用 Proxy）、Composition API 的引入以及整体性能和类型的改进。这些变化使得 Vue 3 更加灵活、强大和易于维护。
