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)
}