VUE + VUEX 高频面试题合集

疾风小蜗牛

已于 2022-12-21 16:00:47 修改

阅读量2.4k

点赞数 1

分类专栏：前端面试文章标签： vue.js 前端 javascript

于 2022-11-23 23:45:23 首次发布

本文链接：https://blog.csdn.net/Wr2138/article/details/128009412

版权

这篇博客汇总了Vue.js和Vuex的面试重点，包括Vue常见指令、双向数据绑定原理、路由跳转和传参方式、组件间通信、路由守卫、Vuex的理解、混入、插槽、跨域解决方案、封装请求经验、watch与computed的异同点等，全面覆盖Vue开发中的关键知识点。

摘要由CSDN通过智能技术生成

3、mutation 修改state的状态

11. watch和computed的共同点和不同点

共同点

不同点

1. Vue常见的指令有哪些，有什么用

指令	作用	备注
v-cloak	防止页面闪烁	在vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现：界面防止闪烁
v-text	会替换掉元素里的内容	区别： v-html会解析HTML代码和样式（富文本） v-text直接展示原始内容
v-html	可以渲染html界面	区别： v-html会解析HTML代码和样式（富文本） v-text直接展示原始内容
v-bind	属性绑定	1. 界面元素属性值的绑定 2. 括号里不加引号的都是我们data里的数据读取 3. 如果想使用字符串需要加上引号 4. 里面可以写表达式 5. 里面也可以调用定义好的方法，拿到的是方法的返回值 6. 简写：
v-on	事件绑定	简写@
v-model	数据双向绑定	1. 作用：数据双向绑定 2. 注意：绑定的是表单控件 3. 双向数据绑定: 数据变化后更新视图；视图变化后更新数据。Model层里的数据和View层上的数据只要有一方变化，另一方随之改变。 4. 原理: 后面有详细说明
v-for :key	遍历	1. 遍历数组，参数(item,index) in list 2. 遍历对象，参数(value,key,index) in list 3. 遍历数字，num in 10 (1~10) 4. key在使用v-for的时候都需要去设置key 4-1. 让界面元素和数组里的每个记录进行绑定 4-2. key只能是字符串或者数字 4-3. key必须是唯一的 4-4. “就地复用” 策略 4-5. key值的作用---提高重拍效率 4-6. key值的计算方法---diff算法
v-if v-else	通过元素的删除和添加控制元素的显示和隐藏	1. 区别 1-1. v-if删除dom元素 1-2. v-show设置display:none 2. 应用场景 2-1. v-if只修改一次的时候可以使用v-if 2-2. v-show频繁切换的时候可以使用v-show
v-show	通过display属性，控制元素的显示和隐藏

2. 双向数据绑定的原理

vue2双向数据绑定原理

双向数据绑定v-model的原理：采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

Object.defineProperty()方法有三个参数：
            obj：属性的对象。
            prop：要定义或修改的属性。
            descriptor：一个对象，包括get和set方法

缺点：

根据官方文档，双向数据绑定失效总共有三种情况：