Vue前端面试题

发布 : 2019-04-09 浏览 :

vue的双向绑定原理

vue实现数据双向绑定主要是:采用数据劫持结合“发布者-订阅者”模式的方式。通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调

单向数据流和双向数据流

单向数据流:顾名思义,数据流是单向的。数据流动方向可以跟踪,流动单一,追查问题的时候可以更便捷。缺点是写起来不太方便。要是UI发生变更就必须创建各种action来维护相对应的state

双向数据流:数据之间是相通的,将数据变更的操作隐藏在框架内部。优点是在表单交互多的场景下,会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化,增加了出错时的debug的难度

MVC、MVVM的理解

MVC:
QQ截图20190409151444.jpg

特点:

  1. View 传送指令到 Controller
  2. Controller 完成业务逻辑后,要求 Model 改变状态;
  3. Model 将新的数据发送到 View,用户得到反馈。

所有通信都是单向的。

MVVM:
QQ截图20190409151452.jpg

特点:

  1. 各部分之间的通信,都是双向的;
  2. 采用双向绑定: View 的变动,自动反映在 ViewModel,反之亦然。

vue生命周期

生命周期是一个实例从开始创建到销毁的过程

  • beforeCreated():在实例创建之间执行,数据未加载状态。
  • created():在实例创建、数据加载后,能初始化数据,DOM 渲染之前执行。
  • beforeMount():虚拟 DOM 已创建完成,在数据渲染前最后一次更改数据。
  • mounted():页面、数据渲染完成,真实 DOM 挂载完成。
  • beforeUpadate():重新渲染之前触发。
  • updated():数据已经更改完成,DOM 也重新 render 完成,更改数据会陷入死循环。
  • beforeDestory()destoryed():前者是销毁前执行(实例仍然完全可用),后者则是销毁后执行。

组件通信

父组件向子组件通信

子组件通过Props属性,绑定父组件数据,实现双方通信

子组件向父组件通信

将父组件的事件在子组件中通过$emit触发

非父子组件、兄弟组件之间的数据传递

1
2
3
4
5
6
7
8
9
10
/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
//......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.')

v-if v-show

使用v-if的时候,如果值为false,那么页面就不会有这个html标签生成
v-show则是不管值为true还是false,html页面都将会存在,只是css中的display显示或隐藏

$route $router

$router是vue-router的实例,想要导航到不同的URL,则使用$router.push()方法
$route是当前router跳转对象里面可以获取name、path、query、params等

NextTick

$NextTick是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用的,所以可以在毁掉中获取更新后的DOM
深入响应式原理(https://cn.vuejs.org/v2/guide/reactivity.html)

vue中的data为什么必须是函数

因为js本身的特性带来的,如果data是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有的vue实例的数据。如果将data作为一个函数返回一个对象,那么每一个实例的data属性都是独立的,不会相互影响了。

计算属性computed和事件methods有什么区别

我们可以将同一函数定义为一个method或者一个计算属性。对于最终的结果,两种方式是相同的。

不同点:

computed:计算属性是基于他们的依赖进行缓存的,只有在她的相关依赖发生改变时才会重新求值

method: 只要发生重新渲染,method调用总汇执行该函数

对比jquery,vue有什么不同

jQuery专注于视图层,通过操作DOM去实现页面的一些逻辑渲染;vue专注于数据层,通过数据的双向绑定,最终表现在DOM层面,减少了DOM操作

vue使用组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发。

vue中怎么自定义指令

全局注册:

1
2
3
4
5
6
Vue.directive('focus', {
// 当被绑定的元素插入到Dom中时
inserted: function(el){
el.focus()
}
})

局部注册

1
2
3
4
5
6
7
directives: {
focus: {
inserted: function(el) {
el.focus()
}
}
}

自定义指令(https://cn.vuejs.org/v2/guide/custom-directive.html)

vue中怎么自定义过滤器

1
2
3
4
5
Vue.filter('reverse', function(value)) {
return value.split('').reverse().join('')
}

<span v-text = "message | reverse"></span>

vue中key作用

key的是特殊属性主要用在vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素

有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误

https://cn.vuejs.org/v2/api/#key

vue的核心是

数据驱动、组件系统

vue优缺点

优点:

  • 良好的交互体验
  • 良好的前后端分离工作模式
  • 减轻服务器压力

缺点:

  • SEO难度较高
  • 前进、后退管理
  • 初次加载耗时多

https://github.com/ltadpoles/web-document/tree/master/Other

留下足迹

❤(●'◡'●)❤博客已运行❤(●'◡'●)❤