【Vue3.0】- 入坑 - 全家桶
2020-11-23 本文已影响0人
啦啦啦喽啰
- 本文主要内容
- 基于 vue-cli 快速搭建 Vue 3.0 项目
快速搭建 Vue 3.0 项目
版本
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
}
升级vue-cli
npm install -g @vue/cli
vue -V
vue/cli@4.5.4
创建项目
vue create vue3-demo
配置项目
- 进入命令行
- 选择
Manually select features
- 勾选
Router
、Vuex
、CSS Pre-processors
和Linter / Formatter
- 选择
目录结构
./src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
├── store
│ └── index.js
└── views
├── About.vue
└── Home.vue
开发流程
新建页面
-
src/views
下创建Hello.vue
<template>
<div class="page">Hello</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.page {
color: red;
}
</style>
创建路由
- 在
/src/router/index.js
中创建路由配置
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/hello',
name: 'Hello',
component: () => import('../views/Hello.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
vue-router有哪些改变
- 创建方式
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
- 构建选项
base
- 传给
createWebHistory()
(和其他模式) 的第一个参数作为base
。
- 传给
const router = createRouter({
history: createWebHistory('/'),
...
})
- 捕获所有路由 ( /* ) 时,现在必须使用带有自定义正则表达式的参数进行定义:/:catchAll(.*)
// 当路由为 /user/a/b 时,捕获到的 params 为 {"a": "a", "catchAll": "/b"}。
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/user/:a:catchAll(.*)', component: component },
],
})
- 如果使用
<transition>
,则可能需要等待router
准备就绪才能挂载应用程序
app.use(router)
// Note: on Server Side, you need to manually push the initial location
router.isReady().then(() => app.mount('#app'))
-
push
或者resolve
一个不存在的命名路由时,将会引发错误,而不是导航到根路由 "/" 并且不显示任何内容- 原来,浏览器控制台只会提示如下警告,并且
url
会跳转到根路由/
下。 - 现在则报错
- 原来,浏览器控制台只会提示如下警告,并且
- 没有全局
$router
、$route
- 原先,通过在
Vue
根实例的router
配置传入router
实例,下面这些属性成员会被注入到每个子组件。 - 现在 没有
this
,也就不存在在this.$router | $route
这样的属性
import { useRoute, useRouter } from 'vue-router' setup() { const route = useRoute() const router = useRouter() ... // router -> this.$router // route > this.$route router.push('/foo') console.log(route) // 路由对象信息 }
- 原先,通过在
状态和事件绑定
-
Vue 3.0
中定义状态的方法改为类似React Hooks
的方法
<template>
<div class="page">
<div>Hello</div>
<div>{{count}}</div>
<button @click="add">ADD</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => {
count.value++
}
return {
count,
add
}
}
}
</script>
-
Vue 3.0
中初始化状态通过setup
方法 - 定义状态需要调用
ref
方法 - 在
setup
方法里,返回更新状态的add
方法,不再需要定义在methods
中- 更新
count
值的时候不能直接使用count++
,而应使用count.value++
- 更新
计算属性和监听器
<template>
<div class="page">
<div>Hello</div>
<div>{{count}}</div>
<div>double: {{doubleCount}}</div>
<button @click="add">ADD</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
return {
count,
doubleCount,
add
}
}
}
</script>
- 计算属性
computed
是一个方法- 需要包含一个回调函数
- 当我们访问计算属性返回结果时,会自动获取回调函数的值
- 监听器
watch
同样是一个方法- 它包含 2 个参数,2 个参数都是
function
- 第一个参数是监听的值, 返回
count.value
- 第一个参数为值发生变化时触发的回调
- 第一个参数是监听的值, 返回
- 它包含 2 个参数,2 个参数都是
获取当前路由
-
Vue 3.0
中通过getCurrentInstance
方法获取当前组件的实例 - 通过
ctx
属性获得当前上下文-
ctx.$router
是Vue Router
实例 - 里面包含了
currentRoute
,可以获取到当前的路由信息
-
import { getCurrentInstance } from 'vue';
// 获取当前实例
const { ctx } = getCurrentInstance();
// 获取当前路由
console.log(ctx.$router.currentRoute.value);
页面跳转
-
Vue 3.0
的setup
中没有this
- 类
react-router
,提供了useRouter
和useRoute
,分别对应之前的this.$router
和this.$route
import { useRouter } from 'vue-router';
export default {
setup() {
...
const router = useRouter();
const backHome = () => {
router.push('/')
}
...
}
}
Vuex 集成
定义 Vuex 状态
- 修改
src/store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
name: 'haha'
},
mutations: {
setHelloName(state, value) {
state.name = value;
}
},
actions: {
},
modules: {
}
})
获取 Vuex 状态
import { getCurrentInstance } from 'vue';
// 获取当前实例
const { ctx } = getCurrentInstance();
// vuex state
const name = computed(() => ctx.$store.state.name);
更新 Vuex 状态
export default {
setup() {
// 获取当前实例
const { ctx } = getCurrentInstance();
// vuex state
const name = computed(() => ctx.$store.state.name);
const update = () => {
ctx.$store.commit('setHelloName', 'haha -- ' + ctx.count );
}
...
}
}