一、響應式系統
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 更加靈活、強大和易於維護。
