关于vue.js:vue面试总结

vue面试总结

那首先谈谈你对Vue的了解吧？vue.js是什么？

Vue (读音 /vju/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或既有我的项目整合。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能为简单的单页利用提供驱动。
vue是一个渐进式框架，相当于view层, 双向数据绑定, 他更轻量, 性能上更高效, 比其余框架更容易上手, 学习成本低, vue须要一个el对象进行实例化,

Vue与Angular以及React的区别？

angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 然而angular中的双向数据绑定是基于脏查看机制, vue的双向数据绑定是基于ES5的getter和setter来实现, 而angular是有本人实现一套模板编译规定,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue须要一个el对象进行实例化, 而angular是整个html页面下的,单页面利用, 而vue能够有个vue实例
1.与AngularJS的区别
相同点：
都反对指令：内置指令和自定义指令；都反对过滤器：内置过滤器和自定义过滤器；都反对双向数据绑定；都不反对低端浏览器。
不同点：
AngularJS的学习老本高，比方减少了Dependency Injection个性，而Vue.js自身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏查看，所以Watcher越多越慢；Vue.js应用基于依赖追踪的察看并且应用异步队列更新，所有的数据都是独立触发的。
2.与React的区别
相同点：
React采纳非凡的JSX语法，Vue.js在组件开发中也推崇编写.vue非凡文件格式，对文件内容都有一些约定，两者都须要编译后应用；中心思想雷同：一切都是组件，组件实例之间能够嵌套；都提供正当的钩子函数，能够让开发者定制化地去解决需要；都不内置列数AJAX，Route等性能到外围包，而是以插件的形式加载；在组件开发中都反对mixins的个性。
不同点：
React采纳的Virtual DOM会对渲染进去的后果做脏查看；Vue.js在模板中提供了指令，过滤器等，能够十分不便，快捷地操作Virtual DOM。

vue 的生命周期？

实例从创立到销毁的过程，就是生命周期。也就是从开始创立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。
利用场景
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其余的货色都还没创立。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段应用data中的数据和methods中的办法
create：data 和 methods都曾经被初始化好了，如果要调用 methods 中的办法，或者操作 data 中的数据，最早能够在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中曾经编译好了模板了，然而还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就示意Vue实例曾经初始化实现了。此时组件脱离了创立阶段，进入到了运行阶段。 如果咱们想要通过插件操作页面上的DOM节点，最早能够在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据放弃同步
updated：页面显示的数据和data中的数据曾经放弃同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件曾经被销毁了。

vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让咱们在管制整个Vue实例的过程时更容易造成好的逻辑。

vue生命周期总共有几个阶段？

它能够总共分为8个阶段：创立前/后, 载入前/后,更新前/后,销毁前/销毁后

第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

vue获取数据在哪个周期函数？

个别 created/beforeMount/mounted 皆可.
比方如果你要操作 DOM , 那必定 mounted 时候能力操作.

mvvm 框架是什么？

vue是实现了双向数据绑定的mvvm框架，当视图扭转更新模型层，当模型层扭转更新视图层。在vue中，应用了双向绑定技术，就是View的变动能实时让Model发生变化，而Model的变动也能实时更新到View。

Vue中双向数据绑定是如何实现的？

vue 双向数据绑定是通过 数据劫持 联合 公布订阅模式的形式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变动，视图变动，数据也随之产生扭转；
外围：对于VUE双向数据绑定，其外围是 Object.defineProperty()办法。

vue是如何实现响应式数据的呢？（响应式数据原理）❗

参考：https://blog.csdn.net/kzj0916...
原理：
置信用过vue的都晓得，vue中data中定义的数据会随着咱们通过办法扭转该数据的同时，页面上相干此数据的也会相应的刷新，实现响应式数据。可你晓得它是如何实现这一性能的吗？上面让咱们来理解理解它是如何做到这神奇操作的。

Object.defineProperty 监听批改读取数据：
Object.defineProperty(obj, prop, descriptor) 可传入三个值，其作用是该办法会间接在一个对象上定义一个新属性，或者批改一个对象的现有属性，并返回此对象。
第一个值传入要批改的对象
第二个值传入该对象中要批改的key
第三个值是一个对象，外面有set 和get两种办法 set为值产生批改是所做的操作 get为读取改值时的操作
默认配置如下

当初咱们来钻研下vue是如何利用Object.defineProperty 监听批改读取数据的
咱们创立一个对象，并利用Object.keys（）将对象中的key返回到一个数组中，并对该数组forEach遍历
将key对应值先取过去，对这个对象中每个不同的key通过Object.defineProperty批改并监听数据的变动，在批改该key对应的value值时，调用set办法 打印下监听xxxx数据扭转 并将批改值赋给value
在读取该key对应的value值时，调用get办法 打印下获取xxxx对应的值 并间接返回以后value值

vue中是如何检测数组变动的呢？

vue.set()

vue组件中的data为什么是函数？

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

别离简述computed和watch的应用场景?

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

created和mounted的区别?

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

vue-router的两种模式？

hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印进去能够看到里边提供的办法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 办法。（须要特定浏览器反对）。

params和query的区别?

用法：query要用path来引入，params要用name来引入，接管参数都是相似的，别离是this.$route.query.name和this.$route.params.name。
url地址显示：query更加相似于咱们ajax中get传参，params则相似于post，说的再简略一点，前者在浏览器地址栏中显示参数，后者则不显示
留神点：query刷新不会失落query外面的数据、params刷新会失落params外面的数据。

//query语法：this.$router.push({path:"地址",query:{id:"123"}}); //这是传递参数this.$route.query.id； //这是承受参数//params语法：this.$router.push({name:"地址",params:{id:"123"}}); //这是传递参数this.$route.params.id; //这是承受参数

组件之间传值？

父传子：props
子传父：$emit办法

$nextTick的应用?

当你批改了data的值而后马上获取这个dom元素的值，是不能获取到更新后的值，
你须要应用$nextTick这个回调，让批改后的data值渲染更新到dom元素之后在获取，能力胜利。

// 批改数据vm.msg = 'Hello'// DOM 还未更新Vue.nextTick(function () {  // DOM 更新})

<keep-alive></keep-alive>的作用是什么?

keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染。

为什么应用key?

须要应用key来给每个节点做一个惟一标识，Diff算法就能够正确的辨认此节点。
作用次要是为了高效的更新虚构DOM。

v-show和v-if指令的共同点和不同点？

共同点：都能管制元素的显示和暗藏；
不同点：实现实质办法不同，v-show实质就是通过管制css中的display设置为none，管制暗藏，只会编译一次；v-if是动静的向DOM树内增加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创立比拟耗费性能。
总结：如果要频繁切换某节点，应用v-show(切换开销比拟小，初始开销较大)。如果不须要频繁切换某节点应用v-if（初始渲染开销较小，切换开销比拟大）。

如何让CSS只在以后组件中起作用？

在组件中的style后面加上scoped

如何获取dom?

ref="domName" 用法：this.$refs.domName

说出几种vue当中的指令和它的用法？

v-model双向数据绑定；
v-for循环；
v-if v-show 显示与暗藏；
v-on事件；v-once: 只绑定一次。

v-modal的应用？

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

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

assets文件夹是放动态资源；components是放组件；router是定义路由相干的配置; app.vue是一个利用主组件；main.js是入口文件。

assets和static的区别？

相同点：assets和static两个都是寄存动态资源文件。我的项目中所须要的资源文件图片，字体图标，款式文件等都能够放在这两个文件下，这是相同点
不同点：assets中寄存的动态资源文件在我的项目打包时，也就是运行npm run build时会将assets中搁置的动态资源文件进行打包上传，所谓打包简略点能够了解为压缩体积，代码格式化。而压缩后的动态资源文件最终也都会搁置在static文件中跟着index.html一起上传至服务器。static中搁置的动态资源文件就不会要走打包压缩格式化等流程，而是间接进入打包好的目录，间接上传至服务器。因为防止了压缩间接进行上传，在打包时会进步肯定的效率，然而static中的资源文件因为没有进行压缩等操作，所以文件的体积也就绝对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
倡议：将我的项目中template须要的款式文件js文件等都能够搁置在assets中，走打包这一流程。缩小体积。而我的项目中引入的第三方的资源文件如iconfoont.css等文件能够搁置在static中，因为这些引入的第三方文件曾经通过解决，咱们不再须要解决，间接上传。

v-on能够监听多个办法吗？

能够，例子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

vue的两个外围点

答：数据驱动、组件零碎
数据驱动：ViewModel，保证数据和视图的一致性。
组件零碎：利用类UI能够看作全副是由组件树形成的。

vue和jQuery的区别

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

delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其余的元素的键值还是不变。Vue.delete 间接删除了数组 扭转了数组的键值。

axios的特点有哪些

从浏览器中创立XMLHttpRequests；
node.js创立http申请；
反对Promise API；
拦挡申请和响应；
转换申请数据和响应数据；
勾销申请；
主动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟申请地址一起发送的，data的作为一个申请体进行发送
params个别实用于get申请，data个别实用于post put 申请。

vue初始化页面闪动问题

应用vue开发时，在vue初始化之前，因为div是不归vue管的，所以咱们写的代码在还没有解析的状况下会容易呈现花屏景象，看到相似于{{message}}的字样，尽管个别状况下这个工夫很短暂，然而咱们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

vue更新数组时触发视图更新的办法

push()；pop()；shift()；unshift()；splice()； sort()；reverse()

vue罕用的修饰符?

.stop：等同于JavaScript中的event.stopPropagation()，避免事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，避免执行预设的行为（如果事件可勾销，则勾销该事件，而不进行事件的进一步流传）；
.capture：与事件冒泡的方向相同，事件捕捉由外到内；
.self：只会触发本人范畴内的事件，不蕴含子元素；
.once：只会触发一次。

vuex相干问题

参考：https://blog.csdn.net/u012967...

vuex是什么？怎么应用？哪种性能场景应用它？

vue框架中状态治理。在main.js引入store，注入。
新建了一个目录store.js，….. export 。
场景有：单页利用中，组件之间的状态。音乐播放、登录状态、退出购物车

对于VueX

VueX是实用于在Vue我的项目开发时应用的状态管理工具。试想一下，如果在一个我的项目开发中频繁的应用组件传参的形式来同步data中的值，一旦我的项目变得很宏大，治理和保护这些值将是相当辣手的工作。为此，Vue为这些被多个组件频繁应用的值提供了一个对立治理的工具——VueX。在具备VueX的Vue我的项目中，咱们只须要把这些值定义在VueX中，即可在整个Vue我的项目的组件中应用。

应用Vuex的目标

实现多组件状态治理。多个组件之间须要数据共享时，Vuex是个很好的帮手哦

Vuex 的五大外围

其中state和mutation是必须的，其余可依据需要来加
1、state：负责状态治理，相似于vue中的data，用于初始化数据 //状态治理
2、mutation：专用于批改state中的数据，通过commit触发 //批改state
3、action：能够解决异步，通过dispatch触发，不能间接批改state，首先在组件中通过dispatch触发action，而后在action函数外部commit触发mutation，通过mutation批改state状态值 //异步操作
4、getter：Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦扭转，getter会从新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要应用getter
5、module：模块化治理 //模块

// 导入vue及vueximport Vue from 'vue'import Vuex from 'vuex'// 挂载vuexVue.use(Vuex)// 创立vuex对象并向外裸露export default new Vuex.Store({  // 全局属性变量  state: {  },  // 全局同步办法, 调用办法,this.$store.commit("xxx")  mutations: {  },  // 异步办法 调用办法,this.$store.dispatch("xxx")   actions: {  },  // Vuex属性计算,在视图外面当变量应用  getters: {  },  // 模块化注册  modules: {  }})

action与mutation的区别？

const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  },  actions: {    increment (context) {      context.commit('increment')    }  }})

1、流程程序

“相应视图—>批改State”拆分成两局部，视图触发Action，Action再触发Mutation。

2、角色定位

基于流程程序，二者表演不同的角色。

Mutation：专一于批改State，实践上是批改State的惟一路径。

Action：业务代码、异步申请。

3、限度

角色不同，二者有不同的限度。

Mutation：必须同步执行。

Action：能够异步，但不能间接操作State。