vue 面试题

vue面试题

1，v-show 和 v-if 的区别

• 答：

• 本质区别：v-show本质就是标签的display 设置为none 控制隐藏 v-if是动态的向DOM树内添加或删除DOM元素

• 性能区别：v-show只编译一次 后面就是控制css，而v-if不停的销毁和创建 故v-show性能更好一点

2，v-for中key的作用

• 答：

• 在写v-for的时候都需要给给元素添加上一个key属性这个key属性必须是唯一标识且给key赋值的内容不能改变的，key属性的作用提高了v-for渲染的效率渲染性能避免数据混乱的情况

• 开发中选择key：最好用每条数据的 唯一标识作为key例如id，如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，只是简单的展示数据用index也是可以，

3，vue中data为什么是function

• 答：

• object是引用数据类型如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他的也随着变化了，js只有函数构成作用域（只有函数构成作用域，对象的{}和if（）{}都不构成作用域）data是一个函数时每个组件实例都有自己的作用域，每个实例相互独立不会相互影响

4，vue中的双向绑定

• 答：

• vue中的双向绑定是指当我们改变data中得一个变量时 页面中该变量也会随之更新，我们在页面中改变一个变量时，data中的变量也随之变化，通常我们使用v-model来实现双向绑定，v-model只能在input，selsect，textarea元素和component中使用

• v-model本质 语法糖负责监听用户的输入时间以更新数据并对一些场景进行一些特殊处理，实现原理：v-bind:绑定响应式数据触发oninput事件传递数据通过父传子、子传父实现双向绑定

5，keep-alive的作用和被keep-alive声明的组件的声明周期

• 答：

• keep-alive的作用（把数据缓存下来）是保持组件不销毁，用来处理要保持组件状态的那些应用场景

• keep-alive声明的组件的声明周期：不被销毁。一直存在，多两个生命周期，actived激活和deactivaed不激活状态

• 用：如需要频繁切换路由 用keep-alive来达到避免数据的重复请求的目的，首次触发请求写在created钩子函数中就能实现缓存

6，说一下vue的生命周期，以及生命周期都做了什么事情

• 答：

• vue生命周期是：vue实例从创建到销毁， 

• 四大阶段：

• 1，初始化阶段，从创建到编译执行了beforecreate/created，且created函数触发能获取data不能获取真实dom     

• 2，挂载阶段：从创建到显示beforeCreate / created / beforeMount / mounted 在mounted中可以获取真实dom     

• 3，更新阶段   当数据发生变化并更新页面后 会执行updated钩子函数，在updated钩子里还能获取更新吼的dom   

• 4，销毁阶段：在beforeDestroy/destroyed  手动消除计时器/定时器/全局事件

7，vue什么时候操作DOM比较合适？操作时发现有的组件获取不到，怎么办？

• 答：

• Vue.nextTick(callback)可以让里面的方法在DOM节点全部解析后才执行。
• 在组件内使用时可以直接使用this来代替Vue，this会自动绑定到当前的Vue实例上。
• 使用异步因为$nextTick()返回一个Promise对象可以使用async/await语法

8，发送网络请求在那个函数中？

• 答：

• 在created（或beforeRouter）里面就行，如果涉及到需要页面加载完成之后的话就用mounted

• 如果在created的时候，试图中的html没有渲染出来，所以此时如果直接去操作html的dom节点，拿找不到相关元素，而在mounted中由于html已经渲染，所以可以直接操作dom节点

9，vue组件间传值有那些方式

• 答：

• 1，父传子（父组件向子组件传递数据）

1）父传子：通过自定义属性来进行传值

2）在父组件使用子组件的时候,给父组件添加自定义属性,属性值为传递的数据 3）在子组件通过 props接受父组件的数据,props值是数组,元素是自定义属性 4）在子组件中使用的时候与data数据一样

• 2，子传父

1）在父组件定义修改方法,需要传递参数

2）在使用子组件的时候,通过自定义事件绑定修改方法

3）在子组件里面,在需要的地方通过 this.$emit(‘事件名’,参数)进行发射事件,并传递参数,

4）通过父组件中的方法,接受传递的参数,并对数据进行修改

• 3，兄弟组件之间传值

1) 组件1将数据发送给父组件

2）父组件值传递给组件2

• 4,总线传值

1）创建一个空的组件

2）在传值的组件中,用$emit()发射事件

3）在接受值的组件中,用$on()接受事件

10，vue中改变数组内索引的值，数据不更新，如何处理

• 答：

• 因为javascript的限制，vue.js不能检测到数组的变化，需使用内置方法，Vue.set（）响应式新增与修改数组调用方法Vue.set（target，key，value） target：要更改的数据源(可以是对象或者数组)，key：要更改的具体数据，value ：重新赋的值

11，讲一下vuex

• 答：

• 1.Vuex是一个专为vue.js应用程序开发的状态管理模式 它采用集中式储存管理也可以理解为vuex主要存储一些全局的变量

优势：可以全局共享数据，方法。方便统一管理

vuex 属性 

state ：可以理解为 与data属性一样，储存一些全局公用变量

getters：相似与computed计算属性，也可以在state变量的基础上进行处理并且返回新的值

actions：主要定义异步方法，调用方法：this.$store.dispatch('',params)

mutation: 一组方法，是改变store中状态的执行者，只能是同步操作mutations才是改变状态的执行者。

modules:定义子模块，每个子模块也会有state，getters，mutations，actions，modules

• 不建议通过直接赋值的操作改变state变量，推荐使用mutations来改变