vuemounted刷新_VUE常见面试题

    Vue是目前国内前端开发最流行的框架&＃xff0c;不仅前端开发人员要会&＃xff0c;后端开发人员如果掌握了Vue&＃xff0c;面试的时候会多一个加分项。

1. 什么是vue

    Vue是一个MVVM模型的js框架(m--->model v--->view)&＃xff0c;model本质上来说就是数据。view就是视图(即最终展现给客户的页面)。

mv model--->view (由数据驱动视图)&＃xff0c;vm view --->model(由视图通过事件更新数据)。

   Vue的特点是简单上手容易&＃xff0c;轻量级(相对AngularJs,RectJs...)组件齐全&＃xff0c;文档便于阅读。

2. 什么是MVVM&＃xff1f;

     Model代表数据模型&＃xff0c;数据和业务逻辑都在Model层中定义&＃xff0c;View 代表UI视图&＃xff0c;负责数据的展示&＃xff1b;ViewModel负责监听 Model 中数据的改变并且控制视图的更新&＃xff0c;处理用户交互操作&＃xff1b;

      Model 和 View 并无直接关联&＃xff0c;而是通过 ViewModel 来进行联系的。Model 和ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新&＃xff0c;View 中由于用户交互操作而改变的数据也会在 Model 中同步。这种模式实现了 Model 和 View 的数据自动同步&＃xff0c;因此开发者只需要专注对数据的维护操作即可&＃xff0c;而不需要自己操作 DOM。

3. Vue的优点是什么&＃xff1f;

      低耦合&＃xff0c;视图(View)可以独立于Model变化和修改&＃xff0c;一个ViewModel可以绑定到不同的"View"上&＃xff0c;当View变化的时候Model可以不变&＃xff0c;当Model变化的时候View也可以不变。

     可重用性。你可以把一些视图逻辑放在一个ViewModel里面&＃xff0c;让很多view重用这段视图逻辑。

    独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)&＃xff0c;设计人员可以专注于页面设计。可测试。界面素来是比较难于测试的&＃xff0c;而现在测试可以针对ViewModel来写。

4. v-if 和 v-show 有什么区别&＃xff1f;

    v-show 仅仅控制元素的显示方式&＃xff0c;将display 属性在 block 和none 来回切换&＃xff1b;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时&＃xff0c;使用v-show会更加节省性能上的开销&＃xff1b;当只需要一次显示或隐藏时&＃xff0c;使用v-if更加合理。

5. 简述Vue的响应式原理

   当一个Vue实例创建时&＃xff0c;vue会遍历data选项的属性&＃xff0c;用Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖&＃xff0c;在属性被访问和修改时通知变化。每个组件实例都有相应的watcher 程序实例&＃xff0c;它会在组件渲染的过程中把属性记录为依赖&＃xff0c;之后当依赖项的 setter 被调用时&＃xff0c;会通知 watcher 重新计算&＃xff0c;从而致使它关联的组件得以更新。

 6. Vue中如何在组件内部实现一个双向数据绑定&＃xff1f;

       以文本框为例&＃xff0c;父组件通过props 传值给子组件&＃xff0c;子组件通过$emit 来通知父组件修改相应的props值&＃xff0c;我们在父组件中做了两件事&＃xff0c;一是给子组件传入props&＃xff0c;二是监听事件并同步自己的value属性。简单的实现方式:使用v-model绑定&＃xff0c;v-model帮我们完成上面的两步操作。

7. 如何让CSS只在当前组件中起作用

     将当前组件的

8. 路由之间如何跳转

      Vue-router是Vue.js官方的路由插件&＃xff0c;它和vue.js是深度集成的&＃xff0c;适合用于构建单页面应用。vue的单页面应用是基于路由和组件的&＃xff0c;路由用于设定访问路径&＃xff0c;并将路径和组件映射起来。传统的页面应用&＃xff0c;是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中&＃xff0c;则是路径之间的切换&＃xff0c;也就是组件的切换.实现方式&＃xff1a;

