vue3新寫法

vue2的很多寫法都以類為主 函式 methods mounted computed watch 所有的方式都歸類寫

vue3的很多寫法主要以函式為主 函式式寫法是一種方式歸類在一個函式中 然後統一return出來

新寫法之vuex

引入vuex不同於vue2 的Vue.use(vuex) 到處是以export default Vuex.Store({})

vue3使用的寫法為函式式寫法 即 先引入一個函式

import { createStore } from 'vuex'

然後export default createStore({}) 剩下的裡邊

state：狀態 mutations：靜態轉化 actions：動態過程 都沒有變化

新寫法之app掛載

從vue中引入createApp import { createApp } from 'vue'

新寫法中 app引入vuex route都使用函式式方式 createApp(App).use(store).use(route).mount('#app') 這樣非常簡便引入vuex route

全域性掛載指令可以用createApp(App).directive("name",(el)=>{})

全域性掛載vant可以在.mount("#app") 前面.use(vant) element-ui是一樣的

新寫法之路由

同樣route使用函式式寫法 import { createRouter,createWebHistory } from 'vue-router'

const router = createRouter({routes,history:createWebHistory()}) createWebHistory指代到底使用hash還是web寫法

routes 寫法和vue2沒有什麼區別 唯一的區別是在重定向的時候可以使用

redirect:{name：上方定義的name}

新寫法的route-link tag被遺棄 現在使用

<router-link to="/about" custom v-slot="{ navigate }">
<li @click="navigate" role="link">About Us</li>
</router-link>

v-slot 指代插槽

router的攔截器 router.beforeEach(()=>{}) 使用方式沒有改變

新寫法之過濾器

vue2中的過濾器一般使用 {{ name | 過濾器 }} 現在被廢棄 直接使用 {{ 過濾器( name ) }} 傳入那麼引數進行過濾

新寫法之reactive

新寫法徹底改變了生命週期 等一些列狀態由原來的類寫法換成函式式寫法

統一寫在setup() 函式裡面 在元件被掛載的時候會被執行這個函式

定義狀態 import { reactive } const obj = reactive({name:"fu"}) return {reactive} 使用模板時 obj.name

定義函式 const 函式 = ()=>{} return {obj,函式} 使用模板時 直接寫函式就可以了 函式內部使用狀態 直接obj.name即可

reative 中不能放入 字串

新寫法之ref

ref在vue2中沒有什麼存在感 但是vue3中有很多好用的地方

因為reactive不能直接使用字串 我們可以使用 const myref = ref("xxx") 直接使用就可以直接呼叫myref.value

ref還保留了原本ref訪問dom

新寫法之生命週期

vue3的所有生命週期都可以寫在setup()中 並在生命週期函式前面加on 比如 onmounted oncreated

新寫法之計算屬性

vue3中的計算屬性需要引入 import computed from ’vue‘ 使用時 const xxx = computed((res)=>{})

新寫法之watch watch(()=>obj.xxx,fn) 只要xxx發生改變就會呼叫函式