vue3.0已经beta版了
就在昨天尤雨溪发布了VUE3.0 Beta版本，各路大神也都抢先体验了一波！本汪也放下了手上的工作去初步体验了一番。接下来会结合vue2.0和3.0的异同点进行介绍
一、入手第一步
1.首先利用cli3脚手架工具对项目进行初始化，为了将2个vue版本进行对比我初始化了2个项目,分别给文件夹命名为vue2.0和vue3.0,为了方便演示，配置方面我就选择了Babel。
初始化完成以后，进入到根路径下的package.json文件里，因为目前cli3.0构建的项目仍然是使用vue2.0的版本
我们现在可以在命令行工具里输入 vue add vue-next 指令将目前项目的vue版本升级到3.0 beta版本，当配置出现以下内容就说明安装成功了
二、升级到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的返回值，对值进行操作。
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
