vue的基本使用（内附vue常见的面试题）

✍内容都是vue涵盖的重点部分，了解还是掌握都不用我多说了吧✨
⚠️标红的标题就是面试题啦~

1、vue常用指令

v-cloak：防止插值表达式闪烁，配合css样式的display：none使用
	
v-text：把数据填充到指定的标签中，覆盖原始数据
	
v-html：解析html文本，并把它填充到指定的标签中，覆盖原始数据
	
v-pre：显示原始数据
	
v-once：只执行一次，后面数据再更新，视图也不会再更新变化
	
v-on：绑定事件，可以简写为@
	
v-bind：动态绑定Dom元素的属性，可以简写为：
	
v-if：用于控制Dom元素是否需要渲染
	
v-show：用于控制Dom元素显示隐藏

v-else：和v-if配合使用，只有当v-if的值为false的时候，v-else才会被渲染

v-for：遍历data中的数组数据，实现列表的渲染

v-if和v-show的区别

相同点：都可以动态控制DOM元素的显示和隐藏

不同点：v-if是动态的向DOM树中添加或删除dom元素，v-show是通过控制dom元素的css样式的display属性来控制显隐

编译过程：v-if的切换有一个局部编译或卸载的过程，在切换的过程中合适的销毁和重建内部事件监听和子组件，v-show只是简单的基于css的切换

编译条件：v-if是惰性的，如果初始条件为假，那么什么也不做，只有当初始条件第一次变为真的时候，才开始局部编译，编译被缓存后，在切换的时候进行局部卸载；v-show是在任何情况下，无论首次条件是否为真都被编译，编译被缓存，dom节点保留

性能消耗：v-if有更高的切换消耗，v-show有更高的初始渲染消耗

v-for中key的作用

key是vue中vnode的唯一标记，通过它，我们的diff操作更准确、更快速，可以更高效的更新虚拟Dom

v-if和v-for可以一起用吗

不建议，v-for的优先级比v-if的高，用在一起会造成性能方面的浪费，每次渲染都会先循环再进行条件判断，他不会重复遍历列表中的每个值，只遍历一次，并且在v-if为否的时候不会运算v-for

1、Vue全家桶

vue整体架构
	
vuex状态管理
	
vue-router路由管理
	
axioshttp的请求方式
	
vue-cli单页面应用的脚手架

vuex状态管理

vuex是专为vue.js开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预期的方式发生变化

核心：store仓库

特性：
	① 它的状态存储是响应式的
    ② 更改store中状态的唯一方法就是显式的提交mutation

属性：
	① state：vuex的基本数据
	② getter：基本数据派生出来的状态，相当于state的计算属性，有缓存
	③ mutation：更改store中状态的唯一方法，是同步函数
	④ action：和mutation类似，但是他不是直接变更状态，而是通过提交mutation，可以包含任意的异步操作 
	⑤ module：模块化vuex，使结构非常清晰

vue-router路由管理

路由模式
① hash：#号后面hash值的变化，不会导致浏览器向服务器发送请求，页面不会刷新，它通过hashchange事件监听hash值的变化，通过hash值的变化实现页面部分内容的更新
② history：主要是通过HTML5的两个API：pushstate和replacestate，来改变url，不会发送请求，监听url的变化就可以更新页面部分内容

区别
① url的显示上：
	hash模式有#，history没有
② 兼容性上：
	hash模式可以兼容低版本的浏览器和IE
③ 刷新页面上
	hash模式可以正常加载到hash值对应的页面
	history没有处理的话，会返回404，所以一般需要后端把所有的页面都配置重定向到首页路由

$router和$route的区别

$router是路由实例对象，$route是路由信息对象

详：
	$router：是 VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象，他包含了所有的路由，包含了许多关键的对象和属性
	$route：是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等，我们可以从vue devtools中看到每个路由对象的不同

axios

http的请求方式

易用、简洁且高效的http库

基于Promise的http库，可以用在浏览器和node.js中

方法：
		get：获取或查看数据
		post：创建新的数据
		put：修改数据
		delete：删除数据

它里面有请求拦截和响应拦截axios.interceptors.request.use(config=>{})

请求拦截的目的：给请求头中添加token，之后将token带给后台

响应拦截的目的：对响应的数据状态进行处理，返回对应的页面

