vue面试题

一.为何组件的data必须是一个函数

如果是对象的话，他就共用了一个内存地址，会产生数据污染的情况，所以，组件中的data必须是一个函数，目的是为了防止多个组件实例对象直接公用一个data，产生数据污染。

二.vue常用指令

v-html 解析输出变量 能解析html
v-text 解析输出变量
v-bind 给标签绑定属性 可以简写为 :属性名=“变量”
v-on 给元素绑定事件 用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”
v-pre 跨过当前的标签不解析 用法 ：<标签 v-pre></标签>
v-cloak 解决差值表达式闪烁的问题
v-model 实现数据的双向绑定 只能适用于表单元素
v-for 可以循环遍历数据
v-if 条件输出
v-show条件输出

三.v-if和v-show的区别

当条件没真时，没有区别。

当条件为假时，v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制。

v-if更适合数据的筛选和初始渲染v-show更适合元素的切换。

四.vue生命周期

1.创建
beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
created() 最早开始使用 data和methods中数据的钩子函数
2.挂载
beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数
3.更新
beforeUpdate() 当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新
updated() 数据更新完成以后触发的方法，DOM节点已经更新
4.销毁
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
destroyed()已经销毁完毕

keep-alive 方法

actived() 组件加上keep-alive，进入组件触发的方法
deactived 离开组件的时候触发的方法。

errorCaptured() 组件内发生错误的时候的触发的方法

五.vue双向数据绑定

通过Object.defineProperty()劫持各个属性的getter和setter。

主要有三部分：

observer来监听自己的model的数据变化，通过Compile来解析编译模板指令,最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化，试图更新，试图变化，数据更新。

六.Vue中的虚拟dom

利用JS描述元素与元素之间的关系。

为什么要使用虚拟dom？

因为dom其实是很慢的，其元素非常庞大，页面性能的问题，大部分都是有dom操作引起的。虚拟dom最大的一个特点就是diff算法。减少js操作真实dom带来的性能消耗。

七.vue diff 算法

diff算法: 基础虚拟DOM完成节点更新的方法
1. 用js对象来表示真是的DOM树结构，创建一个虚拟DOM对象
2. 当数据发生改变的时候，创建一个新的js的虚拟DOM对象
3. 比较新旧对象的差异，记录下来，最终更新到真实的DOM树结构上。

八.vue组件通信

1.父传子 子组件通过porps接受数据

2.子传父 在子组件中通过$emit(“事件”)触发在父组件中定义的事件，数据是以参数的形式传播

3.兄弟传值

（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
（2）在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

九.vuex

vuex是专门为vue.js应用程序开发的状态管理模式。

1、state 所有的数据都存储在state中 state是一个对象
2、mutations 可以直接操作state中的数据
3、actions 只能调用mutations的方法
4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作
5、modules 将仓库分模块存储

十.vue监听和深度监听watch

watch可以让我们监控一个值的变化，从而做出相应的反应。

如果监听的是一个对象的话，需要进行深度监听。

deep：代表深度监听。

handler：以前的监控处理函数

十一.vue中Computed、Methods、Watch区别

computed 具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用
methods 是没有缓存的，只要调用，就会执行，一般结合事件来使用
watch 没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

十二.mvvm和mvc

MVC:
Model（模型）
View（视图）
Controller（控制器）
简单的理解：视图请求数据，将请求发送至控制器，控制器再将请求发送给模型，模型去查找数据，找到之后传给控制器，控制器再传给视图进行渲染。

MVVM
Model 代表数据模型
View 代表UI视图
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁，可以理解成mvc中的控制器)
简单理解：视图请求数据，将请求发送至VModel，在Vmodel的两端具有监听机制，直接调用模型的数据，一端改变全部改变，利用数据劫持，结合订阅者和发布者模式，实现数据的双向绑定

十三.vue中的修饰符

.stop 阻止事件冒泡
.capture 设置事件捕获
.self 只有当事件作用在元素本身才会触发
.prevent 阻止默认事件，比如超链接跳转
.once 事件只能触发一次

.trim 去除文本框空格

.native 触发js原生的事件

十四.vue组件封装

我们一般做项目都是采用组件化的思想开发的。在搭建项目的时候，会创建一个views目录和一个components目录，views里边放页面级的组件，components里边放公共组件。组件可以提升整个项目的开发效率，能把页面抽象成多个相对独立的模块，解决了我们传统开发效率低，难维护，复用性低等问题。

