初始化 Vue Router 的过程与 3.0 版本变化不大，只是之前采用构造函数的方式，这里改为使用 createRouter 来创建 Vue Router 实例，配置的方法基本一致，配置完成后我们还需要在 App.vue 中增加链接到 Test.vue 的路由：
<template> <div> <div> <router-link to="https://www.jb51.net/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/test">Test</router-link> </div> <router-view/> </div> </template>
启动项目：
npm run serve
在浏览器中访问项目地址，此时已经可以跳转到 Test 页面：
状态和事件绑定
Vue 3.0 中定义状态的方法改为类似 React Hooks 的方法，下面我们在 Test.vue 中定义一个状态 count：
<template> <div> <h1>test count: {{count}}</h1> </div> </template> <script> import { ref } from 'vue' export default { setup () { const count = ref(0) return { count } } } </script>
Vue 3.0 中初始化状态通过 setup 方法，定义状态需要调用 ref 方法。接下来我们定义一个事件，用来更新 count 状态：
<template> <div> <h1>test count: {{count}}</h1> <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>
这里的 add 方法不再需要定义在 methods 中，但注意更新 count 值的时候不能直接使用 count++，而应使用 count.value++，更新代码后，点击按钮，count 的值就会更新了：
计算属性和监听器
Vue 3.0 中计算属性和监听器的实现依赖 computed 和 watch 方法：
<template> <div> <h1>test count: {{count}}</h1> <div>count * 2 = {{doubleCount}}</div> <button @click="add">add</button> </div> </template> <script> import { ref, computed, watch } from 'vue' export default { setup () { const count = ref(0) const add = () => { count.value++ } watch(() => count.value, val => { console.log(`count is ${val}`) }) const doubleCount = computed(() => count.value * 2) return { count, doubleCount, add } } } </script>
计算属性 computed 是一个方法，里面需要包含一个回调函数，当我们访问计算属性返回结果时，会自动获取回调函数的值：
const doubleCount = computed(() => count.value * 2)
监听器 watch 同样是一个方法，它包含 2 个参数，2 个参数都是 function：
watch(() => count.value, val => { console.log(`count is ${val}`) })
第一个参数是监听的值，count.value 表示当 count.value 发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调
获取路由
Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，ctx.$router 是 Vue Router 实例，里面包含了 currentRoute 可以获取到当前的路由信息
<script> import { getCurrentInstance } from 'vue' export default { setup () { const { ctx } = getCurrentInstance() console.log(ctx.$router.currentRoute.value) } } </script>
Vuex 集成
Vuex 的集成方法如下：
定义 Vuex 状态
第一步，修改 src/store/index.js 文件：
import Vuex from 'vuex' export default Vuex.createStore({ state: { test: { a: 1 } }, mutations: { setTestA(state, value) { state.test.a = value } }, actions: { }, modules: { } })
Vuex 的语法和 API 基本没有改变,我们在 state 中创建了一个 test.a 状态，在 mutations 中添加了修改 state.test.a 状态的方法： setTestA
引用 Vuex 状态
第二步，在 Test.vue 中，通过计算属性使用 Vuex 状态：