vue面试题

一、v-show和v-if的区别

答案一：
v-if：真正的条件渲染，真正的销毁和重建
v-if：是惰性的，初始条件为假，什么都不做，当第一次为真的时候，才开始渲染；
v-show：不管初始条件是什么，元素一直被渲染，基于css进行切换，display
v-if有更高的切换开销
v-show：有更高的初始渲染开销（频繁切换的话，建议使用v-show）
注意：不推荐v-if和v-for一起使用（v-for的优先级会高一点）

答案二：
1、功能区别
（1）v-show：严格意义上说是“隐藏条件”。把HTML元素先渲染起来，符合条件就显示，不符合条件display=none，不显示，元素还在那。
（2）v-if：是真正意义上的“条件渲染”。浏览器先判断符不符合条件，符合了在渲染，否则不渲染DOM，浏览器找不到这个DOM。
2、vue生命周期
（1）v-if由于是重新渲染，所以每次切换一次会重新走一次生命周期；
（2）v-show由于只是控制显示隐藏，所以除了初始化渲染，其他时候都不会再走相关生命周期了
3、性能区别
（1）v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。
（2）v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能
（3）需要多种条件场景，比如id=1，=2，=3…时候，因为只有v-if，可以和v-else等连用，这种比较适合用v-if
（4）v-show不支持<template>语法
（5）v-if切换时候回实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程

二、动态绑定class

1、对象形式
第一个参数 类名；第二个参数 boolean值
:class="{'footer':isIphoneX}"
优点：以对象的形式可以写多个，用逗号分开<div :class="{'p1' : false, 'p': true}"></div>
2、三元表达式
方在数组中，类名要用引号
:class="[isIphoneX ? 'bottom' : 'footer']"
3、动态数组里的变量
:class="[isTrue, isFalse]"

三、计算属性和watch的区别

解释一：
计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时，他们才会重新求值
方法是需要多次执行的

解释二：
1、计算属性：computed

（1）computed内部的函数在调用时不加()。
（2）computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。
（3）computed中的函数必须用return返回。
（4）在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。
（5）当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

（1）支持缓存，只有依赖数据发生改变，才会重新进行计算
（2）不支持异步，当computed内有异步操作时无效，无法监听数据的变化
（3）computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
（4）如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
（5）如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

使用场景：当一个值受多个属性影响的时候------------购物车商品结算

2、watch监听
（1）watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。
（2）watch中的函数有两个参数，前者是newVal，后者是oldVal。
（3）watch中的函数是不需要调用的。
（4）watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。“obj.name”(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
（5）特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.$set(this.arr,0,100)-----修改arr第0项值为100。
（6）immediate:true 页面首次加载的时候做一次监听。

（1）不支持缓存，数据变，直接会触发相应的操作；
（2）watch支持异步；
（3）监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
（4）当一个属性发生变化时，需要执行对应的操作；一对多；
（5）监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

使用场景：当一条数据的更改影响到多条数据的时候---------搜索框

区别：
1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。

四、生命周期

1、概念：
vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

2、vue生命周期可以分为八个阶段：
（1）beforeCreate(创建前)
（2）created(创建后)
（3）beforeMount(载入前)
（4）mounted(载入后)
（5）b加粗样式 eforeUpdate(更新前)
（5）updated（更新后)
（7）beforeDestroy(销毁前)
（8）destroyed（销毁后)

五、组件通信

1、组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的
2、组件通信的分类：
（1）父子组件之间的通信
（2）兄弟组件之间的通信
（3）祖孙与后代组件之间的通信
（4）非关系组件间之间的通信

六、路由跳转

1、router-link（声明式路由）
2、router.push（编程式路由）
3、router.replace（编程式路由）
4、router.go（n）

七、双向绑定原理

1、vue内部使用object.defineProperty方法给所有数据加上getter和setter方法，在数据发生改变时发布消息给订阅者Watcher，触发响应的监听回调。
2、vue就是在data对象中使用 object .defineProperty 方法，遍历属性给每一个属性设置setter和getter方法。每个组件实例都会对应一个Watcher实例，当setter方法触发时都会通知Watcher，从而重新渲染关联组件。这就是vue双向绑定的原理。

八、VUex

九、slot插槽

1、组件插槽：组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力；
2、匿名插槽
3、具名插槽：具有名字的插槽，使用“name”属性绑定元素
4、作用域插槽:父组件对子组件加工处理,既可以复用子组件的slot，又可以使slot内容不一致

十、怎样理解单向数据流