关于vue的常见面试题
1.谈谈你对vue的认识vue概念:是一个构建用户界面的渐进式框架,典型的MVVM框架。注:模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新。这种设计让状态管理变得非常简单而直观。vue作用:响应式的数据绑定和组合的视图组件vue原理:数据双向绑定 模板编译和虚拟domVue实现数据双向绑定的效果,需要三大模块:Observe...
1.谈谈你对vue的认识
vue概念:是一个构建用户界面的渐进式框架,典型的MVVM框架。
注:模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新。这种设计让状态管理变得非常简单而直观。
vue作用:响应式的数据绑定和组合的视图组件
vue原理:数据双向绑定 模板编译和虚拟dom
Vue实现数据双向绑定的效果,需要三大模块:
- Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
- Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
- Watcher:作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。
- Observer的核心是通过
Obeject.defineProperty()
来监听数据的变动,这个函数内部可以定义setter
和getter
,每当数据发生变化,就会触发setter
。这时候Observer
就要通知订阅者,订阅者就是Watcher
。 -
Watcher订阅者作为
Observer
和Compile
之间通信的桥梁,主要做的事情是:
- 在自身实例化时往属性订阅器(dep)里面添加自己
- 自身必须有一个
update()
方法 - 待属性变动
dep.notice()
通知时,能调用自身的update()方法,并触发Compile
中绑定的回调
- Compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
vue生命周期:vue 实例从创建到销毁的过程,就是Vue 的生命周期,即开始创建、初始化数据、编译模板、挂载Dom→渲染、 更新→渲染、卸载等一系列过程。总共分为8个阶段:
- beforeCreate----创建前 组件实例更被创建,组件属性计算之前,数据对象data都为undefined,未初始化。
- created----创建后 组件实例创建完成,属性已经绑定,数据对象data已存在,但dom未生成,$el未存在
- beforeMount---挂载前 vue实例的$el和data都已初始化,挂载之前为虚拟的dom节点,data.message未替换
- mounted-----挂载后 vue实例挂载完成,data.message成功渲染。
- beforeUpdate----更新前 当data变化时,会触发beforeUpdate方法
- updated----更新后 当data变化时,会触发updated方法
- beforeDestory---销毁前 组件销毁之前调用
- destoryed---销毁后 组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在 。
vue的优点:低耦合、可重用、性独立开发、可测试 。
vue和其他框架的对比:
前期借鉴了angular和react的一些优秀思想,比如虚拟dom、指令操作等
2.MVVM框架是什么?他和其他框架(jQuery)有什么区别,使用场景
MVVM框架:一个model+view+view-model的框架,model 是数据模型,view是视图,view-model连接数据和视图。
视图的输入框绑定了v-model, 用户输入后会改变data;Model改变也会同步视图更新相关的依赖, 双向绑定就是vm起了作用。
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
使用场景:数据操作比较多的场景更加方便快捷。
3.MVC框架和MVVM框架的区别
mvc和mvvm都是一种设计思想,主要是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验,以及当 Model 频繁发生变化,开发者需要主动更新到View,这些问题。
4.vuex是什么,它的原理
vuex:状态管理器,实现组件间的数据共享。
原理:一个应用可以看作是由View, Actions,State三部分组成,数据的流动也是从View => Actions => State =>View 以此达到数据的单向流动。但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心。
一个实例化的Vuex.Store由state, mutations和actions三个属性组成:
- state中保存着共有数据
- 改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的
- 如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改。
5.列举vue的指令及用法
v-for:遍历循环
v-html、v-text:文本信息
v-model:实现双向绑定
v-if、v-show: 判断是否隐藏显示
v-bind:class 绑定属性
@click 绑定事件
6.vue里面的自定义指令是什么,其中的钩子函数有哪些?
vue.directive,可以写在组件内部,也可以写在外部作为全局的使用。
它的钩子有bind,inserted,update等
7.vue组件之间如何传值通信
父到子:
- 子组件在props中创建一个属性,用来接收父组件传过来的值;
- 在父组件中注册子组件;
- 在子组件标签中添加子组件props中创建的属性;
- 把需要传给子组件的值赋给该属性
子到父:
- 子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
- 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
- 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
平行组件:
- $emit推送,$on接收
8.vue组件之间如何跳转
路由配置好之后,可以使用下面三总方式进行组件的跳转展示
① 直接修改地址栏的路由路径
② 用router-link标签的to属性配置path即可
③通过js编程方式,在事件里面调用this.$router.push("/home")实现
9.vue中跨域问题如何解决
① 后台更改header:
- header('Access-Control-Allow-Origin:*'); //允许所有来源访问
- header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式
② 使用JQuery提供的jsonp : 发起ajax请求,设置dataType为jsonp
③ 使用http-proxy-middleware 代理解决
10.es6和es5对比,有何改变
es6常用语法:
- 变量声明const和let
- import导入模块、export导出模块
- class类
- promise
- 箭头函数
- 模板字符串
更多推荐
所有评论(0)