2023/6/28-vue3学习记录

一.新的学习内容：主要知识点

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

 组件中的路由导航守卫