vue常见面试题

是张鱼小丸子鸭

已于 2022-04-23 09:25:09 修改

阅读量313

点赞数

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

于 2021-11-16 21:08:44 首次发布

张鱼小丸子

本文链接：https://blog.csdn.net/qq_60976312/article/details/121364745

版权

vue.js 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

vue的特点：

组件化，数据驱动

vue的优点：

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

vue常用的指令：

v-on :value v-if v-else v-show v-bind v-model v-html v-text v-for

Vue的事件修饰符有： .stop .prevent .captrue .self .once

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

Vue的选项参数：

el data computed watch methods filter

为什么说vue是一个渐进式框架？

可以一步一步，有阶段的使用vue.js，不需要一开始就使用所有东西

v-show和v-if指令的区别？

相同点：都可以用来控制元素的显示隐藏

不同点：v-if不是把元素隐藏了，而是直接删除了元素的节点，v-show是给节点设置了一个display：none属性把节点隐藏掉了

什么是同源策略？

协议、端口、域名相同，否则会产生跨域

什么是跨域？怎么解决？

        浏览器的一种安全机制，违背浏览器的同源策略，就会产生跨域，可以使用jsonp和cors解决跨域，

        Jsonp对<script><link><img>标签没有限制，但是只能发送get请求

cookie localstorage sessionstorage的区别？

        Cookie一般由服务器生成，可以设置失效时间，如果在浏览器生成cookie，默认关闭浏览器后生成

        Localstorage除非手动删除，否则不会消失

        sessionstorage 关闭浏览器就会清除

vue如何实现响应式的？

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

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

因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

scoped的作用和实现原理

作用：组件的私有化，不会对全局造成污染，当前的style只属于当前模块实现原理：给html的dom节点添加了一个不重复属性data-a-469af101标志唯一性

为什么使用key？

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

.v-model的使用

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。

分别简述computed和watch的使用场景

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

自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

        全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

        钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

        钩子函数参数：el、binding

MVC 和 MVVM 区别？

MVC全名是 Model View Controller,时模型 - 视图 - 控制器的缩写，一种软件设计典范。

        Model(模型)：是用于处理应用程序数据逻辑部分。通常模型对象负责在数据库中存取数据。
        View(视图)：是应用程序中处理数据显示的本分。通常视图是依据模型数据创建的。
        Controller(控制器)：是应用程序处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据
        MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。
MVVM
        MVVM新增了VM类。

        ViewModel层：做了两件事达到了数据的双向绑定，一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式时：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转换成后端的数据。实现的方式是：DOM事件监听。
MVVM与MVC最大的区别就是：实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再手动操作Dom元素来改变View的显示。而是改变属性后该属性对应的View层显示会自动改变（对应Vue数据驱动的思想）
整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也察觉不到View，这种低耦合模式提高代码的可重用性。

vue的通讯方式有哪些？

子传父父传子兄弟传值 vuex

Vue事件绑定原理？

原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。如果要在组件上使用原生事件，需要加.native修饰符，这样就相当于在父组件中把子组件当做普通的HTML标签，然后加上原生事件。
$on、$emit 是基于发布订阅模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器。

虚拟DOM是什么？有什么优缺点？

        由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。
优点：
        1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，他的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
        2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好 View-Model的代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
        3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
缺点：
        1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
        2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。

Vue的生命周期方法有哪些？

        beforeCreate 在实例初始化之后，数据观测（data observe）和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。

        created 实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测（data observe ），属性和方法的运算，watch/event 事件回调。这里没有 $el，如果非要想与 DOM 进行交互，可以通过vm.$nextTick 来访问 DOM。

        beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

        mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom节点。

        beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

        updated 发生在更新完成之后，当前阶段组件 Dom 已经完成更新。要注意的是避免在此期间更新数据，因为这个可能导致无限循环的更新，该钩子在服务器渲染期间不被调用。

        beforeDestroy 实例销毁之前调用。在这一步，实力仍然完全可用。我们可以在这时进行善后收尾工作，比如清除定时器。

        destroy Vue实例销毁后调用。调用后，Vue实例指示的东西都会解绑定，所有的事件监听器会被移除，左右的子实例也会被销毁，该钩子在服务器端渲染不被调用。

        activated keep-alive 专属，组件被激活时调用

        deactivated keep-alive 专属，组件被销毁时调用

异步请求一般在哪一步发起？

created、beforeMount、mounted

vue事件绑定的原理

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定通过Vue自定义的$on实现的，如果要在组件上使用原生事件，需要加.native修饰符，这样就相当于在父组件中把子组件当成普通的HTML标签，然后加上原生事件，$on,$emit是基于发布时订阅模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器

vue中的v-cloak的理解？

使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。
一般用于解决网页闪屏的问题，在对一个的标签中使用v-cloak，然后在样式中设置[v-cloak]样式, [v-cloak] 需写在 link 引入的css中，或者写一个内联css样式，写在import引入的css中不起作用

组件的设计原则

(1)页面上每个独立的可视/可交互区域视为一个组件(比如页面的头部，尾部，可复用的区块)
(2)每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护(组件的就近维护思想体现了前端的工程化思想，为前端开发提供了很好的分治策略，在vue.js中，通过.vue文件将组件依赖的模板，js，样式写在一个文件中)
(每个开发者清楚开发维护的功能单元，它的代码必然存在在对应的组件目录中，在该目录下，可以找到功能单元所有的内部逻辑)
(3)页面不过是组件的容器，组件可以嵌套自由组合成完整的页面