前端面试题——第八天

1、第一次页面加载会触发哪几个钩子?

触发 下面这几个beforeCreate, created, beforeMount, mounted ,并在mounted的时候DOM渲染完成

2、vue中data必须是一个函数

对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。

3、vue中做数据渲染的时候如何保证将数据原样输出?
  • v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出

  • v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染

  • {{}}:插值表达式,可以直接获取Vue实例中定义的数据或函数,使用插值表达式的时候,值可能闪烁;而使用v-html、v-text不会闪烁,有值就显示,没值就隐藏

4、active-class是哪个组件的属性?

vue-router模块的router-link组件。

5、vue-router有哪几种导航钩子?

三种。

  • 一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。

  • 第二种:组件内的钩子;

  • 第三种:单独路由独享组件

6、route和router的区别

route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法,钩子函数等

7、vue几种常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

8、v-if 和 v-show 区别

v-if按照条件是否渲染,v-show是display的block或none

9、vue常用的修饰符?

.prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用

10、vue-loader是什么?使用它的用途有哪些?

解析.vue文件的一个加载器,跟template/js/style转换成js模块。

用途:js可以写es6、style样式可以scss或less、template可以加jade等

11、computed、watch、methods的区别
  • computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。

  • watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。就好在div写一个表达式name,data里写入num和lastname,firstname,在watch里当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值,而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。

  • methods方法,函数,绑定事件调用;不会使用缓存

12、什么是js的冒泡?Vue中如何阻止冒泡事件?
  • js冒泡概念:当父元素内多级子元素绑定了同一个事件,js会依次从内往外或者从外往内(?)执行每个元素的该事件,从而引发冒泡

  • js解决冒泡:event.stopPropagation()

  • vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop=""

作者:tyu229
链接:https://www.jianshu.com/p/2ed9f54a3ff2
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue是什么? vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现...
    九四年的风阅读 12,781评论 2 131
  • 前言 接上篇前端Js笔试题面试题,收集整理Vue相关的面试题,供自己现在和以后学习和面试,也希望能对点进来的小伙伴...
    蛙哇阅读 7,468评论 0 10
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,666评论 0 6
  • 1. Vue.js介绍 Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API; V...
    和泥巴的葫芦娃阅读 4,394评论 2 11
  • vue面试题 转自https://www.jianshu.com/p/2ed9f54a3ff2 一、Vue.js介...
    zhcnnet阅读 4,826评论 0 22