博客
关于我
最新最全的前端面试题集锦之 Vue 篇(从基础到高级)
阅读量:84 次
发布时间:2019-02-26

本文共 1591 字,大约阅读时间需要 5 分钟。

该内容主要整理关于 Vue 的相关面试题,其他内容面试题请移步至 查看。

一、Vue基础面试题(附答案)

1. keep-alive 组件有什么作用?

keep-alive 是 vue 的内置组件,而这个组件的作用就是能够缓存不活动的组件。一般情况下,组件进行切换的时候,默认是会进行销毁的,如果我们有需求,在某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用 keep-alive 来实现。

keep-alive 上有两个属性,可以对字符串或正则表达式进行匹配,匹配到的组件会被缓存。

  • include 值为字符串或者正则表达式匹配的组件 name 会被缓存。(缓存匹配到的组件)
  • exclude 值为字符串或正则表达式匹配的组件 name 不会被缓存。(排除匹配到的组件)

其拥有两个独立的生命周期钩子函数 activeddeactived,使用 keep-alive 包裹的组件在切换时不会被销毁,而是缓存到内存中并执行 deactived 钩子函数,命中缓存渲染后会执行 actived 钩子函数。

2. 说下 vue 生命周期钩子函数?

每个vue实例在被创建时都要经过一系列的初始化过程。

所有的生命周期钩子自动绑定 this 上下文到实例中,因此可以在函数中访问数据,对属性和方法进行运算。这意味着不能使用箭头函数来定义一个生命周期方法【这是因为箭头函数绑定了父上下文,因此this与你期待的 Vue 实例不同】。

vue的生命周期图:

vue的生命周期图

阶段一:Vue实例创建阶段

  • beforeCreate

    Vue实例在内存中刚被创建,this 变量还不能使用,数据对象(data)和方法(methods)未初始化,watcher 中的事件都不能获得到;

  • created

    实例已经在内存中创建好,数据和方法已经初始化完成,但是模板还未编译,页面还是没有内容,还不能对 dom 节点进行操作(此时访问 this.$elthis.$refs.xxx 都是 undefined

  • beforeMounte

    找到对应的 template 模板,编译成 render 函数,转换成虚拟 dom,此时模板已经编译完成,数据未挂载到页面,也就是说在这个阶段你可以看到标签间的双花括号,数据还未渲染到页面中;

  • render : h=>h(App)

    beforeMounte 之后和 mounted 之前,还有渲染 render 函数,它的作用是把模板渲染成虚拟 dom。

  • mounted

    模板编译好了,虚拟 dom 渲染成真正的 dom 标签,数据渲染到页面,此时Vue实例已经创建完毕,如果没有其他操作的话,Vue实例会静静的躺在内存中,一动不动。
    一般会在 mounted 中来渲染从后端获取的数据。(页面初始化时,如果有操作 dom 的事件一般也会放在 mounted 钩子函数中。当然,也可以放在 create 中,前提需使用 this.$nextTick(function(){}),在回调函数中操作dom。)

阶段二:Vue实例运行阶段

  • beforeUpdate

    数据依赖改变或者用 $forceUpdata 强制刷新时,对象 data 中的数据已经更改(虚拟 dom 已经重新渲染),但是 页面中的值还是原来,未改变,因为此时还未开始渲染 dom

  • update

    此时 data 中的数据和页面更新完毕,页面已经被重新渲染。

在实际开发中,一般会用监听器 watch 来代替上边2个方法,因为 watch 会知道是哪一个数据变化。

阶段三:Vue实例销毁阶段

  • beforeDestroy

    实例销毁前使用,在此刻实例还是可用的。

  • destroyed

    Vue实例被销毁,观察者、子组件、事件监听被清除(页面数据不会消失,只不过是响应式无效了)。


持续更新中。。。

转载地址:http://hnak.baihongyu.com/

你可能感兴趣的文章
mysql5.7的安装和Navicat的安装
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump备份时忽略某些表
查看>>
mysqlreport分析工具详解
查看>>
MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
查看>>
MYSQL一直显示正在启动
查看>>
MySQL一站到底!华为首发MySQL进阶宝典,基础+优化+源码+架构+实战五飞
查看>>
MySQL万字总结!超详细!
查看>>
Mysql下载以及安装(新手入门,超详细)
查看>>
mysql中cast() 和convert()的用法讲解
查看>>
mysql中floor函数的作用是什么?
查看>>
MySQL中group by 与 order by 一起使用排序问题
查看>>
mysql中having的用法
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中null和空字符串的区别与问题!
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>