Vue面试题

vue的双向绑定原理是什么？里面的关键点在哪里？

①采用数据劫持结合发布者-订阅模式来实现的，其原理就是利用了 object.defineProperty()这个方法重新定义了对象获取属性值 get 和 设置属性set来操作实现

②关键点：object.defineProperty()

vue2和vue3双向数据绑定的原理（区别）

1.vue2通过 Object.defineProperty（）一个数据绑定对数据并结合发布订阅者模式的方式实现的

vue3使用ES6中的Proxy对数据进行代理

v2只能有一个根节点，v3可以有很多个根节点，v3对v2来说相当于进行了一个diff方法的优化，

因为v2的虚拟DOM我们是进行全量的一个对比，v3增加了一个静态标记，这样的话比对带有Pf节点，能通过flag信息得知，当前节点要比的具体内容，做到在一定程度上，对diff方法进行一个优化，静态提升方面，v2无论元素它是否参与更新，每次都会被重新创建然后再渲染，v2中它就会对不参与更新元素，做一个静态的提升，只会被创建一次，并且在渲染的时候，我们直接服用就可以了，第二它是一个选项式的API,比如我们把所有的像Methods，data,watch都放在vue实例下面,v3是一个组合式API,把所有东西都放在set up当中，这个set up相当于是beforeCreate和created这两个生命周期

2.vue2默认进行懒观察

3.重写了虚拟 DOM

4.项目目录结构

5.vue3性能的提升

vue 组件通信

父传子： props，子传父：通过$emit ，兄弟传值BUS，vuex

vuex有五种状态和属性

state存放数据

mulations同步修改state里的数据

actions异步修改数据，但需要调用mutations里面的方法修改，

getters数据过滤器相当于vue里的computed

modules模块化

vuex的优势

优点：解决了非父子组件的通信，减少了ajax请求次数，有些可以直接从state中获取

缺点：刷新浏览器，数据丢失

V-for为什么加key?

保证了唯一性，避免dom元素重复渲染

vue中nextTick作用

nextTick 是在下次DOM更新循环结束之后执行延迟回调，

在修改数据之后使用nextTick，就可以在回调中获取更新后的 DOM.

浏览器缓存？

它的一个基本原理就是浏览器在加载资源的时候，他会根据这个请求头的express和

开始Ctrl这两个参数判断是否能命中，是否命中了抢缓存，如果命中了，就是直接从缓存中夺取资源，然后他不会发送请求到服务器，如果没有命中抢缓存的话，浏览器一定会发送一个请求到

服务器，然后通过，lost mode ,model,fund这个属性跟仪态，来验证这个资源是否命中协商缓存，如果命中的话，服务器就将这个请求返回，但是不会返回这个资源的数据，依然是从这个缓存中读取资源，如果强缓存跟协商缓存都没有命中，就直接从服务器加载资源，

不同点：强缓存不会发送请求到服务器，协商缓存会发送请求到服务器

相同点：都是从客户端缓存中来加载资源，而不是从服务器加载资源数据

命中缓存返回状态码：http是304，https是80

Http与Https协议有什么区别？

HTTPS需要到CN来申请证书，因为HTTPS协议，一般免费的证书比较少，所以会花费一定的费用，Http是超文本传输协议，信息是明文传输的，而HTTPS它是具有安全性的，并且是ssl加密传输的一个协议，并且它俩连接的方式也不一样，http的端口是80 HTTPS端口是443，ATP它的连接很简单，是无状态的，但是HTTPS它是由SSL加HTTP协议构建的是加密传输的一个协议

地址栏输入一串网页地址，它这个背后发生了什么？

浏览器它会先查看浏览器缓存，系统缓存，路由缓存，如果存在缓存的话就直接显示。如果没有就进行下一步，域名解析，来获取对应的一个IP,然后就是浏览器向服务器发送TCP连接与这个浏览器建立TCP三次握手，最后一步就是解析CS的样式

cookie、localStorage、sessionStorage它们三者有什么区别？

localStorage和sessionStorage 不会把数据发给服务器，仅在本地存储

cookie:过期时间之前一直有效（数据不能超过4k）

sessionStorage ：页面关闭就清理（内存：5M）

localStorage：除非被清理否则始终有效 （内存：5M）

indexDB；除非被清理否则始终有效 （内存：无限）

图片懒加载?

是什么？

图片懒加载是前端页面优化的一种方式，根据图片是否出现在可视区域的范围内进行相应图片的请求显示（结合滚动加载）。

为什么？

如果页面中需要显示很多图片的时候，当我们一味地使用控件直接加载图片的时候，这样会消耗许多时间去请求网络，而且很影响渲染速度，以至于影响用户体验。

如何使用？

首先在img里定义src的图片地址，src为“加载中”的动图，data-src为实际要展示的图片地址；业务代码中，首先全局获取文档中所有img控件的数量以及img控件集合，然后在lazyload中通过判断每张图片的offsetTop是否小于视口高度和滚动条scrolltop的和来判断是否进入可视区域，如果进入可视区域就进行显示。

什么是跨域，解决跨域方法？

1.协议，端口，域名不同

2.porxy代理 实现方法：通过nginx代理；

CORS，jsonp

vue-router 两种模式

默认是hash模式，路由上方的路径是用#表示，http://localhost:8080/#/news

可以将hash模式改为history模式，路由上方的路径就没有了

vue打包流程

将写好的vue项目 通过命令npm run build执行打包，最终在根目录下会生成dist文件夹，该文件就是我们打包后的文件。 但是打包之前我们需要将路由配置hash, 将vue.config.js里面的publicPath配置为./

然后将打包文件放到服务器上 ，放出连接地址就ok了。

CSS预处理器

使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。

Sass和Less（Less用@，Sass用$）

Less环境，使用较Sass简单，sass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。

LESS并没有裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。

Less与Sass处理机制不一样

前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点

keep-alive功能是什么?

是用来缓存组件的.==>提升性能

包裹动态组件缓慢执行，一般情况下组件进行切换的时候，默认会进行销毁，但它不销毁

V-if和v-show有什么区别？

	v-if	v-show
不同点	会消除dom，耗性能	适合频繁使用
相同点	显示隐藏

Vue监听属性和计算属性有什么区别？

watch监听	computed 计算属性
没有缓存， 支持异步 在data中定义	有缓存 不支持异步 在compute中定义