說說 vue1、vue2 和 vue3 的區別


面試時被問到,那就趁機梳理一下 vue 的演進吧

vue2 比 vue1 的改進

詳見從Vue 1.x 遷移

生命周期

比如說 beforeCompile 移除, 使用 created 替代,compiled 移除,使用 mounted 替換等

語法

新數組語法 (value, index) in arr,並丟棄 $index 和 $key

過濾器廢棄,不再這樣寫 <p v-for="item in items | limitBy 10">{{ item }}</p>,改而在方法里自己做好分割

圍繞 DOM 的實例方法移除,比如說 vm.$appendTo 移除

單向數據流思想引入

v-model 變為語法糖,本質上變成了 emit 了一個 input 事件,並且在本組件內觸發它的更新。

$dispatch 和 $broadcast 廢棄

引入 vdom 虛擬節點

解偶 HTML 依賴,從此可以渲染到 DOM 意外的平台上,比如說 SSR。

vue3 比 vue2 的改進

vue 3 源碼:https://github.com/vuejs/vue-next

使用了 proxy 替代 Object.defineProperty

目前,Vue 的反應系統是使用 Object.defineProperty 的 getter 和 setter。 但是,Vue 3 將使用 ES2015 Proxy 作為其觀察者機制。 這消除了以前存在的警告,使速度加倍,並節省了一半的內存開銷。

為了繼續支持 IE11,Vue 3 將發布一個支持舊觀察者機制和新 Proxy 版本的構建

而為什么使用 Proxy 替代 Object.defineProperty?Proxy 可以劫持整個對象,並返回一個新的對象。Proxy 不僅可以代理對象,還可以代理數組,還可以代理動態增加的屬性。節省內存,速度加倍。關於 Proxy API 參見 MDN

新增 hook api

注意 setup

<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
</script>

使用 setup 的好處都有啥?詳細參見尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播完整版 2020-04-21,摘錄幾點

  • 便於 tree shaking。像是 transition 這樣的代碼,如果你沒有使用到,它就會被 tree shaking,函數式的引入便於計算它究竟有沒有被用到,而導出整個對象就沒辦法特意去掉某個不會使用的屬性。新的 vue 核心運行時壓縮后大概 10kb
  • 便於混淆壓縮使 vue 更小。因為 setup 是函數式引入的,引入進來的變量可以隨意命名混淆成 a,b,c 這樣的簡短字符,而對象的屬性不能被混淆。
  • 代碼組織更加清晰,不用再懼怕不知道哪里注入進來的 mixins 的屬性和方法,若是 react 也不用擔心不知道從哪里注入的 props 屬性。

讓 vue 更快的優化

像是重寫虛擬DOM,優化插槽生成,靜態樹提升,靜態屬性提升。詳見尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播完整版 2020-04-21,本人也整理了一篇 vue 3.0 beta 編譯優化研究。簡言之,vue 3 已經能做到 diff 時,只對有變量的區域遍歷,靜態的節點直接復用對象不需要 diff。

其他支持

更好的ts支持,vue 3 直接用 ts 重寫。

總結

從用 vue 1.x 開始到現在 vue 3.x 登場,中間過去 4 年了吧,不知不覺 vue 都做了如此多的改進,若不是查了下資料我甚至都想不起來 vue 的 vdom 是在 vue 2.x 時引入的。

參考

從Vue 1.x 遷移

Vue.js 3.0 新特性預覽

MDN Proxy

精讀《Vue3.0 Function API》


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM