1. 路由配置
   vue3.0使用createRouter來創(chuàng)建Vue Router實(shí)例
   之前用構(gòu)造函數(shù)的方式

createRouter, createWebHashHistory
const router = createRouter({
  history: createWebHashHistory(),
  [
{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
  ]
})
export default router

2. 初始化狀態(tài)
   vue3.0通過setup方法初始化狀態(tài)
   調(diào)用ref()方法返回一個(gè)響應(yīng)式的對(duì)象
   在setup中對(duì)ref返回的數(shù)值進(jìn)行操作時(shí)，需要通過.value來獲取

// value1只有一個(gè)value屬性
setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    return {
      value, ienter,addValue1
    }
  }

3. 計(jì)算屬性computed方法和監(jiān)聽器watch方法
   watch方法包含兩個(gè)參數(shù)，兩個(gè)參數(shù)都是function

import { ref, toRefs, computed, watch } from 'vue'

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    return {
      value, ienter,addValue1, douValue1 
    }
  }

4. 獲取路由
   vue3.0通過getCurrentInstance方法獲取當(dāng)前組件的實(shí)例
   通過getCurrentInstance方法的ctx屬性獲得當(dāng)前上下文
   通過計(jì)算computed獲取store.state.name的值

import { ref, toRefs, computed, watch, getCurrentInstance } from 'vue'

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    const { ctx } = getCurrentInstance()
    // 當(dāng)前路由信息
    // ctx.$router.currentRoute.value 
    
    return {
      value, ienter,addValue1, douValue1 
    }
  }

5. Vuex使用

import Vuex from 'vuex'
export default Vuex.createStore({
  state: {
    name: 'licky'
  },
  mutations: {
    setName(state, payload) {
      state.test.a = payload
    }
  },
  actions: {
  },
  modules: {
  }
})

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    const { ctx } = getCurrentInstance()
    // 當(dāng)前路由信息
    // ctx.$router.currentRoute.value 
    
    let name = computed(() => ctx.$store.state.name)

    let editName = () => {
      ctx.$store.commit('setName', 'new Name zzz')
    }

    return {
      value, ienter,addValue1, douValue1, name, editName 
    }
  }