往期点这里:↓
VUE面试题汇总(一)
VUE面试题汇总(二)
VUE面试题汇总(三)
VUE面试题汇总(四)
VUE面试题汇总(五)
VUE面试题汇总(六)
VUE面试题汇总(七)
71. vuex 有哪几种属性?
参考答案:
有五种,分别是 State、 Getter、Mutation 、Action、 Module
vuex的State特性
A、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
· vuex的Getter特性
A、getters 可以对State进行计算操作,它就是Store的计算属性
B、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用,是可以不用getters
· vuex的Mutation特性
Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。
72. 不用 Vuex 会带来什么问题?
参考答案:
可维护性会下降,想修改数据要维护三个地方;
可读性会下降,因为一个组件里的数据,根本就看不出来是从哪来的;
增加耦合,大量的上传派发,会让耦合性大大增加,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背。
73. vue-router 如何响应路由参数的变化?
参考答案:
什么是路由参数的变化
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
监测路由参数变化的方法
方法一watch监听:
watch: { // watch的第一种写法
$route (to, from) {
console.log(to)
console.log(from)
}
},
====
watch: { // watch的第二种写法
$route: {
handler (to, from){
console.log(to)
console.log(from)
},
// 深度观察监听
deep: true
}
},
====
watch: { // watch的第三种写法
'$route':'getPath'
},
methods: {
getPath(to, from){
console.log(this.$route.path);
}
},
方法二:导航守卫
beforeRouteEnter (to, from, next) {
console.log('beforeRouteEnter被调用:在渲染该组件的对应路由被 confirm 前调用')
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this` 因为当守卫执行前,组件实例还没被创建
// 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
next(vm => {
// 通过 `vm` 访问组件实例
console.log(vm)
})
},
// beforeRouteEnter 是支持给 next 传递回调的唯一守卫。
// 对于 beforeRouteUpdate 和 beforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log('beforeRouteUpdate被调用:在当前路由改变,但是该组件被复用时调用')
next()
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
const answer = window.confirm('是否确认离开当前页面')
if (answer) {
console.log('beforeRouteLeave被调用:导航离开该组件的对应路由时调用')
next()
} else {
next(false)
}
},
74. 完整的 vue-router 导航解析流程
参考答案:
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter
守卫中传给next
的回调函数,创建好的组件实例会作为回调函数的参数传入。
75. vue-router 有哪几种导航钩子( 导航守卫 )?
参考答案:
三种
第一种:全局导航钩子:router. beforeEach(to, from, next),作用:跳转前进行判断拦截。
第二种:组件内的钩子;
第三种:单独路由独享组件
76. vue-router 的几种实例方法以及参数传递
参考答案:
参考
77. 怎么定义 vue-router 的动态路由?怎么获取传过来的动态参数?
参考答案:
在 router 目录下的 index. js 文件中,对 path 属性加上/:id。 使用 router 对象的 params. id
78. vue-router 如何定义嵌套路由?
参考答案:
参考
79. <router-link></router-link>
组件及其属性
参考答案:
<router-link>
组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to
属性指定目标地址,默认渲染成带有正确链接的<a>
标签,可以通过配置tag
属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。
<router-link>
比起写死的 <a href="...">
会好一些,理由如下:
无论是 HTML5 history
模式还是 hash
模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
在 HTML5 history 模式下,router-link
会守卫点击事件,让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base
选项之后,所有的 to
属性都不需要写 (基路径) 了。
80. vue-router 实现路由懒加载( 动态加载路由 )
参考答案:参考