在v3版本中將data的返回值進(jìn)行了標(biāo)準(zhǔn)化，只接受返回Object的Function, 而在v2版本中同時(shí)支持返回Object和返回Object的Function。

v3版本中關(guān)于Object的合并是覆蓋，而不是合并。

const mixinObject = {
  data(){
    return {
      user:{
        id:1,
        name:'jack'
      }
    }
  }
}

const CompA = {
  mixins: [mixinObject],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}

// 結(jié)果是
user: {
  id: 2
}

復(fù)制代碼

在v2版本中，通常使用$on, $off來(lái)實(shí)現(xiàn)全局事件總線，使用$once綁定監(jiān)聽一個(gè)自定義事件，其實(shí)這些在實(shí)際項(xiàng)目中用到的也不會(huì)特別多，在v3版本移除后，可以通過(guò)一些外部庫(kù)來(lái)實(shí)現(xiàn)相關(guān)需求。例如 mitt

v3版本中刪除了過(guò)濾器， {{ calcNum | filter }}將不在支持，官方建議使用computed屬性替換過(guò)濾器（well done ~）。

在v3版本中支持了可以有多個(gè)根節(jié)點(diǎn)的組件，可以減少節(jié)點(diǎn)層級(jí)深度。但也希望開發(fā)者能夠明確語(yǔ)義。

復(fù)制代碼

在將v3版的變化之前我們先來(lái)回顧一下v2版本的函數(shù)式組件,它有兩種創(chuàng)建方式： functional attribute 和 { functional : true } 選項(xiàng)，代碼分別如下

// attribute 方式


// 選項(xiàng)方式
export default = {
  functional:true,
  props:{
      ...
  },
  render:function(createElement,context){
      ...
      /**
       context傳遞了一些參數(shù)：
       props,slots,parent,listeners,injections
      **/
  }
}
復(fù)制代碼

v2版本中組件有兩種組件類型：有狀態(tài)組件和函數(shù)式組件（無(wú)狀態(tài)組件）,相對(duì)于有狀態(tài)組件，函數(shù)式組件不需要被實(shí)例化，無(wú)狀態(tài)，沒(méi)有生命周期鉤子，它們的渲染速度遠(yuǎn)高于有狀態(tài)組件。往往通常被適用于功能單一的靜態(tài)展示組件從而優(yōu)化性能。除此之外，函數(shù)式組件還有返回多個(gè)根節(jié)點(diǎn)的能力。

在v3版本中，有狀態(tài)組件和函數(shù)式組件之間的性能差異已經(jīng)大大減少，在大部分場(chǎng)景下幾乎可以忽略不計(jì)。所以函數(shù)式組件唯一的優(yōu)勢(shì)就在一返回多節(jié)點(diǎn)的能力，但這種通常運(yùn)用比較少，且組件往往比較簡(jiǎn)單，具體語(yǔ)法糖如下：

// 函數(shù)創(chuàng)建
import { h } from 'vue'

const DynamicHeading = (props, context) => {
  // context是一個(gè)包含 attrs,slots,emit的對(duì)象 
  return h(`h${props.level}`, context.attrs, context.slots)
}

DynamicHeading.props = ['level']

export default DynamicHeading


// 單文件組件(SFC)



復(fù)制代碼

v3版本中新增了一個(gè)新的全局APIcreateApp，通過(guò)ES模塊的方式引入。調(diào)用createApp返回一個(gè)應(yīng)用實(shí)例，該應(yīng)用實(shí)例暴露出來(lái)全局API，這是Vue3的新概念，主要解決了不同"app"之間能夠共享資源（配置，全局組件，指令等等）。我們來(lái)對(duì)比一下v3和v2分別創(chuàng)建應(yīng)用的改變。

// v2 創(chuàng)建
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
// v3 創(chuàng)建
import { createApp } from 'vue'
import App from './App.vue'
var app = createApp(App);
app.mount('#app')
復(fù)制代碼

在"app"之間共享配置的一種方式是工廠模式：

import { createApp } from 'vue'
import App1 from './App1.vue'
import App2 from './App2.vue'

const createMyApp = options => {
  const app = createApp(options)
  app.directive('focus' /* ... */)
  return app
}

