vue3与vue2

4.19 vue3正式beta，真让龙头疼，学无止境。趁休息去大致了解了下，你会发现，天崩地裂紫金锤。vue3和vue2共性很少，大概是由于函数式编程的兴起吧。在这里恭喜还没有入门vue2的，直接学习vue3（建议还是学习react吧，感觉vue是在追赶react的脚步），就不头大了
vue3 也叫vue-next 附上地址，可以去查看手册 vue-next

生命周期

beforeCreate->setup
created->setup
beforeMount->onBeforeMount
mounted->onMounted
beforeUpdate->onBeforeUpdate
updated->onUpdate
beforeDetroy-> onBeforeDetroy
destroyed->onUnmounted
errorCaptured -> onErrorCaptured

由上可知，最大的改变为setup

1. 声明改变

//vue2
let app = new Vue({
  el:xxx,
  xxxx
});

//vue3
let {create} = Vue;
create(Vue).mount("#app");

2. setup

• vue3使用setup定义入口，所有的定义和执行逻辑都在其内部定义执行
• setup第一个参数为props
• setup在组件创建时调用，代替了2的create和beforecreate
• this发生了改变，原来在Vue对象内部，this为vue，但是现在在setup里面，this可能是window或者undefined，和函数运行时有关

3. computed，vue2是定义在外部，vue3是在setup内定义，在数据上追加

//vue3 基本用法示例
const {reactive,computed} = Vue;
const App = {
    template:`<div>{{state.count}}</div>`,
    setup(){
    //所有函数，数据都需要在这里定义
        //相当于vue2的data，reactive为多数据，对象，ref为定义单数据，js中的基本类型 如let a = ref(0)
        const state = reactive({
            conut:0,
            double:computed(()=>state.count*2; //computed合成到data中，在vue2中computed数据是自动合成到data中2)
        })
        
    };
    function increment(){
        state.count++
    }
    return {state,increment}; //setup内return的数据会暴露给模板
}

时间有限只看了部分，如果有错误，望指正