(1)声明式(标签跳转)

登录‐link>
购物车‐link>

(2)编码式&＃xff1a;this.$router.push({name:’cart’})

9.    组件之间如何传值&＃xff1f;

• 父组件与子组件传值

• 组件通过标签上面定义传值&＃xff0c;子组件通过props方法接受数据

• 子组件向父组件传递数据

• 子组件通过$emit方法传递参数

   

10. mvvm和mvc区别&＃xff1f;它和其它框架(jquery)的区别是什么&＃xff1f;哪些场景适合&＃xff1f;

    mvc和mvvm区别并不大&＃xff0c;都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低&＃xff0c;加载速度变慢&＃xff0c;影响用户体验。

区别&＃xff1a;vue数据驱动&＃xff0c;通过数据来显示视图层而不是节点操作。

11.Vue-cli中怎样使用自定义的组件?

(1)在components目录新建你的组件文件(Header.vue)&＃xff0c;

script一定要export default {}

(2)在需要用的页面(组件)中导入&＃xff1a;

import Header from &＃39;&＃64;/components/ Header.vue&＃39;

(3)注入到vue的子组件的components属性上,components:{Header}

(4)在template视图view中使用

12.  Vue的生命周期(vue的钩子函数)

beforeCreate 组件还未被创

created 组件已被创建

beforeMount 组件已被创建但还未挂载到DOM节点上

mounted 组件已挂载到DOM节点上

beforeDestory 组件即将被销毁

destoryed 组件已经被销毁

13.Vue的双向数据绑定原理是什么&＃xff1f;

    vue.js是采用数据劫持结合发布者-订阅者模式的方式&＃xff0c;通过Object.defineProperty()来劫持各个属性的setter&＃xff0c;getter,在数据变动时发布消息给订阅者&＃xff0c;触发相应的监听回调。

具体步骤:

(1)需要observe的数据对象进行遍递归历&＃xff0c;包括子属性对象的属性&＃xff0c;都加上setter和getter这样的话&＃xff0c;给这个对象的某个值赋值&＃xff0c;就会触发setter

(2)compile解析模板指令&＃xff0c;将模板中的变量替换成数据&＃xff0c;然后初始化渲染页面视图&＃xff0c;并将每个指令对应的节点绑定更新函数&＃xff0c;添加数据的订阅者&＃xff0c;一旦数据有变动&＃xff0c;收到通知&＃xff0c;更新视图。

(3)Watcher订阅者是Observer和Compile之间通信的桥梁&＃xff0c;主要做的事情是&＃xff1a;

在自身实例化时往属性订阅器(dep)里面添加自己。自身必须有一个update()方法待属性变动dep.notice()通知时&＃xff0c;能调用自身的update()方法&＃xff0c;并触发Compile中绑定的回调&＃xff0c;则功成身退。

14.  vue.cli项目中目录中src目录每个文件夹和文件的用法&＃xff1f;

·  assets文件夹是放静态资源&＃xff1b;

·  components是放组件&＃xff1b;

·  router是定义路由相关的配置&＃xff1b;

·  view视图&＃xff1b;

·  app.vue是一个应用组件&＃xff1b;

·  main.js是入口文件&＃xff1b;

15.  axios 是什么&＃xff1f;怎么使用&＃xff1f;描述使用它实现登录功能的流程&＃xff1f; 答&＃xff1a;axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端&＃xff0c;它本身具有以下特征。

(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&＃61;>{}).catch(err&＃61;> {})

16. vue组件化的理解

     组件的基本构成分别为&＃xff1a;样式结构&＃xff0c;行为逻辑&＃xff0c;数据。web 中的组件其实就是页面的一部分&＃xff0c;每个组件都会提供一些对外的接口&＃xff0c;允许使用者使用和设置参数属性&＃xff0c;可以将不同功能的组件结合在一起&＃xff0c;快速的构建一个符合需求的引用。