createMyApp(App1).mount('#foo')
createMyApp(App2).mount('#bar')
復(fù)制代碼

v3將可以全局改變Vue行為的API從原來(lái)的Vue構(gòu)造函數(shù)上轉(zhuǎn)移到了實(shí)例上了。列表如下

除此之外，還有一些全局API和內(nèi)部組件都做了重構(gòu)，考慮到tree-shaking，只能通過(guò)ES模塊的方式導(dǎo)入，意味著當(dāng)你的應(yīng)用程序中沒(méi)用到的組件和接口都不會(huì)被打包。受影響的API列表如下：

• Vue.nextTick
• Vue.observable (用 Vue.reactive 替換)
• Vue.version
• Vue.compile (僅全構(gòu)建)
• Vue.set (僅兼容構(gòu)建)
• Vue.delete (僅兼容構(gòu)建)

// 錯(cuò)誤使用
import Vue from 'vue'

Vue.nextTick(() => {
  // 一些和DOM有關(guān)的東西
})


// 正確使用
import { nextTick } from 'vue'

nextTick(() => {
  // 一些和DOM有關(guān)的東西
})
復(fù)制代碼

重頭戲?。?！

這是v3中的新概念，vue給我們提供了一些新的api，這些新的api在一個(gè)地方使用，而這個(gè)地方就是vue給我們新提供了一個(gè)從組件初始化到銷毀的過(guò)程中我們能夠做一些事情的地方，我將之理解為鉤子函數(shù)——Setup,在Setup里，你可以做原本你能在vue組件里面能做的所有事情，比如你在created,mounted，computed，watch,methods 里面做的所有事情，都能在Setup里面完成，那要怎么才能做到呢，就是要通過(guò)vue提供的那些新的API。

那這個(gè)東西主要解決什么事情呢？我們都知道組件的作用就是對(duì)功能的提取以及代碼的復(fù)用。這使得我們的程序在靈活性和可維護(hù)性上能走的更遠(yuǎn)，但是這還不夠，當(dāng)一個(gè)組件內(nèi)部的邏輯很復(fù)雜的時(shí)候，我們將邏輯分別散落在 created,mounted,methods，computed，watch里面，然后整個(gè)文件代碼長(zhǎng)達(dá)好幾百行。這對(duì)于沒(méi)有編寫這個(gè)組件的人來(lái)說(shuō)，嘗試去理解這些邏輯代碼無(wú)疑是最頭疼的事情。而Setup正是解決了這個(gè)事情，將所有的邏輯都集中起來(lái)在Setup中處理。從今以后，當(dāng)你想制造一輛汽車的時(shí)候，你再也不用去全世界進(jìn)口各種零件，你在Setup工廠中就能完成。

讓我們來(lái)見(jiàn)識(shí)一下Setup和那些新的API的使用以及作用(聽說(shuō)這種東西才被稱之為干貨？？？)：

Setup

如果你聽懂了我上面所說(shuō)的，那我開局這么寫你應(yīng)該也能理解了：

// 當(dāng)運(yùn)行起來(lái)打印了run
復(fù)制代碼

Setup可以返回一個(gè)對(duì)象，你可以在組件的其他地方訪問(wèn)這個(gè)對(duì)象中的屬性。

注意：在執(zhí)行Setup的時(shí)候尚未創(chuàng)建組件實(shí)例，所以在Setup中沒(méi)有this。不過(guò)它提供了兩個(gè)接收參數(shù)——props和context。在Setup中無(wú)法訪問(wèn)組件中其他的任何屬性。

// 調(diào)用Demo組件


// Demo 組件


復(fù)制代碼

我們會(huì)發(fā)現(xiàn)試圖并沒(méi)有更新，我們發(fā)現(xiàn)setup返回的對(duì)象不是響應(yīng)式的，響應(yīng)式我們應(yīng)該不陌生，在data()選項(xiàng)中的property都是響應(yīng)式的，那是應(yīng)為Vue在組件初始化的過(guò)程中就已經(jīng)對(duì)data()中的property創(chuàng)建了依賴關(guān)系。所以當(dāng)property發(fā)生變化時(shí)，視圖即會(huì)自動(dòng)更新，這就是響應(yīng)式。那怎么讓它變成響應(yīng)式的呢？

