阿龙学堂-VUE面试总结

前言：一句话就能回答的VUE面试题

vue中$emit事件无法触发？

emit里的事件名不要用大写字母；

渲染的时候key给什么值，可以使用index吗，用id好还是index好？

当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。

1.css只在当前组件起作用

答：在style标签中写入scoped例如：<style scoped></style>

2.v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3.$route和$router的区别

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

4.vue.js的两个核心是什么？

答：数据驱动、组件系统

5.vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

7.v-on 可以绑定多个方法吗？

答：可以

8.vue中 key 值的作用？

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

9.什么是vue的计算属性？

答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。

好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10.vue等单页面应用及其优缺点

答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。。

一：v-show和v-if有什么区别？

1：v-if通过添加或删除dom元素，v-show是通过控制css样式display来显示和隐藏；

2：v-if在有一个局部的编译/卸载的过程，切换过程中合适的销毁和重构内部事件、组件‘；v-show只是简单地css的切换；

3：v-if是惰性的；如果初始条件为假，什么也不做。只有条件第一次为真的时候才开始局部编译；v-show在任何条件下可以编译，然后被缓存，保留DOM元素；

4：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

5：v-if适合运营条件不大可能改变；v-show适合频繁切换；

二：vue中MVVM模式是怎么样的？

1：model View Viewmodel 的缩写；

model代表数据模型；

view 代表视图；

Viewmodel代表：监听数据本模型的改变和视图的变化，处理用户交互，简单的理解链接view 和model；

2：viewmodel通过双向数据绑定把view和model联系起来了；不需要手动的操作dom；维护复杂的数据只需要mvvm就可以了；

三：什么是双向数据绑定；

1：vue实现双向数据绑定主要是通过：数据劫持结合发布者-订阅者的方式；通过defidended-property()方法来劫持每个属性的setter、getter，数据变动时发布给订阅者，触发相应的回调。把一个普通的js对象传给VUE实例来作为他的data选项时候，vue实例遍历它的属性用Object.definedproperty将他们转换成setter、gettter；但是内部VUE追踪依赖，当属性访问和修改时通知变化；

vue的双向数据绑定将mvvm作为入口，整合Observer、complie，watcher，三者，通过Observerl监听model的改变，通过compile来编译模板指令，最终利用watcher 搭起observer和compile之间的桥梁；达到数据变化，视图更新；视图变化，达到改变model变化；

四：vue生命周期；

从创建到销毁的过程，称为生命周期；

作用：生命周期中有很多钩子，能够利用钩子事件控制整个vue实例过程中更容易形成好的逻辑；

第一次加载触发哪几个钩子：

beforeCreate created beforeMounted Mounted

DOM渲染在mounted中渲染完成；

1>：创建前/后

2>：挂载前/后

3>：更新前/后

4>：销毁钱/后

4.1：Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

五：VUE组件之间的传值

1：父组件向子组件传值：父组件中引入子组件，父组件定义要传的值，子组件通过定义Prop来接收传值，

2：子组件向父组件传值：在父组件中定义一个方法接收子组件传值，在子组件中定义一个触发事件，通过$emit发射给子组件。

组件之间的传值：当项目比较小的时候，使用中心

3：兄弟组件之间的传值

1>：兄弟组件之间的传值需要借助事件车；

2>：穿件一个VUE实例，让兄弟两个公用一个事件机制；

3>：数据传递方：使用Bus.$emit(方法名，传递数据)

数据接收方：通过mounted(){}触发Bus.$on(方法名，Function(接收数据的参数){})

六：Vue路由钩子函数；

首页可以控制导航跳转，beforeEach afterEach 等，一般用于修改页面跳转。

beforeEach(from ,to,next){}

to:route即将进入的目标路由；

from:route即将离开的路由；

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

七：VUEX是什么，怎么使用，哪些场景可以使用；

1：vue单页面组件的开发中的全局状态管理。简单的理解就是在store.js中定义一个数据之后，在全局任何一个组件中都可以获取，修改，并且修改之后立刻能够更新到全局。

1>:state:读取状态数据都保存在state中，是store中的唯一数据源；

// 定义 new Vuex.Store({ state: { allProducts: [] } //... }) // 组件中获取 this.$store.state.allProducts

2>:moutation：改变state中数据的唯一途径，不能处理异步数据。（重点）

mutations: { setProducts (state, products) { state.allProducts = products } } // 组件中使用 this.$store.commit('setProducts', {//..options})

