[JavaScript知识库]027.整理几个面试题——关于Vuex、Vue指令

网上收集整理

关于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>
    

(暂时这些，后面再补)
（本人前端小菜鸡，如有不对请谅解）