一起来康康vue3.0的新特性

最近笔者的学习的课题是针对 vue3.0的新特性进行学习分享，本文先从vue3.0的新特性入手，介绍vue3.0相对vue2.0有所调整的部分，之后再补充vue3.0以及vue2.0响应式的原理的介绍，本文存在纰漏的地方，还请各位大牛多多指教ο(=•ω＜=)ρ⌒☆

注意：vue3.0兼容vue2.0 vue版本升级之后不需要更改关于vue部分的代码，但是项目中使用的相关的插件就不一定了~

1. 创建vue3.0项目的方法

（1）使用vite

npm init vite-app 项目名
cd 项目名
npm run dev

使用这种方式的优缺点：
 ① 创建速度快，不通过webpack编译

 ② 还需要自己安装vue-router、vuex (vue-router以及vuex都要相应的升级为4.0版本)

（2）利用vue-cli

npm install -g @vue/cli
vue create 项目名
cd 项目名
vue add vue-next //重点 执行这行,会把2.0代码改为3.0的, vue-router, vuex会变成4.0的
npm run serve

介绍完如果安装vue3.0，接下来，咱们就正式进入咱们今天的重点了~
2.相比于vue2.0，vue3.0的新变化

1、main.js，新增createApp方法

// vue2.0
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './App.scss'

new Vue({
   el: '#app',
   router,
   store,
   template: '',
   components: { App }
 })




// vue3.0
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './App.scss'

const app = createApp(App)
app.use(router).use(store).mount('#app');

注意： 由于vue3.0 使用的是 import {createApp} from 'vue' 而不是像vue2.0的import Vue from 'vue'。因此之前使用的ui框架以及第三方包可能会因为不支持vue3.0而报错。

2、template模板

vue2.0里template只支持单一根节点，在vue3.0里可以使用多个根节点

3、Composition API

在vue2.0里我们都把.vue文件里的js部分叫做Options API， 而在3.0里变为Composition API。

注：Composition API 里有vue3.0的新增的主要新特性：

（1）一个全新的属性 setup ，这是一个组件的入口，让我们可以运用 Vue3.0 暴露的新接口，它运行在组件被实例化时候，props 属性被定义之后，实际上等价于 Vue2.0 版本的 beforeCreate 和 Created 这两个生命周期，setup 返回的是一个对象，里面的所有被返回的属性值，都会被合并到 Vue2.0 的 render 渲染函数里面，在单文件组件中，它将配合 模板的内容，完成Model到View之间的绑定，在未来版本中应该还会支持返回 JSX 代码片段。

（2）setup函数的第一个参数 props 是父组件传进来的值，在 Vue2.0 中我们可以使用 props 属性值完成父子通信，在这里我们需要定义 props 属性去定义接受值的类型，然后我们可以利用 setup 的第一个参数获取 props 使用。

（3） setup 函数的第二个参数context是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 Vue2.0 中需要通过 this 才能访问到，在 vue3.0 中，访问他们变成以下形式：

context.parent--> this.$parent 

context.root--> this 

context.emit-->this.$emit 

context.refs-->this.$refs 

context.slots --> this.$slots

程序执行setup时，组件尚未被创建，因此能访问到的有用属性有： root、parent、refs、attrs、listeners、isServer、ssrContext、emit 于此同时 data、computed、methods等是访问不到的.

（4）setup()不单可以return 对象，还可以返回方法。

（5）利用watchEffect可以监听props。

// 父组件



// 子组件 Child