vue mounted 刷新_VUE常见面试题

    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，渲染页面，直至显示完成；