前端面试 - vue小白总结（持续扩充）

cwcnl25131

于 2024-05-17 05:05:27 发布

阅读量667

点赞数 28

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

本文链接：https://blog.csdn.net/cwcnl25131/article/details/138986850

版权

程序员专栏收录该内容

258 篇文章 0 订阅

订阅专栏

24. 请说出vue.cli项目中src目录每个文件夹和文件的用法？

25. $nextTick的使用

26. vue组件中data为什么必须是一个函数？

27. vue slot

28. axios

29. webpack

30. 如何让CSS只在当前组件中起作用?

31. 如何获取dom?

32. 单页面应用和多页面应用区别及优缺点

33. iframe的优缺点？

34. vue3.0新特性

1. vue的优点

低耦合：View独立于Model的变化和修改，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
可重用性：可以把一个视图逻辑放在一个ViewModel里，让很多View重用这段视图逻辑
独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计
可测试：可以针对ViewModel来写测试

2. vue的两个核心点

数据驱动： ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

3. vue和jQuery的区别

jQuery是使用选择器（ $ ）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

4. 组件化思想

什么是组件化：独立的，可复用的，整体化的。

为什么要组件化：1.实现功能模块的复用 2.高效执行 3.开发单页面复杂应用

如何进行拆分：1.300行原则 2.复用原则 3.业务复杂性原则

组件带的问题：1.组件状态管理（vuex）2.多组件的混合使用，多页面，复杂业务（vue-router）3.组件间的传参，消息，事件管理（props，emit/on，bus）

5. 请说下封装 vue 组件的过程？

建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。
准备好组件的数据输入。
即分析好逻辑，定好 props 里面的数据、类型。
准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
封装完毕了，直接调用即可

6. MVVM

MVVM是Model-View-ViewModel的缩写，是一种设计思想
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
View代表UI组件，它负责将数据模型转化成UI展现出来
ViewModel是一个同步View和Model的对象
View和Model之间并没有直接的联系，而是通过ViewModel进行交互
Mode和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上
ViewModel通过双向数据绑定，把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需人为干涉
因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注同步问题，复杂的数据状态维护由MVVM统一管理

7. 双向绑定

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；核心：关于VUE双向数据绑定，其核心是 Object.defineProperty() 方法。

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

8. watch和computed？

computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。

watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。

所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。

computed : 当一个属性受多个属性影响的时候就需要用到 computed ，最典型的栗子：购物车商品结算的时候

watch : 当一条数据影响多条数据的时候就需要用 watch ，栗子：搜索数据

9. 什么是计算属性

计算属性类似于方法，但我们把它看作是属性，如果需要频繁调用，建议使用计算属性

计算属性自带set和get方法，但我们一般不考虑set方法

所以，我们把每个计算属性写成一个函数，函数中使用return返回属性值

10. v-if和v-show

共同点： 都能控制元素的显示和隐藏

不同点： 实现本质方法不同，v-show本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了，即只会渲染一个dom元素。而且 v-if不停的销毁和创建比较消耗性能。

总结：对于一次选择或者数据更新不频繁时，选择v-if;如果需要频繁切换，需要v-show，用display：none控制隐藏和显示效果比较好，否则用v-if会导致dom结点频繁的销毁加载。

11. v-if和v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for循环中。所以，不推荐 v-if 和 v-for 同时使用。如果 v-if 和 v-for 一起用的话，vue中的的会自动提示 v-if应该放到外层去。

12. vue事件修饰符

v-on

stop：阻止事件冒泡
prevent：阻止表单自动提交
enter：只监听回车键
once：只触发一次事件
native：监听组件的原生事件

v-model

lazy：让data在失去焦点或按下回车时才更新
number：让表单输入的内容自动转换成数字类型
trim：去除输入的内容两边的空格

13. vue常用指令

v-if：根据表达式的值的真假来显示或隐藏元素
v-show：和v-if功能类似
v-for：循环创建元素，vue2.0以上必须配合key值使用
v-bind：动态绑定属性
v-on：监听指定元素的DOM事件
v-model：实现表单的value与vue实例的data的双向绑定
v-pre：用来显示原始的Mustache标签，跳过它的编译过程
v-once：只渲染元素和组件一次

14. 组件间通信

（1）父组件向子组件传值

在组件的vue实例中，设置props对象，对象中的每个成员，都是父组件要传递的数据

在父组件中，把data使用v-bind绑定给子组件需要的数据

（父组件访问子组件：给子组件添加ref属性；通过this.$refs.ref属性值来访问子组件，可以直接调用子组件的data和methods）

（2）子组件向父组件传值

在子组件中绑定一个事件

在事件对应的方法中，使用this.$emit()向父组件发出事件，参数为事件名

父组件使用v-on来监听子组件传递的事件，将该事件绑定给某个方法

（子组件访问父组件：通过this.$parent来访问父组件；通过this.$root来访问子组件）

（3）兄弟组件

A. 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据; 提供事件中心 var hub = new Vue()

传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)

接收数据方，通过mounted(){} 钩子中触发hub.$on()方法名

销毁事件通过hub.$off()方法名销毁之后无法进行传递数据

B. 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。

C. 但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法----$attrs/$listeners

D.方法六、$parent / $children与 ref

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

参考链接： https://juejin.im/post/5cde0b43f265da03867e78d3

15. 生命周期

通常可以分为3个阶段：挂载阶段—更新阶段—销毁阶段

beforeCreate(), created(), beforeMounte(), mounted(), beforeupdate(), updated(), beforeDestroy(), destoryed()

beforeCreate：创建前，vue实例的data和挂载元素el都还拿不到
created：创建后，能拿到data的值，但挂载元素el还拿不到（http请求在此处发出）
beforeMount：挂载前，挂载元素el初始化，但还是虚拟的DOM节点
mounted：挂载后，vue实例挂载成功（最早可以在此进行DOM操作）
beforeUpdate：更新前，data变化后触发
Updated：更新后，data变化后触发
activated：进入页面后触发
deactivated：离开页面后触发
beforeDestroy：销毁前，调用destroy方法后触发
destroyed：销毁后，调用destroy方法后触发，Vue实例销毁

16. created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

17. Vuex

（1）vuex的作用

Vuex提供一个在多个组件间共享状态的插件
把需要多个组件共享的变量全部存储在一个对象里面
把这个对象放在顶层的Vue实例中，让其它组件可以使用

（2）vuex原理

Vuex是vue的一个插件，只能用在vue上，因为它高度依赖vue的插件系统
Vuex中的store对象，本质就是没有template的隐藏着的vue组件

（3）vuex框架核心流程

Vuex规定所有的数据操作，都必须通过Vue Components -> Actions -> Mutations -> State的流程来进行
也就是：
- 首先，在组件中关联actions：this.$store.dispatch()
- 接着，在actions中，关联mutations：context.commit()
- 最后，在mutations中，修改state：state.info = ...

（4）使用场景：需要构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态时

18. vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation、Action、 Module

state =>基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步！

actions=> 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

19. vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器，将template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

20. vue-router有哪几种导航钩子？