vue3.0已經beta版了

image.png

就在昨天尤雨溪發布了VUE3.0 Beta版本，各路大神也都搶先體驗了一波！本汪也放下了手上的工作去初步體驗了一番。接下來會結合vue2.0和3.0的異同點進行介紹

一、入手第一步

1.首先利用cli3腳手架工具對項目進行初始化，為了將2個vue版本進行對比我初始化了2個項目,分別給文件夾命名為vue2.0和vue3.0,為了方便演示，配置方面我就選擇了Babel。

image.png

初始化完成以后，進入到根路徑下的package.json文件里，因為目前cli3.0構建的項目仍然是使用vue2.0的版本

image.png

我們現在可以在命令行工具里輸入 vue add vue-next 指令將目前項目的vue版本升級到3.0 beta版本，當配置出現以下內容就說明安裝成功了

image.png

二、升級到vue 3.0的變化

首先我們先打開main.js文件，會發現它與過去的版本發生了一些變化：

//vue3.0
import { createApp } from 'vue';
import App from './App.vue'
createApp(App).mount('#app')

//vue2.0
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

通過上述的代碼我們會發現3.0比2.0的要精簡了許多，同時還引入了一個新的函數名createApp,會把容器掛載到它上面來。

三、進入正題

接下來我會從以下幾個屬性及常用的方法，將2.0和3.0進行一些對比：

Data
Method
LifeCycle
Computed
Components

1.Data

export default {
  data(){
    return{

    }
  }
},
///////////////////////
取而代之是使用以下的方式去初始化數據:
<template>
  <div class="hello">
    123
  </div>
  <div>{{name.name}}</div>
</template>
import {reactive} from 'vue' 
export default {
 setup(){
   const name = reactive({
     name:'hello 番茄'
   })
   return {name}
 }  
}

tip:在新版當中setup等效于之前2.0版本當中得到beforeCreate,和created，它是在組件初始化的時候執行，甚至是比created更早執行。值得注意的是,在3.0當中如果你要想使用setup里的數據，你需要將用到值return出來，返回出來的值在模板當中都是可以使用的。
假設如果你不return出來，而直接去使用的話瀏覽器是會提醒你：

runtime-core.esm-bundler.js?5c40:37 [Vue warn]: Property "name" was accessed during render but is not defined on instance. 
  at <Anonymous>  
  at <Anonymous> (Root)

這個也是3.0當中需要注意的地方。細心的朋友應該已經發現，我在模板里放入2個子節點,其實這個在2.0里是不被允許的,這也是3.0的一項小的改變 reactive是3.0提供的一個數據響應的方式，它主要是對對象進行數據響應，接下來會介紹另一種數據響應的方式ref。

2.Method

  <div class="hello">
    <div>{{name.name}}</div>
    <div>{{count}}</div>
    <button @click="increamt">button</button>
  </div>
  
</template>

<script>
import {reactive,ref} from 'vue'
export default {
 setup(){
   const name = reactive({
     name:'王'
   })
   const count=ref(0)
   const increamt=()=>{
     count.value++
   }
   return {name,count,increamt}
 }  
}

在介紹Method的代碼中，我引用了vue提供的ref新函數，它的作用是用來創建一個引用值，它主要是對String,Number,Boolean的數據響應作引用。也許有人會問，為什么不直接給count賦值，而是采用ref(0)這樣的方式來創建呢，按我的理解就是，如果直接給count賦值就是等于把這個值直接拋出去了，就很難在找到它，而采用ref這種方法等于你在向外拋出去值的是同時，你還在它身上牽了一根繩子，方便去追蹤它。
需要注意的時，在ref的函數中，如何你要去改變或者去引用它的值，ref的這個方法提供了一個value的返回值，對值進行操作。

image.png

3.LifeCycle(Hooks) 3.0當中的生命周期與2.0的生命周期出現了很大的不同：
beforeCreate -> 請使用 setup()

created -> 請使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

如果要想在頁面中使用生命周期函數的，根據以往2.0的操作是直接在頁面中寫入生命周期，而現在是需要去引用的，這就是為什么3.0能夠將代碼壓縮到更低的原因。

import {reactive, ref, onMounted} from 'vue'
export default {
 setup(){
   const name = reactive({
     name:'王'
   })
   const count=ref(0)
   const increamt=()=>{
     count.value++
   }
   onMounted(()=>{
     console.log('123')
   })
   return {name,count,increamt}
 }  

舉個栗子：

過去的2.0就像是我們在餐廳吃飯，是等菜上齊了我們再開始吃飯，有的時候菜點多了就會造成不必要的浪費。而現在的3.0更像是在吃自助餐，你吃多少就拿多少，就不會造成浪費。

4.computed

<template>
  <div class="hello">
    <div>{{name.name}}</div>
    <div>{{count}}</div>
    <div>計算屬性{{computeCount}}</div>
    <button @click="increamt">button</button>

  </div>
  
</template>

<script>
import {reactive, ref, onMounted,computed} from 'vue'
export default {
 setup(){
   const name = reactive({
     name:'王'
   })
   const count=ref(0)
   const increamt=()=>{
     count.value++
   }
   const computeCount=computed(()=>count.value*10)//使用computed記得需要引入，這也是剛接觸3.0容易忘記的事情
   onMounted(()=>{
     console.log('123')
   })
   return {name,count,increamt,computeCount}
 }  
}
</script>

下一篇我們來討論下vue3.0組件的變化和調用

Props
Emit