vue3.0已經(jīng)beta版了
就在昨天尤雨溪發(fā)布了VUE3.0 Beta版本忆某，各路大神也都搶先體驗(yàn)了一波液南！本汪也放下了手上的工作去初步體驗(yàn)了一番。接下來(lái)會(huì)結(jié)合vue2.0和3.0的異同點(diǎn)進(jìn)行介紹
一诵棵、入手第一步
1.首先利用cli3腳手架工具對(duì)項(xiàng)目進(jìn)行初始化两蟀，為了將2個(gè)vue版本進(jìn)行對(duì)比我初始化了2個(gè)項(xiàng)目,分別給文件夾命名為vue2.0和vue3.0,為了方便演示，配置方面我就選擇了Babel碧注。
初始化完成以后嚣伐，進(jìn)入到根路徑下的package.json文件里，因?yàn)槟壳癱li3.0構(gòu)建的項(xiàng)目仍然是使用vue2.0的版本
我們現(xiàn)在可以在命令行工具里輸入 vue add vue-next 指令將目前項(xiàng)目的vue版本升級(jí)到3.0 beta版本应闯，當(dāng)配置出現(xiàn)以下內(nèi)容就說(shuō)明安裝成功了
二纤控、升級(jí)到vue 3.0的變化
首先我們先打開(kāi)main.js文件，會(huì)發(fā)現(xiàn)它與過(guò)去的版本發(fā)生了一些變化：
//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')
通過(guò)上述的代碼我們會(huì)發(fā)現(xiàn)3.0比2.0的要精簡(jiǎn)了許多碉纺，同時(shí)還引入了一個(gè)新的函數(shù)名createApp,會(huì)把容器掛載到它上面來(lái)船万。
三、進(jìn)入正題
接下來(lái)我會(huì)從以下幾個(gè)屬性及常用的方法骨田，將2.0和3.0進(jìn)行一些對(duì)比：
Data
Method
LifeCycle
Computed
Components
1.Data
export default {
data(){
return{
}
}
},
///////////////////////
取而代之是使用以下的方式去初始化數(shù)據(jù):
<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:在新版當(dāng)中setup等效于之前2.0版本當(dāng)中得到beforeCreate,和created耿导，它是在組件初始化的時(shí)候執(zhí)行，甚至是比created更早執(zhí)行态贤。值得注意的是,在3.0當(dāng)中如果你要想使用setup里的數(shù)據(jù)舱呻，你需要將用到值return出來(lái)，返回出來(lái)的值在模板當(dāng)中都是可以使用的。
假設(shè)如果你不return出來(lái)箱吕，而直接去使用的話瀏覽器是會(huì)提醒你：
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)
這個(gè)也是3.0當(dāng)中需要注意的地方芥驳。細(xì)心的朋友應(yīng)該已經(jīng)發(fā)現(xiàn)，我在模板里放入2個(gè)子節(jié)點(diǎn),其實(shí)這個(gè)在2.0里是不被允許的,這也是3.0的一項(xiàng)小的改變 reactive是3.0提供的一個(gè)數(shù)據(jù)響應(yīng)的方式茬高，它主要是對(duì)對(duì)象進(jìn)行數(shù)據(jù)響應(yīng)兆旬，接下來(lái)會(huì)介紹另一種數(shù)據(jù)響應(yīng)的方式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新函數(shù)丽猬，它的作用是用來(lái)創(chuàng)建一個(gè)引用值，它主要是對(duì)String,Number,Boolean的數(shù)據(jù)響應(yīng)作引用熏瞄。也許有人會(huì)問(wèn)脚祟，為什么不直接給count賦值，而是采用ref(0)這樣的方式來(lái)創(chuàng)建呢强饮，按我的理解就是由桌，如果直接給count賦值就是等于把這個(gè)值直接拋出去了，就很難在找到它胡陪，而采用ref這種方法等于你在向外拋出去值的是同時(shí)沥寥，你還在它身上牽了一根繩子，方便去追蹤它柠座。
需要注意的時(shí)邑雅，在ref的函數(shù)中，如何你要去改變或者去引用它的值妈经，ref的這個(gè)方法提供了一個(gè)value的返回值淮野，對(duì)值進(jìn)行操作。
3.LifeCycle(Hooks) 3.0當(dāng)中的生命周期與2.0的生命周期出現(xiàn)了很大的不同：
beforeCreate -> 請(qǐng)使用 setup()
created -> 請(qǐng)使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
如果要想在頁(yè)面中使用生命周期函數(shù)的吹泡，根據(jù)以往2.0的操作是直接在頁(yè)面中寫入生命周期骤星，而現(xiàn)在是需要去引用的，這就是為什么3.0能夠?qū)⒋a壓縮到更低的原因爆哑。
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}
}
舉個(gè)栗子：
過(guò)去的2.0就像是我們?cè)诓蛷d吃飯洞难，是等菜上齊了我們?cè)匍_(kāi)始吃飯，有的時(shí)候菜點(diǎn)多了就會(huì)造成不必要的浪費(fèi)揭朝。而現(xiàn)在的3.0更像是在吃自助餐队贱，你吃多少就拿多少，就不會(huì)造成浪費(fèi)潭袱。
4.computed
<template>
<div class="hello">
<div>{{name.name}}</div>
<div>{{count}}</div>
<div>計(jì)算屬性{{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>
下一篇我們來(lái)討論下vue3.0組件的變化和調(diào)用
Props
Emit
