尝试vue3的学习。

2020-7-29日
目前创建vue3项目有几种方式，其中较为流行的是在vue2项目中下载导入vue3的composition api。并在main.js中导入api并使用，下载代码如下：

npm install @vue/composition-api --save

引用如下：

import vueComponsition from '@vue/composition-api'
Vue.use(vueComponsition)

之后我们就可以基于vue2的项目尝试vue3的语法特性。
第二种是在创建的时候直接创建vue3的项目，在创建好vue2的项目下，执行
vue add vue-next
就可以搭建vue3的项目，项目创建好之后需要对项目进行一些修改，
vue3相对于vue2来说在使用方面做出了一些调整，首先就是在data，methods ，以及生命周期上的调整。在vue3中我们所使用到的方法都需要在cmponsition api中进行引入。
首先就是vue3取消了data等节点，用setup函数进行数据以及方法的声明。setup函数的执行时机相对于vue2来说，他会在beforecreate，跟created之间执行。
vue3的响应式数据的声明有两个方式，无论是那种方式都需要在setup函数中return出去
第一种是通过ref函数

    const age = ref(49)

通过ref函数声明的响应式数据，在setup函数中需要通过.value调用数值，retuen出去之后页面中不需要.value。
第二种是通过reactive函数，这个函数接受一个对象，对象就是响应式的数据

      const state = reactive({
        name: 'renyu',
        age: '22'
      }) 

同样也需要将state return出去，但是当state中的值超过一个之后，在return的时候通过toRefs函数展开出来。

      return {
        ...toRefs(state)
      }