vue面试题及答案整理

最新推荐文章于 2024-07-20 10:00:00 发布

代码搬运媛

最新推荐文章于 2024-07-20 10:00:00 发布

阅读量1.7k

点赞数 2

分类专栏： VUE专栏文章标签： vue.js

本文链接：https://blog.csdn.net/sinat_33255495/article/details/105109629

版权

VUE专栏专栏收录该内容

63 篇文章 5 订阅

订阅专栏

1.vue 与 react 的异同

相同点：

都支持组件化与虚拟DOM
都支持 props 进行父子组件通信
都支持数据驱动视图，不支持操作真实DOM，更新状态视图自动更新
都支持服务器端渲染

不同点：

设计思想不同，vue 是MVVM，react 是 MVC
vue 数据双向绑定，react数据单向绑定
组件写法不同。react 推荐 jsx 写法，即把 html与css 都写进 js; vue 推荐 webpack+vue-loader 的单文件组件格式，即 html、css 与 js 都写进同一个文件
state 对象在 react 中是不可变的，需要使用 setState 方法更新状态；而 vue 中 state 不是必须的，数据由 data 在 vue 对象中管理
虚拟 DOM 不一样，vue 会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树；react 每当应用状态改变时，全部组件都会重新渲染，所以 react 需要 shouldComponentUpdate 这个生命周期方法来进行控制

2.vue 的优点

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3.vue 的生命周期钩子

beforeCreate：实例化之后，数据渲染前调用。可以加入loading事件
created：实例创建完成，但没有挂载el。结束loading事件，推荐用于发送请求数据
beforeMount：实例挂载之前。可以发送数据请求
mounted：实例挂载完成
beforeUpdate：数据更新时调用。手动移除添加的事件监听器。初次渲染时调用
updated:数据更改虚拟 DOM 重新渲染和打补丁之后
beforeDestroy：实例销毁之前
destroyed:实例销毁之后

4.常用指令

v-if、v-else-if、v-else：根据条件渲染元素
v-for：列表渲染
v-on：绑定事件监听器
v-model：在表单控件或组件上创建双向绑定
v-show：根据表达式的真假值，切换元素的display属性
v-bind：动态绑定一个或多个属性或一个组件prop到表达式
v-slot：提供具名插槽或需要接收prop的插槽
v-once：只渲染组件一次

5.vue 如何自定义指令

注册自定义指令分为全局注册与局部注册两种：

全局注册：

Vue.directive('xxx', {
      inserted: function (el) {
         //指令属性
      }
  });

局部注册：

var app = new Vue({
    el: '#app',
    directives: {
        xxx: {
            //指令属性
        },
        inserted: function(){}
    }
});

6.组件间传值的方式

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

父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit、$on方法传递参数

（2）非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。主要实现途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

7.vue 数据双向绑定的原理

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的

Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当有数据发生变化的时候会发送消息给订阅者，触发相应的监听事件。

8.组件data为什么要用函数

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

只有当 data 为函数时，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。

9.axios 是什么，有什么特性/用途

axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现

特性：

可以在浏览器中发送 XMLHttpRequest 请求
可以在 node.js 发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应
转换请求数据和响应数据能
够取消请求
自动转化 JSON 格式
客户端支持保护安全免受 XSRF 攻击

10.ajax和axios、fetch的区别？

ajax
传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

juery.ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持,举出几个缺点

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰。
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
不符合关注分离（Separation of Concerns）的原则
配置和调用方式非常混乱，而且基于事件的异步模型不友好

axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch的优点：
1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
3.语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
4.更加底层，提供的API丰富（request, response）
5.脱离了XHR，是ES规范里新的实现方式

11.说下对 Virtual DOM 算法的理解

包括几个步骤：

1、用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中；

2、当状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较，记录两棵树差异；

3、把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

12.v-show和v-if指令的共同点和不同点?

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏，
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

13.$ route和$ router的区别

$ route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

14.你是怎么认识vuex的？

vuex 是一种状态管理机制，专门为 vue.js 应用程序开发的状态管理插件。
作用是集中式管理vue 多个组件共享的状态和从后台获取数据。
属性
有五种，分别是 State、 Getter、Mutation 、Action、 Module
vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性
B、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、如果一个状态只在一个组件内使用，是可以不用getters
vuex的Mutation特性
mutation 用来更新数据
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

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

将当前组件的<style>修改为<style scoped>

16.的作用是什么

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

17.为什么使用key？

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

代码搬运媛

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue面试题及答案整理

1.vue 与 react 的异同相同点：都支持组件化与虚拟DOM都支持 props 进行父子组件通信都支持数据驱动视图，不支持操作真实DOM，更新状态视图自动更新都支持服务器端渲染不同点：设计思想不同，vue 是MVVM，react 是 MVCvue 数据双向绑定，react数据单向绑定组件写法不同。react 推荐 jsx 写法，即把 html与css 都写进 js;...
复制链接

扫一扫