vue更一步了解
路由之间是怎么跳转的？有哪些方式?
1、<router-link to="需要跳转到页面的路径">
2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数
路由传值的方式有哪几种
vue-router传参可以分为两大类，分别是编程式的导航 router.push和声明式的导航
1.编程式导航：router.push
字符串：直接传递路由地址，但是不能传递参数
this.$router.push("home")
对象：
命名路由 这种方式传递参数，目标页面刷新会报错 - name+params
this.$router.push({name:"news",params:{userId:123})
查询参数 和path配对的是query
this.$router.push({path:"/news',query:{uersId:123})
接收参数 this.$route.query
2.声明式导航
字符串 <router-link to:"news"></router-link>
命名路由 <router-link :to:"{name:'news',params:{userid:1111}}"></route-link>
还可以to="/path/值" - 需要提前在路由 规则里值 /path/:key
查询参数 <router-link :to="{path:'/news',query:{userId:1111}}"></router-link>
还可以to="/path?key=value
$route和$router的区别?
routes : 数组。 路由匹配规则
router ： 对象。 路由对象
$router ： 对象。 用于跳转路由 和 传递参数
$route ：对象。 用于接收路由跳转参数
vuex作用及五大组成部分
vuex作用： 全局数据管理 解决复杂的父子组件传值
state作用：存储数据
getter作用：派生数据。相当于state计算属性
mutations作用：修改state中的数据
actions作用： 异步更新数据
module作用：模块化处理vuex数据
vue-router的钩子函数都有哪些（导航守卫）
关于vue-router中的钩子函数主要分为3类
1.全局钩子函数beforeEach（全局前置守卫，所有路由生效）
beforeEach函数有三个参数,分别是:
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。
2.单独路由独享组件（只对这个路由生效）
* beforeEnter,
3 组件内钩子
beforeRouterEnter，（渲染路由组件前）
beforeRouterUpdate,（路由改变）
beforeRouterLeave（路由离开）
v-slot插槽与作用域插槽
1.插槽作用：父组件 传递 html结构 给 子组件
2.具名插槽作用：父组件 传递 多个html结构 给 子组件
3.作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据
跟keep-alive有关的生命周期是哪些？
1.前言：在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。
2.生命周期函数：在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。
activated钩子：在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。
Activated钩子调用时机：第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发
deactivated钩子：组件被停用（离开路由）时调用
deactivated钩子调用时机：使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和
destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
VUE的响应式原理
什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。
Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，每个声明的属性，都会有一个 专属的依赖收集器 subs，当页面使用到 某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被 放到 属性的依赖收集器 subs 中，在 数据变化时，通知更新；
当数据改变的时候，会触发Object.defineProperty - set函数，数据会遍历自己的 依赖收集器 subs，逐个通知 watcher，视图开始更新；
说一下你在vue中踩过的坑
1操作data中的数据，发现没有响应式
原因： 数组中有很多方法，有的会改变数组（例如pop push）,有的不会改变数组（例如slice, filter）
解决方案：通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的
2.在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载
解决方案：Vue.nextTick(回调函数进行获取)
其他的可以自由发挥，只要不是太低级就可以（比如，单词写错，代码位置写错，这种就是低级问题。其他的都可以说，千万别说这两个）
原文地址：https://blog.csdn.net/2401_85327573/article/details/144409706
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！