Vue3 VS Vue2

Vue3 VS Vue2

0. 目錄
1. RFC 機制（https://github.com/vuejs/rfcs）
2. 底層響應式調整 defineProperty -> proxy
3. 生態 vite vs webpack
4. TS vs JS
5. Options API vs composition API
6. 新api: setup鉤子，ref，reactive 等
7. 總結

1. RFC 機制（https://github.com/vuejs/rfcs）

Vue 3 的第一個新特性和代碼無關，而是 Vue 團隊開發的工作方式。關於 Vue 的新語法或者新功能的討論，都會先在 GitHub 上公開徵求意見，邀請社區所有的人一起討論， 你隨時可以打開這個項目，我把鏈接放在這裏。Vue 3 正在討論中的新需求，任何人都可以圍觀、參與討論和嘗試實現。這個改變讓 Vue 社區更加有活力。

2. 底層響應式調整 defineProperty -> proxy

Vue 2 的響應式機制是基於 Object.defineProperty()這個 API 實現的，而Vue3是使用了 Proxy，這兩者看起來都像是對數據的讀寫進行攔截，但是 defineProperty 是攔截具體某個屬性，Proxy 纔是真正的“代理”。怎麼理解這兩者的區別呢？ 我們首先看 defineProperty 這個 API，defineProperty 的使用，要明確地寫在代碼裏，下面是示例代碼：

Object.defineProperty(obj, 'title', {  get() {},  set() {},})

當項目裏“讀取 obj.title”和“修改 obj.title”的時候被 defineProperty 攔截，但 defineProperty 對不存在的屬性無法攔截，所以 Vue 2 中所有數據必須要在 data 裏聲明。 而且，如果 title 是一個數組的時候，對數組的操作，並不會改變 obj.title 的指向，雖然我們可以通過攔截.push 等操作實現部分功能，但是對數組的長度的修改等操作還是無法實現攔截，所以還需要額外的$set、$delete 等 API。

而 Proxy 這個 API 就是真正的代理了，我們先看它的用法：

new Proxy(obj, {  get() { },  set() { },})


var target = {};var handler = {};var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

需要注意的是，雖然 Proxy 攔截 obj 這個數據，但 obj 具體是什麼屬性，Proxy 則不關心，統一都攔截了。而且 Proxy 還可以監聽更多的數據格式，比如Set、Map，這是Vue 2 做不到的。當然，Proxy 存在一些兼容性問題，這也是爲什麼 Vue 3 不兼容 IE11 以下的瀏覽器的原因，還好現在 IE 用的人不多了。更重要的是，我覺得 Proxy 代表一種方向，就是框架會越來越多的擁抱瀏覽器的新特性。 在 Proxy 普及之前，我們是沒有辦法完整的監聽一個 JavaScript 對象的變化，只能使用 Object.defineProperty() 去實現一部分功能。前端框架利用瀏覽器的新特性來完善自己，纔會讓前端這個生態更繁榮，拋棄舊的瀏覽器是早晚的事。 es6 中proxy不支持IE11，目前還是個問題，但已無傷大雅，IE終將成爲歷史

2015瀏覽器市場：

2020年瀏覽器市場：

瀏覽器內核：

3. 生態 vite vs webpack （https://blog.csdn.net/majing0520/article/details/114893365）

vite（https://zhuanlan.zhihu.com/p/424842555）

服務器啓動時間

webpack： 冷啓動開發服務器慢。webpack 基於打包器的方式，在提供服務前急切地抓取和構建整個應用；

Vite： 縮短數倍的冷啓動時間，啓動開發服務器更快。 一開始將應用中的模塊區分爲 依賴 和 源碼 兩類，改進了開發服務器啓動時間； Vite 將會使用 esbuild 預構建依賴和依賴緩存； 利用瀏覽器對 ESM 的支持，按需加載，減少不必要的時間開支；

熱更新速度

webpack： 當基於打包器啓動時，編輯文件後將重新構建文件本身，熱更新較慢； HMR 更新速度也會隨着應用規模的增長而顯著下降。

Vite： Vite 同時利用 HTTP 頭來加速整個頁面的重新加載，依賴模塊通過與構建進行緩存，減少再次請求，熱更新較快。 在 Vite 中，HMR 是在原生 ESM 上執行的，HMR 不會隨着規模的增長而改變速度；

