【Vue3.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
    • 第一个参数为值发生变化时触发的回调

获取当前路由

• 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 );
    }
    ...
  }
}