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

Posted Composition55555

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)可以将数据保存在浏览器缓存中。如:sessionStoragelocalStorage
    • (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-bindv-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: valueevents: 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指令

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

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

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

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

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