请选择 进入手机版 | 继续访问电脑版

Vue 面试题

[复制链接]
大胆 发表于 2021-1-3 11:21:40 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
Vue 口试题

  背就有分
1. v-if 和 v-show 的区别是什么

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适本地被销毁和重建。
v-if 也是惰性的: 如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简朴得多——不管初始条件是什么,元素总是会被渲染,而且只是简朴地基于 CSS 举行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频仍地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
2. $route和 $router的区别是什么

$route 为当前 router 跳转对象,内里可以获取 name, path, query, params, fullPath, matched, hash 等。
$router为 VueRouter 实例,是一个全局路由对象,包罗了路由跳转的方法、钩子函数等,想要导航到差异 URL ,则使用 $router.push() 方法。
3. 请举出 Vue 几种常用的指令



  • v-if: 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
  • v-show: 根据表达式之真假值,切换元素的 display CSS 属性。
  • v-for: 循环指令,基于一个数组大概对象渲染一个列表,vue2.0 以上必须共同 key 值使用。
  • v-bind: 动态地绑定一个或多个特性,或一个组件 prop 的表达式。
  • v-on: 用于监听指定元素的 DOM 事件,好比点击事件。绑定事件侦听器。
  • v-model: 实现表单输入和应用状态之间的双向绑定。
  • v-pre: 跳过这个元素和它的子元素的编译过程。可以用来显示元素 Mustache 标签。跳过大量没有指令的节点会加速编译。
  • v-once: 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
4. Vue 常用的修饰符有哪些



  • 事件修饰符

    • .stop 阻止单击事件继承流传(阻止冒泡)
    • .prevent 阻止事件默认行为
    • .capture 添加事件监听器时使用事件捕捉模式,即元素自身触发的事件先在此处理惩罚,然后才交由内部元素举行处理惩罚
    • .self 只当在 event.target 是当前元素自身时触发处理惩罚函数

  • 按键修饰符

    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .down
    • .left
    • .right

  • 系统修饰符

    • .ctrl
    • .alt
    • .shift
    • .meta
    • .exact 修饰符允许你控制由准确的系统修饰符组合除法的事件。
      1. AAA
      复制代码

  • 鼠标按钮修饰符

    • .left
    • .right
    • .middle
    这些修饰符会限制处理惩罚函数仅响应特定的鼠标按钮。

5. v-on 可以绑定多个方法吗



  • v-on 绑定多个方法:

      1. v-on绑定多个方法
      复制代码

  • 一个事件绑定多个函数:

      1. 一个事件绑定多个函数
      复制代码

6. Vue 中 key 值的作用

key的作用主要是为了高效的更新虚拟DOM。
7. 什么是 Vue 的盘算属性

模板内的表达式非常便利,但是设计它们的 初志是用于简朴盘算的 。在模板中放入 太多的逻辑会让模板过重且难以维护 。比方:
  1.   {{ message.split('').reverse().join('') }}
复制代码
在这个地方,模板不再是简朴的声明式逻辑。你必须看一段时间才华意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理惩罚。
所以,对于任何复杂逻辑,都应当使用盘算属性。
例子:
  1.   Original message: "{{ message }}"
  2.   Computed reversed message: "{{ reversedMessage }}"
  3. var vm = new Vue({  el: '#example',  data: {    message: 'Hello'  },  computed: {    // 盘算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }  }})
复制代码
效果:
  1. Original message: "Hello"Computed reversed message: "olleH"
复制代码
8. 如何界说 vue-router 的动态路由,获取传过来的值

动态路由的创建,主要是使用 path 属性过程中,使用动态路径参数,以冒号开头,如:
  1. {    path: /user/:id    component: User}
复制代码
这会是访问 user 目次下的所有文件,如 /user/a 和 /user/b,都会映射到 User 组件
当匹配到 /user 下的任意路由时,参数值会被设置到 this.$route.params 下,所以通过这个属性可以获取到动态参数
9. watch 和 computed 的差异是什么

盘算属性computed:



  • 支持缓存,只有依赖数据发生改变,才会重新举行盘算
  • 不支持异步,当computed内有异步操纵时无效,无法监听数据的变革
  • computed 属性值会默认走缓存,盘算属性是基于它们的响应式依赖举行缓存的,也就是基于data中声明过大概父组件通报的props中的数据通过盘算得到的值
  • 如果一个属性是由其他属性盘算而来的,这个属性依赖其他属性,是一个多对一大概一对一,一般用computed
  • 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变革时,调用set方法。
侦听属性watch



  • 不支持缓存,数据变,直接会触发相应的操纵。
  • watch支持异步;监听的函数吸收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  • 当一个属性发生变革时,需要执行对应的操纵;一对多;
  • 监听数据必须是data中声明过大概父组件通报过来的props中的数据,当数据变革时,触发其他操纵,函数有两个参数:
  immediate: 组件加载立刻触发回调函数执行
  1. watch: {  firstName: {    handler(newName, oldName) {      this.fullName = newName + ' ' + this.lastName;    },    // 代表在wacth里声明确firstName这个方法之后立刻执行handler方法    immediate: true  }}
复制代码
  deep: deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj内里任何一个属性都会触发这个监听器里的 handler
  1. watch: {  obj: {    handler(newName, oldName) {      console.log('obj.a changed');    },    immediate: true,    deep: true  }}
复制代码
举行优化,给对象的指定属性添加侦听,淘汰性能开销,这样vue.js会一层一层分析直到遇到属性a,才给a设置监听函数
  1. watch: {  'obj.a': {    handler(newName, oldName) {      console.log('obj.a changed');    },    immediate: true,    // deep: true  }}
复制代码
10. 组件中 data 为什么是函数

当我们的data是一个函数的时候,每一个实例的data属性都是独立的,不会相互影响了。
  参考博客 https://www.jianshu.com/p/f3e774c57356

来源:https://blog.csdn.net/Cool_breeze_/article/details/112055475
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )