4 月 16 日，vue 3 正式进入 beta 阶段，终于忍不住尝鲜的心情，今天来尝试一下 Vue 3.0 的新特性。
创建 Vue 3 项目
安装 vue-cli
// 安装 vue-cli
cnpm install -g @vue/cli
vue create 创建项目
vue create vue3.0
执行这步时，会有两个选项，我们选择第一个，先创建一个简单的 Vue 初始化项目。
现在我们已经创建了一个 Vue 的初始化项目。我们可以查看根目录下的package.json 文件。
可以看到，新建的项目还是 Vue 2.6 版本的。
还没升级之前的 2.x 版本
添加 vue-next 插件
现在需要安装 vue-next 插件来把 Vue 升级2.6到 3.0beta 版本。
// 安装完vue/cli以后，可以使用vue add添加插件
// 目前3.0对应的是vue-next项目
vue add vue-next
此时已经升级到 vue 3.0 了
左边目录结构并没有多大变化
但是 main.js 的语法却和 Vue 2.x 的大不相同。
运行项目
npm run serve
Vue 3.0 项目搭建完毕！如此简单！
开始一个小例子
在 Vue 2.x 中，我们一般在 data 里声明变量，methods 来声明方法。那么在 Vue 3 中呢？
在Vue3 的 可以使用 composition API 响应式来实现。
setup是新增的组件选项，相当于在组件内部使用Composition API的入口点。在 setup 方法中，我们可以创建使用新的 api 创建响应式的实例，返回属性和方法给模板渲染。
<template>
<div id="app">
<div>{{ count }}</div>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const count = ref(0)
return {
count
}
}
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
其中，ref，可以初始化变量，返回的是一个 value reference （包装对象）。一个包装对象只有一个属性：.value ，该属性指向内部被包装的值。
我们知道，在 Vue 2.x 中，改变数组，必须触发数组的更新机制，使用变更方法，或者替换数组，但在 Vue 3 中，采用了 Proxy 代替了原来的 Object.defineproperty 的形式，所以，直接改变数组某一项，也会生效了。
我们来试一下改变数组的第一个元素
<template>
<div id="app">
<div>count: {{ count }}</div>
<ul>
<li v-for="item in arr" :key="item">{{ item }}</li>
</ul>
<button @click="change">改变</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const count = ref(0)
const arr = ref(['1','2','3'])
const change = () => {
count.value++
arr.value[0] = count.value
}
return {
count, arr, change
}
}
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
展示效果：
最后
终于开始了Vue 3的探究之旅。Vue 3 和 Vue 2.x的不同， 主要体现在 性能、Tree-shaking support 、Composition API 、 Fragment 、Teleport、Suspense 、TypeScript支持度 和 自定义 Render 上。 更多的新特性还需日后多花时间了解......
