一.新的学习内容:主要知识点
1.组合式函数(没记住)
2.自定义指令
3.插件的使用(理解的不是很深刻)
1.1组合式函数的概念:
“组合式函数”(composables)是一个利用VUE的组合式api来封装和复用有状态逻辑的函数
1.2练习的问题:
利用组合式函数的时候,用e.target.pageX获取鼠标位置是没有定义的
e:代表事件对象本身,它包含有关事件的详细信息,如事件类型,触发事件的元素,事件发生的位置等。通过访问'e’对象,你可以获取关于事件的各种信息,并执行相关操作,如阻止默认行为,停止事件传播等。
e.targe是事件的目标元素,是一个指向DOM元素的引用。通常用它来获取目标元素的属性,修改元素的样式,添加或者移除事件监听器等
import 事件的时候最好将他自动生成的给写出来
2.1自定义指令的概念
vue允许你注册自定义的指令:自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑
2.2自定义指令的组成
一个自定义指令由一个包含类似组件生命周期的对象来定义。钩子函数会接受到指令所绑定元素作为其参数
自定义指令的生命周期
<script setup>
created():在绑定元素的属性前或者事件监听器应用前(v-on)调用
beforeMount():在元素插入到dom前
mounted()在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
beforeUpdate绑定元素的父组件更新前调用
updated在绑定元素的父组件及他自己的所有子节点都更新完成后调用
beforeUnmount绑定元素的父组件卸载前调用
unmounted绑定元素的父组件卸载后调用
</script>
3.1.插件的概念
插件(Plugins)是一种能为Vue添加全局功能的工具代码,一个插件是可以是一个拥有install()方法的对象,也可以是一个安装函数本身,安装函数会接收到安装它的应用实例和传递给app.use()的额外选项作为参数
3.1.1插件的个人理解
options是myPlugin后面的那个对象,也就是文章说的app.use()的额外选项作为参数
val是组件中调用插件$t(传入的参数),这里也就是dialog.ok,vue3文档里提供的是一个小型案例,
这里只是国际化的一个案例,做完这个插件之后你会发现,你只要修改。dialog中ok:'val'中的值就是val了
二.面试题
1.$router和$route的区别
1.1.1自己默写
$router是’路由实例对象‘,它可以使用push,inplace等路由跳转的方法
$route是'路由信息对象',它可以携带路由传递的信息
1.1.2面试题
$router是‘路由实例对象’,包括了路由的跳转方法,钩子函数等,可以使用$router.push,$router.replace(),$router.go()等
$route是’路由信息对象‘,包括name,path,params,query,meta,fullpath,hash,matched等路由信息参数
2.params和query的区别是什么?
2.1.1自己回答
params是通过name引入,query通过》。。。
2.1.2面试题目
1.query要用path来引入,params要用name来引入
2.接收参数时,分别是this.$route.query.name和this.$route.params.name
3.vue-router有哪几种路由导航守卫?
3.1.1自己回答
路由全局前置导航守卫router.beforeEach,路由全局解析守卫
3.1.2面试题
路由守卫为:
全局守卫:beforeEach
后置守卫:afterEach
全局解析守卫:beforeEach
路由独享守卫:beforeEnter
全局守卫
三.复习
1.路由高阶-路由导航守卫
全局前置守卫beforeEach
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中
全局解析守卫beforeResolve
它在每次导航时都会触发,不同的是,解析守卫刚好会在导航被确认之前,所有组件内守卫和异步路由被解析之后调用
全局后置守卫afterEnter
需要区别是它的参数中没有next
路由独享守卫
与上面路由导航守卫不同,路由独享守卫是写在实例中的路由配置中,如下图2所示
以上三个路由守卫全局前置守卫(beforeEach),全局解析守卫(beforeResolve),全局后置守卫(afterEach)都是写在整个router(路由实例上)
如下图所示
图2
组件中的路由导航守卫