vue2面试题，快看看

 

Vue优点

双向数据绑定：使数据操作简单高效；

组件化：组件的封装和复用；

虚拟DOM：比原生dom操作更节省性能。

 

MVVM的理解

Model是模型层；

View 是视图层；

ViewModel 介于View和Model之间，起桥梁作用，使视图和数据既够分离又能通信，View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

 

Vue生命周期

beforeCreated（实例创建前)、created（实例创建后）；

beforeMount（虚拟Dom挂载前)、mounted（虚拟Dom挂载后）；

beforeUpdate（数据更新前）、updated (数据更新后)；

beforeDestory（实例销毁前）、destroyed（实例销毁后）。

 

父子组件生命周期顺序

渲染过程:

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

更新过程:

父beforeUpdate->子beforeUpdate->子updated->父updated。

 

组件通信

props传值：父组件向子组件传值；

$emit传值：子组件向父组件传值；

ref传值：获取子组件数据，也可父组件向子组件传值；

provide和inject（提供、注入）：可用于非父子组件传值；

vuex：处理复杂通信，跨级通信。

 

Vuex的理解

它是vue的状态管理库；

state：存放数据；

getters：监听、获取数据；

mutations：修改State中的数据，是同步操作；

actions：用于提交mutations，可用异步操作；

modules：模块化vuex；

辅助函数：mapState、mapGetters、mapMutations、mapActions。

 

路由的模式

hash模式：利用URL的has模拟完整的url。

history模式：利用html5的history。

注意：hash模式下，当url改变时，页面不会重新加载。

history模式，服务器需配置正确路径，避免404错误。

 

路由拦截

分为全局路由拦截、组件路由拦截。

全局路由拦截：使用router.beforeEach(to,from,next)，也叫路由守卫，参数to是跳转后的路由，from是跳转前的路由，next是个函数，把不需要拦截的路由放入next()。

组件路由拦截：在需要拦截的组件内加beforeRouteEnter(to,from,next)钩子。

 

路由懒加载

使用import动态引入路由，代替静态引入。

使用webpack提供的方法（命名chunk），指定路由下的组件打包到某个异步块（chunk）中。

 

路由传参

常见三种：query传参、params传参、meta传参。

query传参：在path后加上?key=value，通过$route.query获取。

params传参：也称动态路由传参，在path后加上/:key，用$route.params获取参数。

meta传参：使用路由meta属性，获取时用$route.meta。

 

ref的作用

获取dom元素，进行操作；

获取子组件的data；

调用子组件的方法。

 

组件中key的作用

key是节点唯一标识；

方便diff算法识别节点，快速更新虚拟dom。

 

组件中name属性

主要用于组件注册、组件识别。

组件注册：name属性可让组件被全局注册，其他组件可引用该组件。

组件识别：当组件被使用时，vue会依据name属性识别组件。

 

vue中插件与组件的区别

主要在于功能范围和使用方式的不用。

功能范围：组件主要用于构建用户界面，封装可复用的UI代码，通常不涉及全局功能。插件则范围更广，用于添加全局功能，如全局方法、自定义指令等。

使用方式：组件通过引入、注册的方式使用。插件通过Vue.use()进行安装。

 

自定义指令

自定义指令是一种对原生DOM元素进行数据绑定和操作的方式。可用于处理滚动、聚焦、动画等复杂交互。

通过vue的directives属性来注册全局或组件内自定义指令。

 

常用的内置指令

v-if（依据条件判断是否渲染）、v-show（元素样式的显示/隐藏）、v-for（循环数组或对象）、v-bind（绑定元素属性）、v-model（创建数据和视图的双向绑定）、v-html（更新元素的innerHTML/解析HTML标签）、v-text（更新元素文本内容）等等。

 

怎么理解vue的单向数据流

指的是父组件通过属性将数据传递给子组件，子组件不能直接修改传递给它数据的属性，应该通过事件通知父组件进行修改。

这是为了维持数据的清晰来源，使应用的数据流易于理解和调试。

 

computed 和watch 的区别

computed是计算属性，有缓存功能。底层通过dirty来判断是否重新计算,只有依赖的数据发生变化才触发计算，性能会更好。

watch是监听属性，没有缓存，但能执行异步以及比较复杂的逻辑操作。

在使用场景的区别：

computed适用于多对一，可以受多个属性的影响（如购物车结算）。

watch适用于一对多，监听的属性可以影响多个属性（如搜索框查询）。

 

data为什么必须是函数

组件的复用性/封装性：函数可保证数据的私有性，组件被复用时不受干扰；

组件的独立性：每次都会返回全新的data对象，保证独立性。

 

