100%会被问到前端的面试题（vue篇）

谈谈你对Vue的理解

它是一个渐进式的js框架
优点：易用 灵活 高效 易于维护
缺点：
    1.首页加载速度慢
    2.不利于搜索引擎优化

spa单页面的优缺点

优点：
速度快 内容改变不需要重新加载整个页面
前后端分离
减轻服务端压力

缺点：
初次加载速度慢（可以用vue-router懒加载解决）
不适合开发大型项目

vue2和vue3的区别

vue3的Template支持多个根标签 vue2不支持

v-if和v-show的区别

v-if显示隐藏 是将dom元素整个添加或销毁，而v-show是css中的display：none 和display：block

双向数据绑定的原理

用Object.definePrototy（）实现数据劫持，利用data中的getter和setter 数据改变触发setter setter通知watcher 从而触发update方法，对视图进行更新

computed和watch有什么区别

computed：支持缓存 不支持异步 如果依赖的数据不改变就不用重新调用
应用场景：一个属性受多个属性影响 如：商城结算

watch：支持异步，不支持缓存
应用场景：一个属性影响多个属性 如：搜索数据

provide inject 数据是否是响应式的 如何让它变成响应式

如果传入可监听的对象，对象的属性还是可以响应的

vue路由底层原理

hash底层原理：hash通过监听浏览器的onhashchange（）事件变化 查找对应的路由规则

history底层原理：利用 H5的history中新增的两个API pushState（） 和replaceState（） 和一个onpopstate事件监听URL变化

keep-alive

作用：缓存组件
应用场景：商品列表页点击商品跳转详情，返回后仍显示原信息

声明周期：
 初次进入时：created、mounted、activated 退出触发deactivated
 再次进入：会触发 activated

钩子函数：activated组件渲染后调用
         deactivated组件销毁后调用

配置属性：include 字符串或正则表达式，只有名字匹配的组件会被缓存
         exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存
         max 数字、最多可以缓存多少组件实例

nextTick原理及应用场景

用法：在DOM加载完后执行
应用场景：需要在视图更新之后，基于新的视图进行操作的时候
在created和mounted阶段，如果需要操作渲染后的视图，也要使用nextTick方法

diff算法的理解

diff算法本质上是找出两个对象之间的差异，目的是尽可能的复用节点
用来比较新旧节点的不同

v-if和v-for 为什么不能连用

v-for优先级比v-if高
v-for和v-if不能连用 否则if会对每个for循环中的item进行判断 会造成性能的浪费

路由钩子幻术（路由导航守卫）

全局守卫：
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子 进入路由之后（只有to和from）

to from next 参数
to和from 是将要进入和将要离开的路由对象
next进入路由，且必须调用，否则不能进入路由

路由独享守卫：beforeEnter在路由内部调用

路由组件内的守卫：
beforeRouteEnter进入路由前
beforeRouteUpdate 路由复用同一个组件时
beforeRouteLeave 离开当前路由时

路由传参的方式

拼接 用 props接收
在路由导航的push 设置params
在路由导航的push 设置query

MVVM的理解

双向绑定技术：当model改变时 view-model会自动更新 view也会自动改变 很好的做到了数据的一致性

谈谈对vue生命周期的理解

beforeCreate：创建前， 此时data和methods中的数据还没有初始化
created：创建完毕，data中有值，未挂载
beforeMount：可以发起服务端请求，去数据
mounted：此时可以操作DOM
当vue实例里面的data数据变化时，触发组件的重新渲染
beforeUpdate：数据变化前
updated：数据变化后
beforeDestroy：实例被销毁前，此时可以手动销毁一些方法
destroyed：实例被销毁后

vue的响应式

‘响应式’ 是指当数据改变后 vue会通知到使用该数据的代码 例如 视图渲染中使用了数据，数据改变后，视图也会自动更新

前端页面优化的方法

图片用精灵图
加载用异步加载
减少http请求数

v-model原理

<input :value='val @input='$event.target.val'/>

vue组件传值的方式

props
自定义事件（$emit）
$parent
$children
$root
$refs
provide/inject
localStorage
eventBus
vuex
Vue.prototype.xx=xx
$attrs $linsenters

vue父子组件声明周期执行顺序

父组件：beforeCreate  created beforeMount
子组件：beforeCreate created beforeMount mounted
父组件: mounted beforeUpdate
子组件：befreUpadate updated
父组件：updated beofreDestory
子组件：beforeDestory destoryed
父组件：destoryed

v-for中key的作用

高效的更新虚拟DOM

如何让vue中编写的css代码只在当前组件生效

在当前组件的style 中设置scoped
scoped原理：为每一个元素设置独一无二的class名