17.created 和 mounted 的区别 

created 是实例创建完成之后的钩子函数&＃xff1b;在模板渲染成html前调用&＃xff0c;即通常初始化某些属性值&＃xff0c;然后再渲染成视图。mounted是将编译好的HTML挂在到页面完成后执行的钩子函数&＃xff0c;在整个生命周期中只执行一次&＃xff1b;在模板渲染成html后调用&＃xff0c;通常是初始化页面完成后&＃xff0c;再对html的dom节点进行一些需要的操作.只有 ajax 数据请求时&＃xff0c;使用 created &＃xff1b;如果有依赖DOM的情况&＃xff0c;就放在 mounted中。

18.前端如何优化网站性能&＃xff1f;

1)减少 HTTP 请求数量

在浏览器与服务器进行通信时&＃xff0c;主要是通过HTTP 进行通信。浏览器与服务器需要经过三次握手&＃xff0c;每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数)&＃xff0c;一旦HTTP 请求数量达到一定数量&＃xff0c;资源请求就存在等待状态&＃xff0c;这是很致命的&＃xff0c;因此减少HTTP 的请求数量可以很大程度上对网站性能进行优化。

2)CSS Sprites

国内俗称CSS精灵&＃xff0c;这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案&＃xff0c;可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并CSS 和JS 文件。现在前端有很多工程化打包工具&＃xff0c;如&＃xff1a;grunt、gulp、webpack等。为了减少 HTTP 请求数量&＃xff0c;可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

3)采用 lazyLoad

俗称懒加载&＃xff0c;可以控制网页上的内容在一开始无需加载&＃xff0c;不需要发请求&＃xff0c;等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

4)控制资源文件加载优先级

浏览器在加载HTML内容时&＃xff0c;是将HTML内容从上至下依次解析&＃xff0c;解析到link或者标签就会加载href或者src对应链接内容&＃xff0c;为了第一时间展示页面给用户&＃xff0c;就需要将CSS提前加载&＃xff0c;不要受 JS 加载影响。一般情况下都是CSS在头部&＃xff0c;JS在底部。

5)利用浏览器缓存

浏览器缓存是将网络资源存储在本地&＃xff0c;等待下次请求该资源时&＃xff0c;如果资源已经存在就不需要到服务器重新请求该资源&＃xff0c;直接在本地读取该资源。

6)减少重排(Reflow)

基本原理&＃xff1a;重排是DOM的变化影响到了元素的几何属性(宽和高)&＃xff0c;浏览器会重新计算元素的几何属性&＃xff0c;会使渲染树中受到影响的部分失效&＃xff0c;浏览器会验证DOM 树上的所有其它结点的visibility属性&＃xff0c;这也是Reflow低效的原因。如果Reflow的过于频繁&＃xff0c;CPU使用率就会急剧上升。减少Reflow&＃xff0c;如果需要在DOM操作时添加样式&＃xff0c;尽量使用增加class属性&＃xff0c;而不是通过style操作样式。7)减少 DOM 操作

8)图标使用 IconFont 替换

19.网页从输入网址到渲染完成经历了哪些过程&＃xff1f;

1)输入网址&＃xff1b;

2)发送到DNS服务器&＃xff0c;并获取域名对应的web服务器对应的ip地址&＃xff1b;

3)与web服务器建立TCP连接&＃xff1b;

4)浏览器向web服务器发送http请求&＃xff1b;

5)web服务器响应请求&＃xff0c;并返回指定url的数据(或错误信息&＃xff0c;或重定向的新的url地址)&＃xff1b;

6)浏览器下载web服务器返回的数据及解析html源文件&＃xff1b;

7)生成DOM树&＃xff0c;解析css和js&＃xff0c;渲染页面&＃xff0c;直至显示完成&＃xff1b;