Vue2面试题

hash模式：通过#号后面的内容的更改，触发hashchange事件、实现路由切换

history模式：通过pushState和replaceState切换url、触发popstate事件、实现路由切换

使用过哪些Vue的修饰符呢？使用过哪些Vue的内部指令呢？

---

列举几个常见的：.trim、.number、.prevent、.once、v-pre、v-cloak

v-text是更新元素的textContent、v-html是更新元素的innerHTML

v-model可以由哪两个指令代替？

---

:value =“message” @input =“message = $event.target.value”

v-if和v-show的区别和使用场景？

---

v-show 是控制元素的dispaly:none属性

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for和v-if的优先级？谁在外层？

---

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

所以一般把v-if写在外层

为什么data是个函数？

---

为了不让数据起冲突，data是函数，每次调用这个函数拿到的返回值互不影响

Vue2的双向数据绑定原理？

---

利用Object.defineProperty实现的、Vue在初始化数据的时候，会使用Object.defineProperty重新定义给data中所有属性加getter/setter，当页面使用对应属性时，首先进行依赖收集（收集当前组件的watcher），如果属性发生变化会通知相关依赖进行更新操作（发布订阅🧡）

Vue中数据代理？

---

• 通过vm对象来代理data对象中属性的操作（读/写）

• 好处：更加方便的操作data中的数据

• 基本原理：

通过Object.defineProperty()把data对象中所有属性加到vm上

为每一个添加到vm上的属性，指定一个getter/setter

在getter/setter内部去操作（读/写）data中对应的属性

组件之间的传值方式有哪些？

---

props、自定义事件（$emit、ref）、EventBus、发布订阅、本地存储、vuex、$parent与$children、（provide和inject暂不清楚怎么使用）

computed和watch的区别？

---

computed能做的事情，watch都能做，两个都能实现的时候优先使用computed

computed可以缓存，不能处理异步操作

watch可以处理异步操作

computed 多对一；watch 一对多

watch的属性：

​ deep: true, // 是否进行深度监听

​ immediate: true // 是否初始执行handler函数

谈一下key值的作用？说一下diff算法？

---

作为虚拟DOM的标识、让vue对比新旧节点时、更快更高效

diff算法：

1. 新旧虚拟dom如果找到相同key

*   若dom内容没变、直接使用之前真实dom

*   如果变了、生成新真实dom替换之前的

2. 如果没有相同key

*   直接生成真实dom

​ 3. 最小力度是标签、同层节点对比…

key的选择：

如果不存在对数据的逆序操作（如果还有输入类节点、渲染也会出问题）、仅用于渲染列表展示可以选择index作为key、有数据唯一标识的时候、最好还是选择唯一标识

为什么用中括号操作数组，Vue不更新页面？

---

对象不更新：是因为Object.defineProperty没有对对象的新属性进行属性劫持，使用this.$set方法解决

数组不更新：是因为监测数组不像检测对象，没有getter和setter，应该使用push等方法来操作数组、这类方法已经被Vue所管理、不完全同于原生方法。(data中数组重写原型链，使用 push方法相当于使用了Vue自己的方法来更新视图)

Vue的生命周期？

---

4对生命周期、常用的是mounted和beforeDestory

``mounted发请求，初次渲染数据等；beforeDestory`用于清除定时器、清除消息发布等

• beforeCreate和created之间、初始化数据：数据监测，数据代理

• created和beforeMount之间、解析模板、生成虚拟DOM

• beforeMount和mounted之间、将内存中虚拟DOM转为真实DOM

• beforeUpdate和updated之间、生成新的虚拟DOM与旧的比较并完成model=>view的更新

Vue事件绑定原理说一下？

---

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

Vuex说一下？

---

• State：放数据的地方、初始化数据

• Getter：技术属性、相当于computed

• Mutation：同步、唯一更改store中数据的方法

• Action：异步提交Mutation

• Moudule：store模块化

• 使用方法：

//第一种🧡

import {mapState,mapAction} from ‘store’

…

methods:{

…mapAction([xxx])

},

computed:{

…mapState([xxx])

}

//第二种

this.$store.state.数据

this.$store.commit(“mutation函数名，发送到mutation中的数据)

this.$store.dispatch(‘action中的函数名’，发送到action中的数据)

不需要响应式的数据应该怎么处理？

---

方法一：将数据定义在data之外

data () {

this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }

this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }

return {}

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
.(img-SUCUJrQo-1715659775649)]

[外链图片转存中…(img-27COonIG-1715659775649)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！