zoukankan      html  css  js  c++  java
  • 前端vue面试题个人总结

    1、介绍Vue中的常用的指令

    • v-bind 绑定属性机制,可以简写为:
      • 对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
      • 数组方法v-bind:class="[class1, class2]"
      • 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"
    • v-on 绑定事件机制,可以简写为@
    • v-for
    • v-html 以html标签形式显示
    • v-text 可以简写为{{}}
    • v-if
    • v-show
    • v-model 双向数据绑定

    2、vue中常用的事件修饰符

    • .prevent: 阻止默认事件;如:v-on:submit.prevent阻止默认事件;
    • .stop: 阻止单击事件冒泡;如:v-on:click.stop阻止事件冒泡;
    • .self: 当事件发生在该元素本身而不是子元素的时候会触发;
    • .capture: 事件侦听,事件发生的时候会调用
    • .once 事件只触发一次

    3、谈谈你对MVVM开发模式的理解

    • MVVM分为Model、View、ViewModel三者。
    • Model 代表数据模型,数据和业务逻辑都在Model层中定义;
    • View 代表UI视图,负责数据的展示;
    • ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;
    • Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新,View 中由于用户交互操作而改变的数据也会在 Model 中同步。
    • 这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 DOM。

    4、 v-if 和 v-show 有什么区别?

    • v-show

      • v-show是css切换,频繁切换时用v-show,

      • v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;

      • 当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;

      • v-show对应的值无论是true还是false,对应HTML元素都会存在于浏览器的文档中;

    • v-if

      • v-if=‘false’ v-if是条件渲染,当false的时候不会渲染,

      • v-if是完整的销毁和重新创建,运行时较少改变时用v-if,而v-if会控制这个 DOM 节点的存在与否。

      • 当只需要一次显示或隐藏时,使用v-if更加合理。

      • v-if如果是false的话,对应HTML元素直接不在浏览器的文档中了。

    5、请详细说你对vue生命周期的理解?

    • 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
      • beforeCreate----创建前 组件实例更被创建,组件属性计算之前,数据对象data都为undefined,未初始化。
      • created----创建后 组件实例创建完成,属性已经绑定,数据对象data已存在,但dom未生成,$el未存在
      • beforeMount---挂载前 vue实例的$el和data都已初始化,挂载之前为虚拟的dom节点,data.message未替换
      • mounted-----挂载后 vue实例挂载完成,data.message成功渲染。
      • beforeUpdate----更新前 当data变化时,会触发beforeUpdate方法
      • updated----更新后 当data变化时,会触发updated方法
      • beforeDestory---销毁前 组件销毁之前调用
      • destoryed---销毁后 组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在

    7、vue中<keep-alive>的作用;active-class是哪个组件的属性?

    • 把切换出去的组件保留在缓存中,可以保留组件的状态或者避免重新渲染。
    • active-class是vue-router模块的router-link组件的属性。

    8、计算属性及和 watch 、methods的区别

    • computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算,

      • computed可以依赖其他computed,甚至是其他组件的data;
      • 依赖于数据,数据更新,处理结果自动更新;
      • 计算属性内部this指向vm实例;
      • 在组件调用时,直接写计算属性名即可;
      • 有get和set两个选项,常用的是getter方法,获取数据,也可以使用setter方法改变数据;
    • watch 更像是一个 data 的数据监听回调,当依赖的 data 的数据变化,执行回调,在方法中会传入 newVal 和 oldVal。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情,使用watch。

    • 相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算,methods不会。methods是一个方法,它可以接受参数,而computed不能。

    10、父子组件之间的传值通信?

    • 父组件向子组件传值:

    • 子组件在props中创建一个属性,用来接收父组件传过来的值;

    • 在父组件中注册子组件;

    • 在子组件标签中添加子组件props中创建的属性;

    • 把需要传给子组件的值赋给该属性

    • 子组件向父组件传值:

    • 子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;

    • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;

    • 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

    12、非父子组件之间的通信

    常用的方法有 EventBus 和 Vuex

    • EventBus 实现非父子组件通信的原理是:

      • 通过实例化一个Vue对象( 比如bus = new Vue() )作为母线,在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) ),
      • 然后在其他组件中再通过bus来监听此事件并接受参数( bus.$on(event, callback) )。
    • Vuex 是什么:

      • Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态

      • Vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化。

      • Vuex的用法

  • 相关阅读:
    Linux 安装Python3.7
    Linux 修改默认yum源为阿里云
    Linux 安装和配置ActiveMQ Artemis
    Linux 查看内存空间、磁盘空间、进程等信息
    Linux 查询和开启端口
    伤害 等待互斥锁
    深入理解Linux内核之脏页跟踪
    基础——SPI与QSPI的异同,QSPI的具体协议是什么,QSPI有什么用
    浅谈显示器色域:从sRGB到广色域
    Linux SPI 驱动
  • 原文地址:https://www.cnblogs.com/wangchangli/p/11266764.html
Copyright © 2011-2022 走看看