027.整理几个面试题——关于VuexVue指令

Posted 2021-08-28 Ruovan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了027.整理几个面试题——关于VuexVue指令相关的知识，希望对你有一定的参考价值。

文章目录

网上收集整理

关于Vuex

01. vuex是什么？

Vuex 是一个用于 Vue 的状态管理器
使用Vuex的优点：
- 方便开发和后期维护，可以集中管理数据
- 高效实现组件通信，提高开发效率
- 可以响应式的更新数据

02. vuex有哪几种属性？

分别是 State、 Getter、Mutation 、Action、 Module
state：用于存放数据状态，作用同data
getters：从基本数据派生出来的数据，作用同计算属性computed
mutations：是唯一更改 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数据

关于指令

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指令的主要内容，如果未能解决你的问题，请参考以下文章

027.整理几个面试题——关于VuexVue指令

024.整理几个面试题——关于Data

025.整理几个面试题——关于组件