Vue3.0 && Vue3.0初体验二这是用Vue3.0写的是一个dome, 新的语法基本上都涉及了, 以后还会去优

前言

上一章写了一些Vue3.0的变化,和新的Composition API的用法,这一章来就来记录一下生命周期和vue-Router, vuex再Vue3.0里该怎么用！

Vue3.0生命周期

Vue2.0的里我们常见的生命周期函数有8个,分别为.

beforCreate, created, beforMount, mounted,
beforUpdate, updated, beforDestroy,desroyed

Vue3.0的生命周期函数在2.0的基础上有了些修改

beforCreate, created,这两个函数由setup()来代替

<script>
 import { setup } from 'vue'
 export default {
     setup(props,  context) {
         //2.0里写在beforCreate, created里的代码可以直接写到这里
     }
 
 }
 </script>

beforMount => onBeforMount

mounted => onMounted
beforUpdate => onBeforUpdate
updated => onUpdate
beforDestroy => onBeforUnmount
desroyed => onUnmounted

<script>
import { setup, onBeforMount, onMounted, onBeforUpdate, onUpdate, onBeforUnmount, onUnmounted} from 'vue'
 export default {
     setup(props,  context) {
         onBeforMount(() => {
           //
         });
         onMounted(() => {
           //
         });
         onBeforUpdate(() => {
           //
         });
         onUpdate(() => {
           //
         });
         onBeforUnmount(() => {
           //
         });
         onUnmounted(() => {
           //
         });
     }
 
 }
 </script>

vue-router4 与 vue-router3的区别

先上图看一下创建时的区别

从上图可以看出,vue-router 4 添加了 createRouter方法来创建router
路由的模式也是有对应的函数
createWebHistory()为History模式, createWebHashHistory()为Hash模式

路由跳转

vue-router4不支持tag属性, 换成了custom

custom, 添加这个字段默认就不会外层套一个a标签, 而是直接把里的子元素渲染到页面

<router-link/>, <router-view/> 这两个标签没有变化

编程时导航有了点变化
<script>
import { setup } from 'vue'
import { useRouter, useRoute } from "vue-router";
export default {
    setup() {
        const router = useRouter()
        router.push('/login')
    }

}
</script>

vuex 4

vuex4和之前用法基本一样,就是创建的时候有写不通,需要调用Vuex.createStore() 这个api

获取数据

     import { useStore } from 'vuex'
     let store = useStore()
     state.userInfo = store.state.userInfo

vuex 4 的文档是在是很少,网上基本找不到,等成熟一点在来修改!!!

结束语

前端项目地址 github.com/YangY-19/vu…

Node项目地址 github.com/YangY-19/ko…

这是用Vue3.0写的是一个dome, 新的语法基本上都涉及了, 以后还会去优化.虽然只是个dome,也希望你给我点个星星鼓励一下.
上文都是自己的见解与总结, 如果有写法错误的地方,望指正!如果有其他Vue3.0不清楚的地方,可以在下方评论,一起讨论.

Vue3.0 && Vue3.0初体验 二

前言