vue面试题重点汇总

最新推荐文章于 2024-08-06 09:34:54 发布

南北老头

最新推荐文章于 2024-08-06 09:34:54 发布

阅读量613

点赞数

分类专栏： vue的学习文章标签： vue

本文链接：https://blog.csdn.net/NanBeiW/article/details/109691829

版权

vue的学习专栏收录该内容

8 篇文章 1 订阅

订阅专栏

vue面试题汇总

一、MVVM的理解

MVVM是Model–View–Viewmodel的简称，是一种软件架构模式。

model代表数据模型，也可以在model中定义数据修改和操作的业务逻辑。

view代表UI组件，它负责将数据模型转化为UI展现出来。

viewmodel监听模型数据的改变和控制视图行为、处理用户交互。

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，当数据发生变化，ViewModel能够将数据的这种变化，传到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

二、vue生命周期

Vue实例从创建到销毁的过程，就是生命周期。大体分三个阶段：创建阶段、更新阶段、销毁阶段。

而这三个阶段又可细分为：创建前/创建后, 挂载前/挂载后,更新前/更新后,销毁前/销毁后。

另外还有activated 表示激活时，deactivated表示停用状态，errorCaptured出现错误时出现。

第一次加载完成会触发beforeCreate,created,beforeMount,mounted。

三、v-if和 v-show的异同

v-if和v-show都可以实现元素的显示和隐藏.

而v-if的true和false会控制这个元素节点的存在与否。进行节点的创建和销毁。

v-show的true和false使用display的值如block和none变化来控制元素的显示方式。

四、vue实现双向绑定的原理

vue实现双向绑定的原理是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

<body>
    <div >
         <input type="text" name="" id="txt">
         <p id="show"></p>
    </div>
</body>
<script>
    var obj= {}
    Object.defineProperty(obj,'txt',{
        get : function(){
            return obj
        },
        set:function(newValue){
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup',function(e){
        obj.txt = e.target.value
    })
</script>

五、vue 常用指令

1.v-text 和v-html作用相近，都是更新元素的中的内容

2.v-show ,v-if,v-else-if,v-else

3.v-for 用来迭代渲染，达到循环的操作的目的，可以迭代数组，数组对象，对象或是数字。

4.v-on 是用来绑定事件的监听器，表达式可以是一个方法也可以是内联语句。

5.v-model 它可以实现在表单控件或者组件上创建双向绑定。

六、vuex的理解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。用来管理全局变量。

vuex使用一个store对象管理应用的状态，一个store包括：state,getter，mutation,action四个属性
State：vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据。

Mutation：mutations是操作state`数据的方法的集合，比如对该数据的修改、增加、删除等等。

Action：由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Getter：可以对state中的成员加工后传递给外界。

Module：当项目庞大，状态非常多时，可以采用模块化管理模式。

七、父组件与子组件之间的传值

父组件向子组件传值：父组件发送的形式是以属性的形式绑定值到子组件身上，然后子组件用属性props接收

子组件向父组件传值：子组件用 $e m i t () 触发事件$ emit() 第一个参数为自定义的事件名称第二个参数为需要传递的数据。

八、单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。初次加载时耗时多；页面复杂度提高很多。

九、vue常用的修饰符

.stop - 调用 event.stopPropagation()，防止事件冒泡。
.prevent - 调用 event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）。
.capture - 添加事件侦听器时使用 capture 模式，与事件冒泡的方向相反，事件捕获由外到内。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.once - 只触发一次回调。
.left 只当点击鼠标左键时触发。
.right只当点击鼠标右键时触发。
.middle只当点击鼠标中键时触发。

十、vue中 keep-alive 组件的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

十一、axios的作用

vue中的ajax，用于向后台发起请求
特点：
从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御XSRF
promise：
一个对象用来传递异步操作的信息
promise的出现主要是解决地狱回调的问题，无需多次嵌套
本质：分离异步数据获取和业务

十二、vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

十三、vue中 key 值的作用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

十四、Vue中引入组件的步骤?

1.采用ES6的import ... from ...语法或CommonJS的require()方法引入组件

2.对组件进行注册,代码如下

注册Vue.component('my-component',{  template: '<div>A custom component!</div>'})

3.使用组件`

南北老头

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue面试题重点汇总

vue面试题汇总一、MVVM的理解 MVVM是Model–View–Viewmodel的简称，是一种软件架构模式。 model代表数据模型，也可以在model中定义数据修改和操作的业务逻辑。 view代表UI组件，它负责将数据模型转化为UI展现出来。 viewmodel监听模型数据的改变和控制视图行为、处理用户交互。在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，当数据发生
复制链接

扫一扫