vue-cli

单页面应用的脚手架

3、vue生命周期

实例创建

beforeCreate--实例创建之前：
	此时data,method以及页面的Dom结构都还没有初始化，什么也做不了

created--实力创建之后：
	此时data和method已经可以使用，页面还未被渲染

Dom渲染

beforeMount--组件编译之前：
	元素已经挂载，页面上还看不到真实的数据，只是一个模板页面

mounted--组件编译之后：
	元素挂载完成，数据已经成功渲染到页面上

数据更新

beforeUpdate--数据更新之前：
	数据更新时触发，此时页面上的数据还是旧的

updated--数据更新之后：
	数据更新时触发，此时页面上的数据已经替换为最新的

实例销毁

beforeDestroy--实例销毁之前：
	实例销毁时触发，可以向用户询问是否需要销毁

destroyed--实例销毁之后：
	实例销毁时触发，此时vue实例已经解除了事件监听和Dom元素的绑定，页面上的Dom节点依旧存在，数据保持原样

4、vue组件

定义

是一段独立的，能够代表页面某个部分的代码片段，拥有自己的数据，以及完整的生命周期。

分为全局组件和私有组件：全局组件在每一个vue实例中都可以使用，私有组件需要用到组件传值

好处

代码可以重复使用
提高开发效率
方便团队维护

注意事项

组件中模板template必须有一个根元素包裹着所有内容

5、vue的核心

数据驱动

vue中，数据的变化会驱动视图的自动更新，传统的做法需要手动操作Dom来实现视图的变化，vue只需要改变数据即可

组件系统

组件化开发的优点很多，可以降低数据间的耦合度，把常用的代码片段封装成组件，就能高度的复用，提高代码的可复用性，一个页面可以由多个组件所组成

6、vue优点

轻量级框架
    	
数据驱动
	
组件化
	
数据和结构分离(前后端分离)
	
虚拟Dom
	
运行速度快
	
单页面应用用户体验好
	
低耦合，可重用

7、vue缺点

生态系统不完善
	
可扩展性比较差
	
vue不支持IE8
	
对于多页应用不灵活
	
SEO难度大

8、vue性能优化

代码层面

v-if和v-show区分使用场景

computed和watch区分使用场景

v-for在使用的时候要绑定key,要避免同时使用v-if

事件的销毁

长列表性能优化

路由懒加载

图片懒加载

第三方插件的按需引入

webpack层面

对图片进行压缩

减少ES6转为ES5的冗余代码

提取公共的代码片段

提取组件的css

模板预编译

web技术层面

CDN的使用

浏览器缓存

9、vue中的通信方式

父传子

在使用子组件的时候绑定属性，v-bind:自定义属性名=data中的数据

在子组件中通过props属性来接收自定义的属性名

子传父

在子组件中通过$emit把数据广播出去，$emit(自定义事件名，广播的数据)

在使用子组件时绑定事件，@自定义事件名=父组件中的带参函数

兄弟传值

定义中间媒介：
	在组件A中通过$emit向中间媒介广播数据，中间媒介.$emit(自定义事件名,广播的数据)
	在组件B中通过$on来接收广播出来的数据，中间媒介.$on(自定义事件名，带参函数)

vuex状态管理

把需要共享的数据放在state中

10、vue双向数据绑定

① vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布信息给订阅者，触发相应的监听回调
② vue实例创建时，vue会遍历data中的属性，用Object.defineProperty()将他们转为setter/getter，并在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新
③ 通过Object.defineProperty 完成对于数据的劫持, 通过观察者模式, 完成对于节点的数据更新

11、vue中的虚拟DOM

实现原理

用JavaScript对象模拟真实DOM树，对真实DOM进行抽象

用diff算法比较两棵虚拟DOM树的差异

用pach算法把两个虚拟Dom对象的差异应用到真实的Dom树

优缺点

优点：
	保证性能下限：框架的虚拟DOM至少可以保证在我们不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能下限

	无需手动操作Dom：我们只需要写好view-model的代码逻辑，框架会根据虚拟DOM和双向数据绑定，帮我们以可预期的方式更新视图，极大的提高我们的开发效率

	跨平台：虚拟DOM本质上是JavaScript对象，而DOM和平台强相关，相比之下，使用虚拟DOM可以进行更方便的跨平台操作