十五.vue自定义指令

有全局自定义指令，和局部自定义指令。

全局通过vue.directive注册的(第一个参数是指令的名字，第二个参数可以是对象的数据，也可以是一个指令函数)

局部通过directive注册

自定义指令的钩子函数：

bind：只调用一次，指令第一次绑定到父元素时调用。

inserted：被绑定元素插入父节点时调用

update：被绑定元素所在模板完成更新时调用，而不论绑定值是否变化

componentUpdated：被绑定元素所在模板完成一次更新周期时调用

unbind：只调用一次，指令与元素解绑时调用

十六.vue自定义指令的使用场景

图片懒加载，防抖，输入框自动失焦，下拉菜单

十七.vue之filter

有全局过滤器和局部过滤器

全局过滤器可以在多个实例中使用

Vue.filter('过滤器的名字'，（val)=>{

​	//val是需要过滤的属性

})

局部过滤器只在当前组件中使用

filters：{	
	过滤器的名字：function（val){
		val是需要过滤的属性
	}
}

使用位置：

在双括号插值

{{ 'ok' | globalFilter }}

在v-bind表达式中使用

<div v-bind:data="'ok' | globalFilter" ></div>

串联

{{变量|过滤器1|过滤器2}}

十八：vue-router

路由跳转：router-link to router.push

路由传参：params 和 query传参

query和params区别

query用path来引入，params用name来引入，

query类似与get传参显示在url上，params类似于post传参

路由嵌套：父路由是user，有两个子页面，userAdd，userList，在父路由里写个childern里边写两个子路由

十九：vue-router原理

hash 默认值，利用 URL 中的hash("#")

history 默认值，利用 URL 中的hash("#")

二十：vue脚手架本地开发跨域请求设置

在根目录创建vue.config.js

在module.exports中配置devserver的内容

devServer: {
        host:'0.0.0.0',
        port: 8080,//端口号
        open: true,//运行项目自启
        proxy:{
            '/api':{
                target:'http://localhost:3000/',//跨域请求资源地址
                ws:false,//是否启用websockets
                changeOrigin:true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite:{
                    '^/api':''//注册全局路径
                }
            }
        }
    },

二十一：keep-alive

keep-alive是vue的一个内置组件，当他包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们。在组件切换过程种把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。

使用keep-alive时有两生命周期函数

activated 在 keep-alive 组件激活时调用

deactivated 在 keep-alive 组件离开时调用

三十一：v-for中为何要使用key

因为vue组件高度复用，增加Key可以标识组件的唯一性，key的作用主要是为了高效的更新虚拟DOM，

二十二：slot、vue中的prop验证

帮助在组件内进行 占位
有具名插槽
有作用域插槽

• prop 数据单项传递，父影响子，子不影响父
• 不能在组件中直接修改 prop 传递过来的值，Vue 会给出警告
• prop 验证时，会在实例创建之前进行验证，
• 非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。

二十三：vue中$nextTick()作用

Vue 在更新 DOM
时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。

应用场景：如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

二十四：vue修改数据页面不更新

• Vue.set(要修改的对象或数组/属性或下标/修改后的值)
• Object.assign()
• $forcecUpdated()
  • 如果为对象添加少量的新属性，可以直接采用Vue.set()
  • 如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
  • 如果你需要进行强制刷新时，可采取$forceUpdate() (不建议)

vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

二十五：vue2和vue3的区别

1. vue2和vue3双向数据绑定原理发生了改变
   vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

   vue3 中使用了 es6 的 ProxyAPI 对数据代理。

   相比于vue2.x，使用proxy的优势如下

   defineProperty只能监听某个属性，不能对全对象监听
   可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
   可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2. 默认进行懒观察（lazy observation）。
   在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

3. 更精准的变更通知。
   比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

4. 3.0 新加入了 TypeScript 以及 PWA 的支持

5. 5.vue2和vue3组件发送改变

二十六：vue-router路由守卫钩子函数

全局：
beforeEach：
触发路由就会触发这些钩子函数
beforeResolve：
这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个
afterEach：
和beforeEach相反，他是在路由跳转完成后触发，参数包括to,from没有了next。他发生在beforeEach和beforeResolve之后。
独享得：
beforeEnter
组件得：
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave 导航离开该组件的对应路由时调用