18025323819
今天我们将对vue面试题进行详细汇总答疑，那么在vue面试中有哪些知识点呢？常见vue面试题又有哪些题目呢？今天我们将具体回答这些问题。
一般面试题都会考一些基础的问题，那么哪些属于vue面试题中的基础问题呢？下面我们将一一举出，也请广大面试者，记录好，并做好面试准备。
答：国内框架，简单易学，整个文件只有20kB左右，超快虚拟 DOM，渐进式框架。支持双向数据绑定：保留了angular的特点，在数据操作方面更为简单，由于是国人开发，国内文档社区完善，最大的亮点支持组件化，组件完美保留了React的优点，能够实现html的封装和重用，开发效率更高，使用脚手架能够支持视图、数据、结构分离：使数据的更改更为简单，直观，修改开发更为便捷。
答：直接修改Dom操作是非常耗费性能的， 通过虚拟DOM进行计算到挂载降低了直接调用DOM操作的频率，大大提高了性能，另外通过虚拟DOM能够及时的响应数据的更新变化。
答：主张最少；可以根据不同的需求选择不同的层级。
vue框架中的状态管理。在main.js中引入store，注入。新设目录store.js..export。场景包括单页应用中组件之间的状态。音乐播放，登录状态，加入购物车。
State、Getter、Mutation、Action、Module有5种。state=>基本数据(数据源保管地)getters=>基本数据产生的数据。mutations=>如何提交变更数据，同步！actions=>就像饰器一样，包裹mutations，可以异步。modules=>模块化Vuex。
答：通过props进行传递。
答：通过$emit方法进行传递
答: 共同点：都能通过命令对控制元素进行显示或隐藏；
不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，而v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了
总结：如果要频繁切换某节点，使用v-show虽然初始开销大，但是切换对性能影响小，但如果不需要频繁切换某节点使用v-if初始渲染开销较小，但切换开销比较大。
答：在组件中的style前面加上scoped
答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
答：用法是：ref="domName" 用法是：this.$refs.domName
答：v-model双向数据绑定；v-for循环；v-if v-show 显示与隐藏；v-on事件；v-once只运行一次；v-bind 绑定元素。
答：
作用：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
答：需要使用key来给每个节点做一个唯一标识。
答：computed:
当一个属性受多个属性影响的时候就需要用到computed
最典型的栗子： 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
搜索数据
答：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
回答：vue双向数据绑定是通过将数据劫持与订阅模式相结合来实现的，即数据与视图同步，数据发生变化，视图随之改变，视图随之改变，数据也随之改变；
核心:关于VUE双向数据绑定，Object.defineProperty()方法。
回答：单页应用程序(SPA)，通俗地说，就是指只有一个主页的应用程序，浏览器首先要加载所有必要的html,js,css。这个所谓的主页包含了所有的页面内容。但是写作时，仍然会分开写作(页面片段)，然后在交互时通过路由程序动态加载，单页跳转，只刷新局部资源。在pc端广泛使用。
多页(MPA)是指一个应用程序中有多个页面，当页面跳转时，整个页面被刷新。
单页的好处：
用户体验好，速度快，内容变化不需要重新加载整个页面。基于这一点，spa对服务器压力小；前后端分离；页面效果会很酷(比如切换页面内容时的特殊动画)。
单页缺点:
不利于搜索引擎优化；导航是不可用的。如果你必须导航，你需要自己前进和后退。(因为单页不能使用浏览器的前进和后退功能，所以你需要建立自己的堆栈管理)；第一次加载需要很多时间；页面复杂性大大提高。
答:当v-if与v-for一起使用时，v-for优先级高于v-if，这意味着v-if将在每个v-for循环中重复运行。因此，不建议同时使用v-if和v-for。如果v-if和v-for一起使用，vue中的自动提示v-if应该放在外层。
回答：
相同之处：assets和static储静态资源文件。项目中所需的资源文件图片、字体图标、样式文件都可以放在这两个文件下，这是一样的。
区别：assets中存储的静态资源文件在项目包装过程中，即运行npmrunbuild时，将assets中存储的静态资源文件包装上传，所谓包装简单点，可理解为压缩体积、代码格式化。而且压缩后的静态资源文件最终也会被放置在static文件中，与index.html一起上传到服务器上。放置在static中的静态资源文件不会采用包装压缩格式化等流程，而是直接进入包装目录，直接上传到服务器上。由于避免了压缩直接上传，在包装过程中会提高一定的效率，但static中的资源文件由于没有进行压缩等操作，因此文件的体积也相对于assets中包装后的文件提交较大。
推荐：将项目中template所需的样式文件js文件等全部放入assets中，然后进行包装。减少体积。而且项目中引入的第三方资源文件，如iconfoont.css，可以放入static中，因为这些引入的第三方文件已经被处理过，我们不再需要处理，直接上传。
答:。stop:相当于JavaScript中的event。stoppropagation()，防止事件起泡；.prevent:相当于JavaScript中的event.preventDefault()，防止预先设定的行为(事件可以取消时，取消事件，不停止事件的进一步传播);.capture:与事件泡沫的方向相反，事件捕捉由外向内；.self:只会触发自己范围内的事件，不含子元素；.once:只触发一次。
回答：数据驱动，组件系统。
资料驱动：ViewModel，确保资料与视图的一致性。
组件系统:应用UI可以看作都是由组件树组成的。
回答：jQuery是利用选择器($)选择DOM对象，对其进行分配、取值、事件绑定等操作，实际上与本地HTML的区别只在于可以更方便地选择和操作DOM对象，而数据和界面是一致的。例如，需要获得label标签的内容：$("lable").val()；或者依赖于DOM元素的值。Vue通过Vue对象完全分离数据和View。操作数据不再需要引用相应的DOM对象。可以说数据和View是分开的，通过Vue对象vm实现相互绑定。这就是传说中的MVVM。
回答：将组件引入template；在script的第一行cript第一行路径；在component上写下组件名。
delete只是删除的要素变成了empty/undefined的其他要素的键值。Vue.delete直接删除了数组，改变了数组的键值。
答:安装动态懒惰加载所需插件；使用CDN资源。
回答：用location.href='/url'跳转，简单方便，但页面更新；使用history.pushState('/url')，不刷新页面，静态跳转；引入router，然后使用router.push('/url')进行跳跃，使用diff算法，实现按需加载，减少dom消耗。事实上，使用router跳转与使用history.pushState()没有什么区别，因为vue-router使用history.pushState()，特别是在history模式下。
回答：简单地说，假设父组件需要在子组件中放置一些DOM，那么这些DOM就是显示，不显示，在哪里显示，如何显示，这就是slot分发的责任。
答:各Vue实例在创建时经过一系列初始化过程。例如，需要设置数据监听、编译模板、将实例载入DOM，在数据变化时更新DOM等。同时，在这个过程中也运行了被称为生命周期钩的函数，给用户在不同阶段追加自己代码的机会。(ps:生命周期钩是生命周期函数)例如，如果您想通过一些插件操作DOM节点，并在页面渲染后弹出广告窗口，您可以首先在mounted中进行。
beforeCreate、created、beforeMount、mounted。
beforeCreate:newvue实例后，只有默认的生命周期钩和默认的事件，其他的还没有制作。当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、命令、过滤器……都处于不可用的状态。组件已经被销毁。
created:在模板显示为html之前调用，通常将某些属性值初始化，然后显示为视图。
mounted:模板渲染html后调用，通常在初始页面完成后，对html的dom节点进行必要的操作。
一般created/beforeMount/mounted都可以；例如，如果你想操作DOM，你必须在mounted时操作它。
共分为8个阶段制作前/后，加载前/后，更新前/后，销毁前/后。
创建前/后:在beforeCreated阶段，vue实例的装载要素$el和**数据对象**data为undefined，尚未初始化。在created阶段，vue实例的数据对象data有，$el还没有。
载入前/后:在beforeMount阶段，vue实例$el和data初始化，但载入前是虚拟的dom节点，data.message尚未更换。在mounted阶段，vue实例完成，data.message成功渲染。
更新前/后:data变化时，触发beforeUpdate和updated方法。
销毁前/后:实施destroy方法后，data的变化不会触发周期函数，此时vue实例解除了事件监听和dom的联系，但dom结构依然存在。
vue是实现双向数据绑定的mvvm框架，视图更新模型层，模型层更新视图层。在vue中，使用双向绑定技术，View的变化可以实时改变Model，Model的变化也可以实时更新到View。
vue用于写路由插件。router-link，router-view。
vue-router模块的router-link组件。children数组定义子路由。
在router目录下的index.js文件中，添加path属性/:id。使用router对象的params.id。
有三种：
第一：全站导航钩:router.beforeeach(to、from、next)，在跳跃前进行判断拦截。
第二：组件内的钩子。
第三：独立路由独占组件。
$router是Vuerouter的例子，想在script标签上导航不同的URL，使用$router.push方法。回到上一个历史history用$router.to(-1)
$route是当前router的跳跃对象。其中可以当前路由的name、path、query、parmas等。
hash模型:地址栏URL中的#符号
history模式:打印window.history对象，可以看到其中提供的方法和记录长度。利用HTML5HistoryInterface中新增的pushState()和replaceState()的方法。(需要特定的浏览器支持)。
答：三种方式。
第一，vue异步部件技术=====异步加载，vue-router配置路由，使用vue异步部件技术，可以按需加载。但是，在这种情况下，下一个部件生成js文件。
第二，路由懒惰加载(使用import)。
第三，网络提供的require.ensure()、vue-router配置路由、使用网络pack的require.ensure技术也可以按需加载。在这种情况下，多个路由指定相同的chunkName，合并包装成js文件。
以上就是vue面试题。
当前位置 ： 