v-if和v-for为什么不能一起用

主要在于优先级、性能方面、可读性三方面。

优先级：vue2.0中v-for优先级大于v-if，vue3.0中v-for优先级小于v-if。

性能方面：列表数据量大时会造成不必要的性能开销。

可读性：增加了复杂度，尤其在逻辑复杂的渲染中。

 

v-show、v-if的区别

v-show是控制元素样式的显示和隐藏；

v-if是动态添加或删除DOM元素（销毁、创建更耗性能）。

 

vue如何检测数组变化

watch：搭配immediate: true属性，或者deep: true实现检测。

数组方法：push、pop、shift、unshift、splice、sort、reverse。这些方法会直接修改原数组，vue检测到变化，触发视图更新。

$nextTick方法：在下次dom更新结束后执行延迟回调。

Vue.set方法：this.$set(this.target,key,value)通过索引修改。

 

mixins的理解

是一种分发vue组件中可复用功能的灵活方式。

包含组件中任意对象，如data、components、methods、created、computed 等。

常用来提取公共代码，被引入后数据独立，可拓展并丰富组件。

 

solt

分为默认插槽、具名插槽、作用域插槽。

默认插槽不指定名称；

具名插槽会指定名称，父组件中会依据名称指定填充位置；

默认插槽、具名插槽渲染位置在它的父组件内；

作用域插槽是带参的插槽，子组件提供给父组件参数，父组件可读取，并进行展示和填充，最终渲染在当前组件（子组件）内。

 

vue异步组件

指通过异步方式加载的组件。

优点：按需加载，提升性能和用户体验。

通过import动态导入、Promise等方式加载。

import列子：

components: {

  AsyncComponent: () => import('./AsyncComponent.vue')

}

Promise例子：

components: {

  AsyncComponent: () =>

    new Promise((resolve, reject) => {

      require(['./AsyncComponent.vue'], resolve, reject);

})

}

 

vue修饰符

事件修饰符：stop（阻止事件冒泡）、prevent（阻止事件默认）、once（只触发一次）等；

除了事件修饰符，还包括按键修饰符、鼠标按钮修饰符、系统修饰符等。

 

深度选择器

深度选择器，允许父组件样式穿透到子组件中，可直接修改子组件样式，修改第三方UI组件时尤为重要。

>>> 是css原生语法（穿透子组件style scope里的样式）；

/deep/ 是vue2语法（穿透子组件style scoped里的样式）；

::v-deep 是vue3推荐用法（穿透原理同vue2）。

 

vuex数据持久化

vuex插件：vuex-persistedstate可以持久化。

 

双向绑定原理

通过Object.defineProperty劫持属性的setter和getter，数据变动时，发布消息给订阅者，最后触发相应的回调。

为以下步骤：

递归对象：将对象所有的属性都添加setter、getter。

解析模板指令：初始化渲染，并将指令对应的节点绑定更新函数。

订阅者：给节点添加监听数据变化的订阅者。

最终订阅者作为通信桥梁，达到数据变化-视图更新，视图变化-数据更新的效果。

 

computed原理

computed是计算属性，会收集data中的所有依赖数据，作为计算依赖，当依赖发生变化，则执行计算属性内的函数，并通过watcher.dirty 控制是否读取缓存，具有缓存性质。

 

nextTick原理

在下次DOM更新结束后，执行的延迟回调；

原理：基于js的事件循环机制 和 vue的异步更新策略。

优点：将多次数据更新合并成一次，减少DOM操作次数，提高性能。

场景：需要在数据更新后，基于最新生成的dom进行操作，则将这个操作放在nextTick的回调中。

 

异步更新策略

异步更新是为确保数据变化后，可以批量更新DOM，减少重绘和重排次数，从而提高性能的一种策略。

vue在数据变化后并不会立即更新DOM，而是开启一个异步队列，把这些变化积累起来，在下次事件循环中，如果还有变化，就继续累积，然后一次性处理所有变化，更新DOM

                        

虚拟DOM原理

将当前页面的DOM树映射为一个js对象形式的虚拟DOM。

状态发生改变时，会生成新的虚拟DOM，内部使用了diff算法，新旧虚拟DOM同层比较，得到需要修改的DOM元素，再对元素进行实际的DOM操作，达到更新界面的效果。

 

keep-alive组件原理

vue的内置组件，用来缓存动态组件，避免重复渲染。

它提供了两个生命钩子，为activated、deactivated；

内部有keys数组和一个cache对象，keys数组记录组件的key值（若不指定key值，则会自动生成一个），cache对象会以key为键，存储虚拟DOM。

组件提供include、exclude、max属性。