ref & reactive

我們可以通過(guò)ref,reactive創(chuàng)建響應(yīng)式狀態(tài),

我們使用ref可以創(chuàng)建基礎(chǔ)數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型的響應(yīng)式狀態(tài)，使用reactive只能創(chuàng)建復(fù)雜數(shù)據(jù)類型的響應(yīng)式狀態(tài),如果使用創(chuàng)建數(shù)據(jù)類型不正確，控制臺(tái)會(huì)給出對(duì)應(yīng)的警告value cannot be made reactive: **。那ref和reactive的區(qū)別到底在哪里呢？

const refNum = ref(10);
const refObj = ref({
  name:'jac',
  age:20
});
const reactiveNum = reactive(10);
const reactiveObj = reactive({
  name: 'jac',
  age: 20
})
console.log('refNum',refNum);
console.log('refObj',refObj);
console.log('reactiveNum', reactiveNum);
console.log('reactiveObj', reactiveObj);
復(fù)制代碼

結(jié)果如下：

當(dāng)ref創(chuàng)建的是復(fù)雜數(shù)據(jù)類型的時(shí)候內(nèi)部其實(shí)也是用reactive創(chuàng)建的。所以ref也是可以創(chuàng)建復(fù)雜數(shù)據(jù)類型的響應(yīng)狀態(tài)的，只是在setup中寫法會(huì)有所不同。

setup(){
  const refObj = ref({
    name:'jac',
    age:20
  });
  const reactiveObj = reactive({
    name: 'jac',
    age: 20
  })
  // ref 方式的更新
  const changeRefObj = () => {
    refObj.value.name="mac"
  }
  // reactive 方式的更新
  const changeReactiveObj = () => {
    reactiveObj.name = 'mac'
  }
  return {
    ...
  }
}
復(fù)制代碼

注意： 通過(guò)ref對(duì)值進(jìn)行了包裹，在Setup中你需要使用變量.value的方式進(jìn)行訪問(wèn)和設(shè)置值，從Setup中暴露出去的對(duì)象你可以直接通過(guò)this.變量訪問(wèn)。

復(fù)制代碼

小伙伴可以根據(jù)自己的編碼習(xí)慣選擇運(yùn)用。

toRef & toRefs

有時(shí)候我們想通過(guò)解構(gòu)的方式從一個(gè)復(fù)雜的響應(yīng)式變量中剝離出一些變量時(shí)，我們的代碼可能是這樣的：

復(fù)制代碼

這樣會(huì)使我們解構(gòu)出來(lái)的兩個(gè)property失去響應(yīng)性，這個(gè)時(shí)候我們需要使用toRef和toRefs從中解構(gòu)出來(lái)，toRef用于解構(gòu)出單個(gè)property的響應(yīng)式變量，toRefs是將源對(duì)象中所有property都創(chuàng)建響應(yīng)式變量，在通過(guò)解構(gòu)的方式創(chuàng)建我們對(duì)應(yīng)的變量。

復(fù)制代碼

// 輸出結(jié)果如下：
我首先執(zhí)行
created執(zhí)行了
onMounted也執(zhí)行了，結(jié)果輸出如下
0
總計(jì)數(shù):1
mounted執(zhí)行了
復(fù)制代碼

// demo組件中提供



// test組件中注入使用



復(fù)制代碼

// a.js
import { ref, onMounted } from 'vue'
export default function doSomething(refName,fn){
  const a = ref(0);
  const b = ref(0);
  // ...,
  onMounted(() => {
   fn();
  })

  return {
    a,
    b
  }
}

//b.js
import doSomething from './a.js';
setup(){
  const {a,b} = doSomething('box',()=>{
    console.log('執(zhí)行');
  })
}
復(fù)制代碼

// Demo.vue
export default {
  name: "Demo",
  props: {
    title:String,
    label:String
  },
  methods: {
    titleEmit(value) {
      this.$emit('update:title', value)
    },
    labelEmit(value) {
      this.$emit('update:label', value)
    }
  },
}

// 調(diào)用Demo.vue

復(fù)制代碼

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

// 下面按部就班的創(chuàng)建
復(fù)制代碼

yarn create vite-app my-vue-ts --template vue-ts