一、安装

1.vite：尤大开发，未来取代webpack的方案，原理就是利用浏览器现在已经支持es6的import了，碰见import会发送一个http请求去加载文件，vite拦截这些请求，做一些预编译（极力推荐，真正秒开，真男人都用它），具体使用方法请参考，vite使用

create-vite-app vue3-vite
cd vue3-vite
npm install
npm run dev

2.捡现成的

git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd vue3-webpack
npm install 
npm run dev

3.vue-cil（记得升级最新版本哦）

npm install -g @vue/cli
vue create 01-vue3-cli
cd vue3-cli
vue add vue-next
npm run serve

二、使用

初步写了一个小demo，用于熟悉新语法，后面会补全和详细介绍。

<template>
    <h1>Hello Vue 3!</h1>
    <button @click="inc">Clicked {{ count }} times.</button>
    <h2>对象的双向绑定，{{person.age}}</h2>
    <button @click="add">点击增加年龄</button>
</template>
<script>
import { ref, watchEffect,reactive} from 'vue'
export default {
  //setup为Composition API的入口，具体的后面会说
  setup() {
    //reactive可以创建一个响应式的对象，用于监听复杂类型（对象或数组）的变化
    const person=reactive({age:18})
    const add=function(){
      person.age++
    }
    //ref可以创建一个响应式的对象，访问这个对象时要使用.value的形式进行访问，而非以前的this.
    //ref本质就是对reactive的封装，如ref(xx)=>reactive({value:xx})
    const count = ref(0)
    const count1 = ref(0)
    const inc = () => {
      count.value++
    }
    
    //需要向外界暴露的属性或者方法,只有这里return了模板中才能使用
    return {
      count,
      inc,
      add,
      person
    }
  },
}
</script>
<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

三、新增特性，见下面链接
1.vue3中的Composition API