3>:getters：和vue中的computed 类似，属于计算属性，基于state第二次包装，常用于多个数据的筛选和相关计算；

getters: { cartProducts(state, getters, rootState) => (getters.allProducts.filter(p => p.quantity)) } // 组件中获取 this.$store.getters.cartProducts

4>:actions：类似moutation，用于提交matation中状态的改变，但是他不能直接改变moutation中的值；可以包含异步操作；

// 定义（shop为api） actions: { getAllProducts ({ commit }, payload) { shop.getProducts((res) => { commit('setProducts', res) }) } } // 组件中使用 this.$store.dispatch('getAllProducts', {//..payload})

5>:modules：类似于命名空间，将各个组件之间的变量分开操作和定义，便于维护

// 定义 const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) // 组件中使用 store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态

八：VUE-cli如何新增自定义指令；

1.创建局部指令

2:全局指令

directive（dir2，{ innserted(el){ console.log(el); } }）

3:指令的使用

九：VU如何定义一个过滤器；

1：html代码：

<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }} </div>

2：JS代码；

var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })

3：定义全局过滤：

vue.filter('capitalize:': ,{function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。

十：对VUEkeep-live 的理解？

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

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include)

<keep-alive include='include_components' exclude='exclude_components'> <component>  </component> </keep-alive>

参数解释

include - 字符串或正则表达式，只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存

include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

<keep-alive include="a,b"> <component></component> </keep-alive>  <keep-alive :include="/a|b/"> <component></component> </keep-alive>  <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>

阿龙学堂整理发布：www.alongxuetang.com

阿龙学堂-VUE面试总结相关推荐

后端工程师面试BAT，被问到了前端？就倒下了？【VUE面试20连问】
后端工程师,面试,来来来问我前端也没问题,江湖人称全栈!!! 开始装逼模式!!! ❝ 你觉得自己最擅长的前端技术栈是什么? ❞ Vue吧,我很喜欢尤大,最近刚发布了Vue的首部纪录片,真的很好看. 0 ...
（五）Vue 面试真题演练
Vue 面试真题演练 v-show和v-if的区别为何在v-for中用key 描述vue组件生命周期(父子组件) vue组件如何通讯(常见) 描述组件渲染和更新的过程双向数据绑定v-model的实 ...
vue面试题目（更新版）
vue面试题目 vue数据 1. 说一下Vue的双向绑定数据的原理 2. 解释单向数据流和双向数据绑定 3. Vue 如何去除url中的 4. 对 MVC.MVVM的理解 5. 介绍虚拟DOM 6. ...
阿龙学堂-Spark 数据倾斜如何处理
1.处理方式数据倾斜的问题优先从数据源解决,以下方法是辅助缓解: spark-sql任务,可以尝试distribute by () 某个字段参考文档调优: https://blog.csdn.ne ...
阿龙学堂-启动spark任务的两种方式
1.简介 spark在现在的数据分析,包括离线分析,微批次处理过程中有很多的运用,但是在启动任务的过程中,大部分是将spark作为一个单独的项目进行处理,但是有时候,在一些和web等项目整合的时候,就 ...
阿龙学堂-算法-逻辑回归
logistic回归又称logistic回归分析,是一种广义的线性回归分析模型,常用于数据挖掘,疾病自动诊断,经济预测等领域.例如,探讨引发疾病的危险因素,并根据危险因素预测疾病发生的概率等.以胃癌病 ...
阿龙学堂-中缀-后缀表达式的计算
1.简介在数据结构中,有一种数据结构叫做:Stack,LIFO(Last In First Out),在这个结构中,有个后缀表达式计算,运用该数据结构进行计算. 栈是一种只允许一端操作的线性数据结构 ...
vue面试核心，双向数据绑定，数据代理，数据劫持，发布订阅，数据编译，看这个demo就够了
vue面试核心,双向数据绑定,数据代理,数据劫持,发布订阅,数据编译,看这个demo就够了. 不在怕面试官,你给我怼过去.复制到html文档,浏览器运行即可. mvvm原理剖析 {{singer}}
vue面试H5适配快速搭建
vue面试H5适配快速搭建一.环境的搭建 nodejs 环境搭建 nodejs下载检查版本 node -v npm -v 切换淘宝镜像cnpm npm install cnpm -g --regi ...

阿龙学堂-VUE面试总结

前言：一句话就能回答的VUE面试题

阿龙学堂-VUE面试总结相关推荐

最新文章

热门文章