Vue 3.0初体验使用

vue 3.0 初体验 （项目搭建）

6大亮点

• Performance：性能更比Vue 2.0强。
• Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
• Composition API：组合API
• Fragment, 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

Vue3.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和beforeCreate
• setup返回一个对象。对象中的属性将直接暴露给模板渲染的上下文。

接收 prop

	props:{
		p1:string,
	},
	setup(props,_this){
		console.log(props.p1)
	}