vue面试题
1. vue和react的相同点
-
都支持服务器渲染;
-
都有虚拟DOM、组件化开发,都通过props完成父子组件间的数据传递,都实现组件化规范;
-
数据驱动视图
-
都有支持的native方案,react的react native,vue的weex;【Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用的组件。React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发】
-
都有仓库(管理状态):react有redux、vue有vuex
2. vue和react的区别:
-
react只针对MVC框架的view层,而vue是一个完整的MVVM模式
-
虚拟DOM不一样
-
vue会通过跟踪依赖实现只对状态更新部分进行重新渲染
-
而react会在状态有改变时,重新渲染每个组件,所以在react中会有shouldComponentUpdate生命周期函数
vue-loader
提供了一些非常酷炫的特性:在每个 Vue 组件内支持其他的 Webpack 加载器,如用于
<style>
的 SASS 和用于<template>
的 Jade。把
<style>
和<template>
内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。对每个组件模拟有作用域的CSS。
开发阶段支持组件的热加载。
-
-
数据绑定
-
vue实现了数据的双向绑定
-
而react的数据流向是单向的
-
-
组件写法不一样
-
vue的写法是
vue-loader
的单文件组件格式 -
而react的写法是
JSX+行内样式
-
-
state对象在react中只能通过setState改变状态;在vue中,state对象不是必需的,数据由data属性在vue对象中管理。
3. vue的原理:
-
vue是一个构建数据驱动的web界面的渐进式框架,采用MVVM模式实现视图层与数据层的数据修改、更新监听。
-
其工作原理是vue在实例化的过程中会遍历data下的数据,通过
Object.defineProperty()
方法将它们设置为存储器属性(即具有getter、setter属性)。
4. vue的特点:
-
简洁:页面由HTML模板 + JSON数据 + Vue实例组成;
-
数据驱动:自动计算属性和追踪依赖的模板表达式;
-
组件化:用可复用、解耦的组件来构造页面;
-
轻量:代码量小,不依赖其他库;
-
快速:精确有效批量DOM跟新。
5.scss是什么
- scss是一款css预处理语言,可编写函数,定义变量,可嵌套。
6.为什么vue中的data必须是一个函数
-
对象是引用类型,在重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改。
-
使用返回对象的函数,由于每次返回的是一个新的对象,引用地址不同,就不会出现这个问题。
7.active-class
是哪个组件的属性
vue-router
模块的router-link
组件。
8.vue-router
有哪几种导航钩子
-
全局导航钩子,可以用在路由跳转前做判断拦截
-
组件内钩子
-
路由独享钩子
9.vue-cli项目中src目录中每个文件夹和文件的用法
-
assets:放静态资源
-
component:放组件
-
router:定义路由相关的配置
-
app.vue:是一个应用主组件
-
main.js:是入口文件
10.vue组件通讯
1. 父传子
- 父:自定义属性名+ 数据
- 子:
props["父组件上的自定义属性名"]
2. 子传父
-
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听
-
子:
this.$emit("自定义事件名",数据)
+ 子组件标签上绑定@自定义事件名="回调函数"
-
父:
methods:{自定义事件(){}}
3. 事件总线 let bus = new Vue()
- 触发方:
methos: { 函数 { bus.$emit("自定义事件名",数据) } }
- 接收方:
created(){ bus.$on("A发送过来的自定义事件名") }
11. vue路由传参
-
使用
query
方式传入的参数使用this.$route.query
接收:query
传参可通过path
和name
方式跳转,页面刷新参数任然存在
-
使用
params
方法传入的参数使用this.$route.params
接收:params
传参只能通过name
方式跳转,页面刷新时params
参数会丢失,除非作为动态路由
12. 计算属性和watch的区别
-
computed
属性是用来声明式地描述一个值依赖了其他值。-
当它依赖的实例属性发生改变时,会触发该属性重新计算(只有当视图使用了该计算属性)。
-
这个功能非常强大,可以让你的代码更加声明式、数据驱动并且易于维护。
-
-
配置参数
watch
用来监听实例下的属性,当监听的值发生改变时会自动调用对应的方法。 -
而计算属性计算的是绑定在它上面的属性所依赖的属性,它不能计算在data中已定义过的变量。
13. vuex是什么?有哪几种属性?
-
vuex
是一个专门为vue.js
程序开发的状态管理模式。 -
有五种属性:
state
、getter
、mutation
、action
、module
14. vuex的state是什么?
- vuex就是一个store,store里面放了很多对象。其中state就是数据源存放地,对应于vue中的data。state里存放的数据是响应式的,vue从store中读取数据,当store中的数据发生改变时,依赖这些数据的组件也会发生改变。它通过
mapState
把全局的state和getter映射到当前组件的computed属性。
15. vuex的getter是什么?
- getter用来对state进行计算操作,它就是store的计算属性。getter的返回值会根据它的依赖被缓存起来,且只有当它依赖的值发生了改变才会被重新计算,getter可以用于监听state中的值的变化,返回计算后的结果。虽然在组件内也可以做计算属性,但是getter可以在多组件复用。它对应于vue对象中的computed。
16. vuex的mutation是什么?
- 更改vuex中store中的state的唯一方法是通过
this.$store.commit
提交mutation
。
17. vuex的action是什么?
- action类似于mutation,不同的是action的是通过
this.$store.dispatch
提交mutation
,而不是直接变更状态。 - action可以包含任何异步操作。
18. v-show和v-if的相同点和不同点:
-
v-show
指令是通过修改元素的display属性让其显示或隐藏。 -
v-if是直接销毁和重建DOM达到让元素显示和隐藏的效果。
19. 如何让css只在当前组件中起作用
- 将当前组件的
<style>
设置为<style scoped>
20. <keep-alive />
的作用是什么?
<keep-alive />
包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或者避免重新渲染。
21. v-on常用修饰符
-
.native
主要是给自定义组件添加原生事件 -
.stop
主要用于阻止事件冒泡 【e.stopPropagation()】 -
.prevent
主要用于阻止当前事件的默认行为 -
.self
主要用于设置当事件是从事件绑定的元素本身触发时才会触发回调 -
.once
表示绑定的事件是一次性的,仅被触发一次
22. v-for、key的作用:
-
当vue用v-for更新已经渲染过的元素列表时,默认采用“复用”原则。如果数据项的顺序被改变,vue不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
-
为了给vue一个提示,以便他能够跟踪每个节点,从而重新排序现有的元素,需要为每项提供一个唯一的key属性。key属性的类型只能是string或者number类型。
-
使用key,vue会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。
23. Promise对象是什么?
-
Promise是异步编程的一种解决方案,它是一个容器,保存着未来某个时间点才会结束的事件的结果。
-
Promise是一个对象,从它可以获取异步操作的消息。
-
Promise提供统一的API,各种异步操作都可以用同样的方式进行处理。
-
Promise对象是一个构造函数,用来生成Promise实例。
特点:
-
对象的状态不受外界影响。promise对象代表一个异步操作,有三种状态:pending(进行中)、fukfikked(已成功)和rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
-
一旦状态改变,就不会再变,任何时候都是可以得到这个结果。
缺点:
-
无法取消promise,一旦建立他就会立即执行,无法中途取消。
-
如果不设置回调函数,promise内部跑出的错误无法反映到外部。当pending的时候,无法知道进展到了哪一步。
24. axios的特点是什么?
-
axios是一个基于promise的http库,支持promise的所有API;
-
它可以拦截请求和响应;
-
它可以转换请求数据和响应数据,并对响应回来的数据转换为json类型的数据;
-
它安全性更高,客户端支持防御CSRF(跨域请求伪造)
25. vue的路由模式以及实现方式?
hash模式
-
在浏览器中"#"及其后面的字符称为Hash,用window.location.hash读取;
-
hash虽然在URL中,但不被包括在http请求中;只用来指导浏览器动作,对服务器安全无用,hash不会重加载页面。
history模式
-
history采用h5新特性,且提供了两个新方式:pushState(),replaceState()可以对浏览器历史记录栈进行修改;
-
popState事件监听状态变更。
26. vue中的ref是什么?
- ref用来给元素或者子组件注册引用信息。引用信息将会注册在父组件的$refs上。【如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例】
27. $route和 $router的区别?
-
$route是“路由信息对象”,包括path、params、query、hash、fullpath、name等路由信息参数。
-
$router是“路由实例对象”,包括路由的跳转方式、钩子函数等。
28. vue.js的两个核心是什么?
- 数据驱动、组件系统
29. vue如何兼容ie问题?
- babel-polyfill插件
30. 页面刷新vuex被清空的解决方法?
- sessionStorage存储到本地,定义beforeUnload事件,使得点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面
31. vue改变组件触发视图更新(如何设置响应式属性)?
-
初始化时写入data属性
-
调用方法:
Vue.set(target, key, value)
-
以下方法的调用会更改原始数组:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
32. DOM渲染在哪个周期中就完成了?
- mounted阶段。mounted不会承诺所有子组件都一起被挂载,使用vm.$nextTick可以实现整个视图已经渲染完毕。
33. 简述每个生命周期具体适合哪些操作?
-
beforecreated
:可以在这加个loading事件,在加载实例时触发; -
created
:初始化完成时的事件写在这里,如结束loading、异步请求调用; -
mounted
:挂在节点,获取DOM节点; -
updated
:对数据统一处理; -
beforeDestory
:可做确认停止事件。
34. 第一次加载会触发哪几个钩子?
beforeCreate
、created
、beforeMount
、mounted