16.vue3新特性

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发生改变就会调用函数