Vue 3.0 的重大改動暴露了哪些問題

vue升級的幾大主要內容

• 內置方法模塊化 import { value, computed, watch, onMounted } from 'vue'
• diff算法的重改，速度提高了6倍
• 增強typescript的支持
• 開放更多底層功能
• 固然最重要的仍是 function based

function based 它作了哪些工做

function based主要代替mixins 首先對比mixins和function based的調用方法

mixins

mixins: [mixin]
複製代碼

mixins 顯然咱們不知道它給咱們提供了哪些方法和數據，形成了數據來源的不清晰，多個mixin的注入也會引發命名衝突的問題

function based

const { x, y } = useMouse()
複製代碼

而 function based顯然要咱們將用到的東西先拿出來，那麼就很好的解決了這些問題，而react的hooks也有解決這個問題的存在，高級組件顯然也形成了數據來源不清晰的事情。結尾在比對react的hooks和vue的function based。這裏不在過多闡述。

function based 暴露出vue的問題

若是function based只是爲了代替mixing那麼就這樣就能夠了。然而function based是爲了更好的支持typescript所出現的。

先看看使用function based要怎麼寫組件，固然我相信3.0應該還會保留2.0的組件寫法。

import { value, computed, watch, onMounted } from 'vue'

const App = {
  template: `
    <div>
      <span>count is {{ count }}</span>
      <span>plusOne is {{ plusOne }}</span>
      <button @click="increment">count++</button>
    </div>
  `,
  setup() {
    // reactive state
    const count = value(0)
    
    // computed 的不在有指定區域了，每一個computed都要調用一個computed的函數包裝了
    const plusOne = computed(() => count.value + 1)
    
    // method 也沒有指定區域了
    const increment = () => { count.value++ }
    
    // watch 也沒有指定區域了， 也要一個watch實際都要包裝一個watch函數了
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    
    // 2.0 的data
    return {
      count,
      plusOne,
      increment
    }
  }
}
複製代碼

看着是否是更接近jsx了，想一想react是否是也就是這樣，各類方法都沒有一個指定區域，要作什麼本身去調用。

由於一個typescript組件的寫法就大改了一次，那麼會不會再出現一個東西使vue的寫法又一次大改呢？爲何我不太擔憂react，咱們先來看看react的寫法

// 函數
function FriendListItem(props) {
    // 函數
  const isOnline = useFriendStatus(props.friend.id);

    // return出去的值
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
複製代碼

是否是更像原生js，全部庫，框架等等都會去兼容原生js這是確定的，若是連原生js都不兼容那就不叫js庫或者框架了。那麼react的這種寫法顯然更容易引入各類庫也獲得各類庫的兼容，從此次的typescript橫空出世就看到了，react任他風吹雨打 我自巋然不動。而vue慘遭大改。

這也是我不得不擔憂vue下次是否是還會遭遇外部緣由而出現比較大的變更

function based 和 react hooks的對比

從功能上看，你們都作到了邏輯複用去代替原先的mixins和高階組件。也解決了原先的一些問題。

vue的function based第二個功能是去兼容typescript

react hooks是去模擬生命週期，嘗試放棄class實例轉向純函數，你們應該都知道純函數的性能要比class實例好一點，這也是官網只要去介紹了怎麼去模擬生命週期，而不是把重點放在複用上。

總結

vue對性能提高不錯，也加入了更多的底層api，相信會對你們有所幫助，vue因typescript的修改也不得不讓人深思。對於vue只兼容IE11我的是持無所謂的態度，本人也並非一個保守派首先你們電腦裏基本自帶的都是IE11。至於IE8都在xp這類老系統裏。至於一些個別部門須要IE8的需求，咱們一般操起jq和webpack去作多頁應用。vue2.x也就不了你。因此這塊的變更其實對業務差異很少

固然vue對diff的升級顯然會對性能有很大的提高，react應該會在以後把vue的diff思路運用到本身的diff裏。對於社區一些人總會說vue抄誰誰誰的，我其實並不認同這個觀點。後起之秀固然要參考老前輩的思路，加以運用和改造，別人本身閉門造車，想一想均可怕。固然vue出了新思路，react也確定會去參考。你們的目的都是爲了社區更繁榮。

同時我也不喜歡別人說IE怎麼怎麼壞，你讓chrome在xp中看看，估計也就那樣