2019 vue常见面试题

1. vue 组件的生命周期?

vue生命周期.png
vue生命周期.jpeg
beforeCreate() { // 这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
        // console.log(this.msg)
        // this.show()
        // 注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 数据都还没有没初始化
      },
      created() { // 这是遇到的第二个生命周期函数
        // console.log(this.msg)
        // this.show()
        //  在 created 中,data 和 methods 都已经被初始化好了!
        // 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
      },
      beforeMount() { // 这是遇到的第3个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
      },
      mounted() { // 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
      },
 
 
      // 接下来的是运行中的两个事件
      beforeUpdate() { // 这时候,表示 我们的界面还没有被更新【数据被更新了吗?  数据肯定被更新了】
        /* console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是:' + this.msg) */
        // 得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
      },
      updated() {
        console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是:' + this.msg)
        // updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
      }


2. created 和 mounted 有什么区别?(挂载完成之后 this.$el 获取当前组件的 dom 元素)

  1. mounted一般是在html渲染完成后的操作,此时el,data都已经加载完成,一般对dom的操作都写在mounted中,例如获取innerHTML,初始化echarts的时候。
  2. created一般是在html渲染前的操作,此时el还是undefined,data已经存在。这里不能对dom进行操作

3. keep-alive:keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素。

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

4. slot 插槽(就是组件的占位符):slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

  1. .单个插槽 -> 匿名插槽
  2. 具名插槽:
    需要多个插槽时,可以利用<slot> 元素的一个特殊的特性:name来定义具名插槽
  3. 作用域插槽——带数据的插槽
    单个插槽和具名插槽中插槽上不绑定数据,所以父组件提供的模板既要包括样式又要包括数据,而作用域插槽是子组件提供数据,父组件只需要提供一套样式

5. 组件之间传值

  1. 父传子:通过属性进行传递(在父组件标签上绑定自定义属性名,值是父组件要传递的数据,在子组件内部通过props属性接收属性名)
  2. 子传父:通过事件派发(在子组件标签上绑定自定义事件,子组件内部通过$emit给该事件推送数据,父组件内部通过函数接收)
  3. 平行组件(事件总线):使用eventbus事件总线,在代码中创建一个空白的vue实例,所有事件派发和监听都在此实例上进行。

6. 计算属性?主要用一些简单的计算。--计算属性只有在它的相关依赖发生改变时才会重新求值。

7. 计算属性和 methods 有什么区别?-->总结:computed计算属性的缓存原理在我们处理大量数据的时候使用可以大大提高效率,不必在数据没有发生改变的时候重新获取数据的值,可直接获取到结果,并且只执行绑定依赖的方法。methods里方法在依赖的值改变后,只有设置触发才会重新执行methods里相关的方法。

  1. 计算属性方法调用不用加();methods需要;
  2. 执行机制
    computed里的方法在初始化执行过后,只要任何值有更新,那么所有在computed计算属性里和其相关的值都会更新。
    methods只有在调用的时候才会执行对应的方法,不会自动同步数据。
    computed计算属性跟methods在内部的函数写起来没有什么区别,只是在调用的时候不一样

8. 过滤器?

  1. 过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具
  2. 过滤器怎么串联使用

//在双花括号中 

{{ message | capitalize }}

//在 `v-bind` 中 

<p v-bind:id="rawId | formatId"></p>

//也可以串联多个过滤器 

{{ message | filterA | filterB }}

9. vue 中怎么定义组件,组件定义需要注意什么事情?

10. 在 vue 中如何定义一个类似于 element-ui 的组件库?

11. vue-router

路由的两种模式:history,hash
路由传参:params,query
params传参的时候可以在路由配置的时候设置占位符
query传参就是标准的url传参形式
如果我们想刷新页面之后路由传递的参数还存在就必须使用query传参或者params传参的时候设置路由占位符
路由守卫
beforeEach
afterEach
在路由守卫里可以做登录判断?元属性(meta)

12. vuex

*****
单项数据流
vuex中的数据流向(参照官网给的图能说明)
vuex中主要的五大模块(state,getters,actions,mutations,modules)
mapState
mapActions
mapMutations

13. vue 中的 mvvm 是怎么实现的:

MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成。View层代表的是视图、模版,负责将数据模型转化为UI展现出来。Model层代表的是模型、数据,可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
对数据(Model)进行劫持,当数据变动时,数据会出发劫持时绑定的方法,对视图进行更新。

14. diff 算法:当数据发生改变时,set方法会让调用Dep.notify通知所有订阅者Watcher,订阅者就会调用patch给真实的DOM打补丁,更新相应的视图。

15. 虚拟dom:virtual DOM是将真实的DOM的数据抽取出来,以对象的形式模拟树形结构

16. vue 中为什么不用 jQuery

17. vue 中怎么操作 dom 元素(el,refs)

18. vue 中怎么获取父组件的内容($root)

19. vue 中父组件怎么调用子组件的方法($refs 选中子组件,直接调用方法名)

20. 当页面应用程序刷新之后怎么保证数据还是存在的?你怎么缓存页面数据(sessionStorage,localStorage)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,187评论 0 25
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,685评论 1 17
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,523评论 1 52
  • HTML5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5? *HTML5 现...
    小程要谦虚阅读 755评论 1 8
  • vue是什么? vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现...
    九四年的风阅读 8,695评论 2 131