027.整理几个面试题——关于VuexVue指令
Posted Composition55555
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了027.整理几个面试题——关于VuexVue指令相关的知识,希望对你有一定的参考价值。
文章目录
网上收集整理
关于Vuex
01. vuex是什么?
-
Vuex 是一个用于 Vue 的状态管理器
-
使用Vuex的优点:
-
方便开发和后期维护,可以集中管理数据
-
高效实现组件通信,提高开发效率
-
可以响应式的更新数据
-
02. vuex有哪几种属性?
- 分别是 State、 Getter、Mutation 、Action、 Module
state
:用于存放数据状态,作用同datagetters
:从基本数据派生出来的数据,作用同计算属性computedmutations
:是唯一更改 store 中状态的方法,且必须是同步函数actions
:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作modules
:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中
03. Ajax请求写在哪里?
Ajax
请求代码应该写在methods
中还是vuex的actions
中?- 如果请求的数据不会被其他组件公用,而仅在请求的组件内使用,就不需要放入
action
里 - 如果需要复用,就放入
action
里,方便其它组件使用- 包装成
promise
返回,在调用处通过async/await
处理返回的数据
- 包装成
- 如果请求的数据不会被其他组件公用,而仅在请求的组件内使用,就不需要放入
04. Vuex刷新页面数据丢失?
-
Vuex
的数据是保存在运行内存中的,当页面刷新时,页面会重新加载Vue实例,这个时候Vuex
中的数据就会被重新赋值 -
解决办法:
- (1)可以将数据保存在浏览器缓存中。如:
sessionStorage
、localStorage
- (2)可以在页面刷新时,再次请求远程数据,动态更新Vuex数据
- (1)可以将数据保存在浏览器缓存中。如:
关于指令
01. v-show与v-if的区别?
v-if
是真正的条件渲染,直到条件第一次变为真时,才会开始渲染(懒加载)- v-if指令是直接销毁和重建DOM节点,达到让元素显示和隐藏的效果
v-show
不管初始条件是什么都会渲染,并且只是简单地基于 CSS 的display
属性进行切换v-show
只是 CSS 级别的display: none;
和display: block;
之间的切换- 总结:
v-if
适用于不需要频繁切换条件的场景(一次性渲染完的)- 在组件上使用可触发组件的生命周期
v-show
则适用于需要非常频繁切换条件的场景- 不可用于组件
02. v-for与v-if的使用?
- 1、
v-for
优先于v-if
被解析 - 2、如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能
- 3、要避免出现这种情况,则在外层嵌套
<template>
,在这一层进行v-if
判断,然后在内部进行v-for
循环 - 4、如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项
03. v-for中的key的作用?
-
为什么使用
key
?- 主要是为了高效的更新虚拟DOM
- 使用
key
来给每个元素节点添加一个唯一标识 - 可以方便
Vue
更好的区别各个组件,Diff算法就可以正确的识别此节点
使用
v-for
更新已渲染的元素列表时,默认用就地复用
策略- 当列表数据修改的时候,他会根据
key
值去判断某个值是否修改 - 如果修改,则重新渲染这一项
- 否则复用之前的元素
-
尽量不使用index作为key:
- 这是由于
index
永远都是顺序排序的 - 如果在数据中间插入一条数据,会导致后续数据的
index
值全部改变 - 那么就会导致后面的所有数据都重新渲染一次
- 这是由于
04. v-on可以监听多个方法吗?
-
可以,使用对象的形式
<input type="text" v-on=" input:onInput, focus:onFocus, blur:onBlur, ">
05. vue常用的修饰符
.stop
:等同于javascript中的event.stopPropagation()
,防止事件冒泡.prevent
:等同于JavaScript中的event.preventDefault()
,防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播).capture
:与事件冒泡的方向相反,事件捕获由外到内.self
:只会触发自己范围内的事件,不包含子元素.once
:只会触发一次
06. vue初始化页面闪动问题
-
首先:在css里加上
[v-cloak] display: none;
-
然后,在页面元素加上属性:
v-cloak
07. v-model的原理?
-
v-model
指令主要用于,在表单元素上( input、textarea、select)创建双向数据绑定 -
其实质是
v-bind
和v-on
的语法糖:-
通过
v-bind
绑定value
属性 -
通过
v-on
处理数据,实现双向绑定
<input v-model='something'> # 等价于 <input :value="something" @input="something = $event.target.value"> <input v-model="checked" type=radio> # 等价于 <input :value="checked" @change="checked = $event.target.value">
-
-
如果在自定义组件中,则组件会默认拆解为
props: value
和events: input
-
但对其它元素来说,不一定要监听
input
事件,也不一定是value
属性- 所以,可以在子组件内部,通过
model
来对v-model
进行自定义
<!-- 父组件 --> <son v-model="checked"></son> <!-- 子组件 --> <template> <input type="checkbox" > </template> <script> export default // 还是需要通过 props 接收父组件传递的参数 props: ['checked'], // 然后通过 model 来自定义属性和事件 model: prop: 'checked', // 表示 绑定的属性 event: 'change' // 表示 监听 change 自定义事件 , </script>
- 所以,可以在子组件内部,通过
-
(暂时这些,后面再补)
(本人前端小菜鸡,如有不对请谅解)
以上是关于027.整理几个面试题——关于VuexVue指令的主要内容,如果未能解决你的问题,请参考以下文章