Vue是目前国内前端开发最流行的框架,不仅前端开发人员要会,后端开发人员如果掌握了Vue,面试的时候会多一个加分项。
1. 什么是vue
Vue是一个MVVM模型的js框架(m--->model v--->view),model本质上来说就是数据。view就是视图(即最终展现给客户的页面)。
mv model--->view (由数据驱动视图),vm view --->model(由视图通过事件更新数据)。
Vue的特点是简单上手容易,轻量级(相对AngularJs,RectJs...)组件齐全,文档便于阅读。
2. 什么是MVVM?
Model代表数据模型,数据和业务逻辑都在Model层中定义,View 代表UI视图,负责数据的展示;ViewModel负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;
Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的。Model 和ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新,View 中由于用户交互操作而改变的数据也会在 Model 中同步。这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 DOM。
3. Vue的优点是什么?
低耦合,视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。
4. v-if 和 v-show 有什么区别?
v-show 仅仅控制元素的显示方式,将display 属性在 block 和none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。
5. 简述Vue的响应式原理
当一个Vue实例创建时,vue会遍历data选项的属性,用Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
6. Vue中如何在组件内部实现一个双向数据绑定?
以文本框为例,父组件通过props 传值给子组件,子组件通过$emit 来通知父组件修改相应的props值,我们在父组件中做了两件事,一是给子组件传入props,二是监听事件并同步自己的value属性。简单的实现方式:使用v-model绑定,v-model帮我们完成上面的两步操作。
7. 如何让CSS只在当前组件中起作用
将当前组件的
8. 路由之间如何跳转
Vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换.实现方式:
(1)声明式(标签跳转)
登录‐link>
购物车‐link>
(2)编码式:this.$router.push({name:’cart’})
9. 组件之间如何传值?
父组件与子组件传值
组件通过标签上面定义传值,子组件通过props方法接受数据
子组件向父组件传递数据
子组件通过$emit方法传递参数
10. mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
mvc和mvvm区别并不大,都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
11.Vue-cli中怎样使用自定义的组件?
(1)在components目录新建你的组件文件(Header.vue),
script一定要export default {}
(2)在需要用的页面(组件)中导入:
import Header from '@/components/ Header.vue'
(3)注入到vue的子组件的components属性上,components:{Header}
(4)在template视图view中使用
12. Vue的生命周期(vue的钩子函数)
beforeCreate 组件还未被创
created 组件已被创建
beforeMount 组件已被创建但还未挂载到DOM节点上
mounted 组件已挂载到DOM节点上
beforeDestory 组件即将被销毁
destoryed 组件已经被销毁
13.Vue的双向数据绑定原理是什么?
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
(1)需要observe的数据对象进行遍递归历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter
(2)compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加数据的订阅者,一旦数据有变动,收到通知,更新视图。
(3)Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
在自身实例化时往属性订阅器(dep)里面添加自己。自身必须有一个update()方法待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
14. vue.cli项目中目录中src目录每个文件夹和文件的用法?
· assets文件夹是放静态资源;
· components是放组件;
· router是定义路由相关的配置;
· view视图;
· app.vue是一个应用组件;
· main.js是入口文件;
15. axios 是什么?怎么使用?描述使用它实现登录功能的流程? 答:axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征。
(1)从浏览器中创建 XMLHttpRequest
(2)从 node.js 发出 http 请求
(3)支持 Promise API
(4)拦截请求和响应
(5)转换请求和响应数据
(6)取消请求
(7)自动转换JSON数据
(8)客户端支持防止 CSRF/XSRF
使用方式:
npm install axios -s
axios.get(‘/user/check’,this.user).then(res=>{}).catch(err=> {})
16. vue组件化的理解
组件的基本构成分别为:样式结构,行为逻辑,数据。web 中的组件其实就是页面的一部分,每个组件都会提供一些对外的接口,允许使用者使用和设置参数属性,可以将不同功能的组件结合在一起,快速的构建一个符合需求的引用。
17.created 和 mounted 的区别
created 是实例创建完成之后的钩子函数;在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted是将编译好的HTML挂在到页面完成后执行的钩子函数,在整个生命周期中只执行一次;在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.只有 ajax 数据请求时,使用 created ;如果有依赖DOM的情况,就放在 mounted中。
18.前端如何优化网站性能?
1)减少 HTTP 请求数量
在浏览器与服务器进行通信时,主要是通过HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少HTTP 的请求数量可以很大程度上对网站性能进行优化。
2)CSS Sprites
国内俗称CSS精灵,这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案,可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并CSS 和JS 文件。现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少 HTTP 请求数量,可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
3)采用 lazyLoad
俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
4)控制资源文件加载优先级
浏览器在加载HTML内容时,是将HTML内容从上至下依次解析,解析到link或者标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受 JS 加载影响。一般情况下都是CSS在头部,JS在底部。
5)利用浏览器缓存
浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器重新请求该资源,直接在本地读取该资源。
6)减少重排(Reflow)
基本原理:重排是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM 树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如果Reflow的过于频繁,CPU使用率就会急剧上升。减少Reflow,如果需要在DOM操作时添加样式,尽量使用增加class属性,而不是通过style操作样式。7)减少 DOM 操作
8)图标使用 IconFont 替换
19.网页从输入网址到渲染完成经历了哪些过程?
1)输入网址;
2)发送到DNS服务器,并获取域名对应的web服务器对应的ip地址;
3)与web服务器建立TCP连接;
4)浏览器向web服务器发送http请求;
5)web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址);
6)浏览器下载web服务器返回的数据及解析html源文件;
7)生成DOM树,解析css和js,渲染页面,直至显示完成;