6大亮点
Performance：性能更比Vue 2.0强。Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。Composition API：组合APIFragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”Better TypeScript support：更优秀的Ts支持Custom Renderer API：暴露了自定义渲染API我们现在就开始搭建vue3.0吧
基于 vue-cli 快速搭建 Vue3.0 项目Vue 3.0 基本特性体验集成 Vue-reouter 和 Vuex 4.0第一步，安装vue-cli
npm install -g @vue/cli //更新最新cli版本安装成功后，我们即可使用 vue 命令 ，测试方法
$ vue -V @vue/cli 4.5.4第二步，初始化vue项目
vue create vue-next-test输入命令后，会出现命令行交互窗口，这里我们选择Vue3.0
Default ([Vue 2] babel, eslint) Please pick a preset: Default (Vue 3 Preview) ([Vue 3] babel, eslint) 我们选择vue3.0 Manually select features项目创建完毕后，目录结构如下
新建的项目结构与vue-cli4 创建的项目结构基本一样，都是我们很熟悉的App.vue 和 main.js
. ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js └── views ├── About.vue └── Home.vue创建路由
项目开发中，我们都需要创建新页面，并且添加路由配置，我们在/src/page目录下创建Test.vue
<template> <div class="test"> <h1>test page</h1> </div> </template> <script> export default { } </script> <style lang="less" scoped> .test { color: red; } </style>之后在/src/router/index.js 中创建路由配置
import { createRouter, createWebHashHistory } from 'vue-router' import Test from '@page/test.vue' //这里@page 是在vue.config.js 配置别名 const routers = [ { page: '/', name: 'Test', component: Test } ] //在 Vue-router新版本中，需要使用createRouter 来创建路由 const router = createRouter({ //制定路由的模式，此处使用的是hash模式 createWebHistory为history模式 history : createWebHashHistory(), routers }) export default router创建vue实例 vue3 创建vue势力不需要使用 new的方式了，来看src/main.js文件
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(router).use(store).mount('#app')这个时候我们就可以通过路由进行跳转
<template> <div id="app"> <div id="nav"> <router-link to="/">Test</router-link> </div> <router-view/> </div> </template>状态和事件绑定
vue3.0中定义状态的方法改为类似Reach Hooks 的方法。我们在Test.vue定义一个状态 hellow:
<template> <div class="test"> <h1>test: {{hellow}}</h1> //逐渐++ <h1>test: {{hellReactive.num}}</h1> <button @click="add">加加</button> </div> </template> <script> import { ref , reactive } from 'vue' export default { setup () { const hellow= ref(0) const hellReactive = reactive({ num:0, list:[ {name:"1"} ] }) const add = () => { hellow.value++; } return { hellow, hellReactive, add } } } </script>setup
setup()函数是vue3中，专门为组件提供的新属性。它为我们使用vue3的Composition API 新特性提供了统一的入口。 setup 函数会在 beforeCreate之后、careted之前执行
setup()函数 有两个参数
props这里是props和Vue2.x种的props一致。什么时候调用？setup是在一个组件实例被创建时，初始化了props之后调用。其实就是取代了Vue2.x的careted和beforeCreatesetup返回一个对象。对象中的属性将直接暴露给模板渲染的上下文。接收 prop
props:{ p1:string, }, setup(props,_this){ console.log(props.p1) }