缺点：

无法进行极致优化：虽然虚拟DOM＋合理的优化足以应对绝大部分应用的性能需求，但是对于一些性能要求极高的应用来说，无法进行针对性的极致优化

12、SPA单页面的理解

定义

仅在web页面初始化时，加载相应的html、JavaScript、css，一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或渲染，取而代之的是利用路由机制实现html内容的切换，ui和用户的交互，避免页面的重新加载

优点：

1、用户的体验好、快：内容的切换不需要重新加载整个页面，避免了不必要的重复渲染和跳转

2、基于上面一点，SPA相对于服务器的压力比较小

3、前后端职责分离，架构清晰：前端负责交互逻辑，后端负责数据处理

缺点：

1、初次加载耗时多：为实现单页web应用的功能及显示效果，在加载时需要把JavaScript、css一并加载，部分页面按需加载

2、前进后退路由管理：由于单页应用是在一个页面上显示所有内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理

3、SEO难度较大：由于所有的内容是在一个页面内动态替换显示，所以在SEO上有着其天然的弱势

13、计算属性computed和侦听器watch的区别

定义

computed：是计算属性，依赖其他属性值，并且computed的值有缓存，只有当它依赖的属性值发生改变的时候，下次获取computed的值才会重新计算
	
watch：更多的是观察作用，类似某些数据的监听回调，每当它监听的数据发生变化的时候，都会执行回调进行后续操作

使用场景：

当我们需要进行数值计算，并依赖其他数据的时候，我们可以使用computed，利用它的缓存特性，避免每次获取值的时候都要重新计算

当我们需要在数据变化时执行异步或开销较大的操作的时候，应该使用watch，因为watch允许我们执行异步操作，限制我们执行该操作的频率，并在我们得到最终结果之前设置中间状态

14、vue中的data为什么是一个函数

组件是用来复用的，并且JavaScript里对象是引用关系，如果组件中的data是一个对象的话，作用域就没有隔离，子组件中的data属性值就会相互影响

组件中的data是一个函数的话，因为函数有独立的作用域，所以每个实例都可以维护一份被返回对象的独立的拷贝，子组件中的data属性值就不会相互影响

15、刷新页面，数据消失怎么解决

 vuex数据位于内存，页面的刷新重置会导致数据的归零，也就是所谓的消失。
 
 本地持久化（把数据保存在本地）可以解决该问题。

16、mvc和mvvm

mvc

是一种软件设计典范

model-view-controller 模型视图控制器的缩写

mvvm

是一种设计思想

model-view-viewmodel 模型视图视图模型的缩写

模型：后端传递的数据
视图：所看到的页面	
视图模型：mvvm的核心，连接model和view的桥梁，也就是vue实例

它通过Dom事件监听实现双向数据绑定，也就是：

数据发生变化，视图也发生变化

视图发生变化，数据也会跟着同步变化

和其他框架的区别就是：

vue数据驱动，通过数据来显示视图层而不是节点操作

使用场景：

数据操作比较多的场景更加便捷

区别

都是一种设计思想，主要就是mvc中的controller演变成了mvvm中的view-model

mvvm主要解决了mvc中大量DOM操作导致的页面渲染性能降低，加载速度变慢，影响用户体验的问题

17、$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

它可以把回调延迟到下次DOM更新循环之后执行

18、防抖和节流

防抖

触发事件后，在n秒内函数只执行一次；。如果在n秒内重复执行了事件，则会重新计算函数的执行时间

节流

连续触发事件，但是在n秒内只执行一次函数，节流会稀释函数的执行频率

19、重绘和重排（回流）

重绘

负责元素的样式更新，发生在元素的可见的外观被改变，但没有影响到布局的时候

重排（回流）

负责元素的几何属性更新，一般发生在页面布局改变的时候

重排必然会带来重绘，但是重绘未必会带来重排

20、（附加）el-table组件根据内容改变颜色

<el-table-column prop="count" label="工作日" width="100">
	<template scope="scope">
		<span v-if="scope.row.count>=5" style="color:green">{{scope.row.count}}</span>
		<span v-else style="color:red">{{scope.row.count}}</span>
	</template>
</el-table-column>