vue面试题

vue面试题（待更新）

什么是MVVM

MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。

数据双向绑定原理–Object.defineProperty()

视图模型(ViewModel)有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

v-if和v-show的区别

1. v-if是直接新增删除DOM节点，v-show是切换标签的display样式;
2. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有
3. v-if 可以搭配 template 使用，而 v-show 不行
4. v-show只编译一次，而v-if不停的销毁和创建

v-if和v-for为什么不建议一起使用

1. v-if 指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 true值的时候被渲染
   v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名
2. 两者作用在同一个元素时,优先级是不同的。 在vue2中,v-for的优先级更高 。在vue3中,v-if的优先级更高。
3. 把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

v-for的key值为什么不建议使用索引

当 Vue 正在更新使用v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。如果没有唯一的key值，就是递归逐一按照顺序进行比较先后的节点,key 一定要是唯一标识。

生命周期

beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

vue组建通信方式有哪些

1. 通过 props 传递
2. 通过 $emit 触发自定义事件
3. 使用 ref
4. EventBus
5. $parent或$root
6. attrs 与 listeners
7. Provide 与 Inject
8. Vuex

keep-alive

1. keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
2. keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
3. keep-alive可以设置以下props属性：
   include - 字符串或正则表达式。只有名称匹配的组件会被缓存
   exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
   max - 数字。最多可以缓存多少组件实例
4. 在某些场景下不需要让页面重新加载时我们可以使用keep-alive