生態

webpack： 已經主宰多年，版本穩定；生態豐富，它的 loader 和 plugin 非常多；使用者較多；項目使用相對來說風險較低；

Vite： Vite 初出茅廬，鋒芒畢露，還在迭代優化升級中；在生態上不如 webpack，社區插件較少；目前較多的是觀望者，沒有大規模使用，很多問題還沒有暴露出來，因此項目使用風險相對於 webpack 而言更高。

4. TS vs JS (https://www.jianshu.com/p/0dfbcd4a0757)

TS示例：

class Animal {
  constructor(public name: string) {}
}
//不加new是修飾函數的,加new是修飾類的
interface WithNameClass {
  new (name: string): Animal;
}
function createAnimal(clazz: WithNameClass, name: string) {
  return new clazz(name);
}
let a = createAnimal(Animal, "hello");
console.log(a.name);

TypeScript 的優勢

下面列舉 TypeScript 相比於 JavaScript 的顯著優勢：

1. 靜態輸入 靜態類型化是一種功能，可以在開發人員編寫腳本時檢測錯誤。查找並修復錯誤是當今開發團隊的迫切需求。有了這項功能，就會允許開發人員編寫更健壯的代碼並對其進行維護，以便使得代碼質量更好、更清晰。
2. 大型的開發項目 有時爲了改進開發項目，需要對代碼庫進行小的增量更改。這些小小的變化可能會產生嚴重的、意想不到的後果，因此有必要撤銷這些變化。使用TypeScript工具來進行重構更變的容易、快捷。
3. 更好的協作 當開發大型項目時，會有許多開發人員，此時亂碼和錯誤的機也會增加。類型安全是一種在編碼期間檢測錯誤的功能，而不是在編譯項目時檢測錯誤。這爲開發團隊創建了一個更高效的編碼和調試過程。
4. 更強的生產力 乾淨的 ECMAScript 6 代碼，自動完成和動態輸入等因素有助於提高開發人員的工作效率。這些功能也有助於編譯器創建優化的代碼。

---

JavaScript 的優勢

相比於 TypeScript，JavaScript 也有一些明顯優勢。

1. 人氣 JavaScript 的開發者社區仍然是巨大而活躍的，在社區中可以很方便地找到大量成熟的開發項目和可用資源。
2. 學習曲線 由於 JavaScript 語言發展的較早，也較爲成熟，所以仍有一大批開發人員堅持使用他們熟悉的腳本語言 JavaScript，而不是學習 TypeScript。
3. 本地瀏覽器支持 TypeScript 代碼需要被編譯（輸出 JavaScript 代碼），這是 TypeScript 代碼執行時的一個額外的步驟。
4. 不需要註釋 爲了充分利用 TypeScript 特性，開發人員需要不斷註釋他們的代碼，這>可能會使項目效率降低。
5. 靈活性 有些開發人員更喜歡 JavaScript 的靈活性。

TS學習（https://mp.weixin.qq.com/s/Ra7GJUDXkViIWck3VJHyfw）

5. Options API vs composition API

6. 新語法:

新api: setup鉤子，ref，reactive 等

// script setup語法糖

<script setup>
import { ref } from "vue"
let count = ref(1)
let color = ref('red')
function add() {
    count.value++
    color.value = Math.random()>0.5? "blue":"red"
}
</script>
<style scoped>h1 {  color:v-bind(color);}</style>

import { reactive, isReactive, ref } from 'vue'
export default {
    setup() {
        const state = reactive({
            name: 'John'
        })
        let a = ref(1)
        console.log(isReactive(state)) // -> true
        console.log(‘a’,a.value)
    }}

import { ref, watchEffect, computed } from "vue";
let title = ref("");
let todos = ref(JSON.parse(localStorage.getItem('todos')||'[]'));
watchEffect(()=>{
	localStorage.setItem('todos',JSON.stringify(todos.value))
})
function addTodo() {
	todos.value.push({    title: title.value,    done: false,  });
	title.value = "";
}

7. 總結

vue3.2 + TS + volar = 真香

Vue項目vite腳手架創建(Node.js版本 >= 12.0.0) https://blog.csdn.net/Ed7zgeE9X/article/details/114683557

npm init @vitejs/app vite_pro

後臺demo參考:https://github.com/lin-xin/vue-manage-system.git