面试题：Vue2.x生命周期有哪些?
1. 有哪些生命周期
系统自带：创建阶段：beforeCreate() 创建前，2、created() 创建后挂载阶段：beforeMount() 挂载前，2、mounted() 挂载后更新阶段：beforeUpdate() 更新前，2、updated() 更新后卸载阶段：beforeDestroy() 销毁前，2、destroyed() 销毁后
2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。beforeCreatecreatedbeforeMountmounted
3. 在哪个阶段有$el，在哪个阶段有$databeforeCreate 啥也没有created 有 data 没有 $elbeforeMount 有 data 没有 $elmounted 都有
4. 如果加入了keep-alive会多俩个生命周期activated、deactivated
5. 如果加入了keep-alive，第一次进入组件会执行哪些生命?beforeCreatecreatedbeforeMountmounted activated
6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期?只执行一个生命周期：activated
面试题：谈谈你对keep-alive的了解
1．是什么vue系统自带的一个组件，功能：是来缓存组件的。===》 提升性能2．使用场景就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓存起来就可以了，当然如果点击的不是同一个，那么就直接请求。
面试题：v-if 和 v-show 区别
1．展示形式不同v-if 是创建一个dom节点v-show 是display:none、block2．使用场景不同初次加载 v-if 要比 v-show 好，页面不会做加载盒子频繁切换 v-show 要比 v-if 好，创建和删除的开销太大了，显示和隐藏开销较小
一般来说，v-if 有更高的切换开销，而 v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。
面试题：v-if 和 v-for 优先级
v-for 的优先级要比 v-if 高
***是在源码中体现的：function genElement
面试题：ref 是什么?
来获取dom的
<template><div class="home"><img id='imgs' src="../assets/logo.png" id='img'/><img ref='imgs' src="../assets/logo.png" id='img'/></div>
</template>
<script>export default {name:"Home",mounted(){console.log( document.getElementById('img'));console.log( this.$refs)}};
</script>
面试题：nextTick 是什么?
获取更新后的dom内容
<template><div class="home"><button @click='btn' ref='box'>{{str}}</button></div>
</template>
<script>export default{name:"Home"，data(){return{str:'123'}}methods:{btn({this.str = 'bbbbb';console.log(this.$refs.box.innerHTML // 123this.$nextTick(()=>{console.log(this.$refs.box.innerHTML,'xxx') // bbbbb xxx}}}}
</script>
面试题：scoped原理
1、作用：让样式在本组件中生效，不影响其他组件。
2、原理：给节点新增自定义属性，然后css根据属性选择器添加样式。
面试题：Vue 中如何做样式穿透
一、让css只在当前组件生效<style scoped>二、scss、stylusscss :1.下载npm install sass-loader node-sass --save2.<style lang='scss' scoped>3. scss 样式穿透父元素 /deep/ 子元素stylus:1．下载npm install stylus stylus-loader --save2. <style lang='stylus' scoped>3.stylus样式穿透① 父元素 /deep/ 子元素 ② 父元素 >>> 子元素
面试题：父组件传值到子组件
父组件：<Header :msg='msg'></Header>
子组件：props:['msg']props:{ msg:数据类型 }
-----------------------------------------------------------------
父组件'Home'：
<template><div>父组件<Header:msg='msg'></Header></div>
</template>
<script type="text/javascript">
import Header from './Header'
export default {data () {return {msg:'这是数据‘}},components:{Header}
</script>
-----------------------------------------------------------------
子组件'Header'：
<template><div>子组件<hr />{{msg}}</div>
</template>
<script type="text/javascript">export default{//props:['msg']props:{msg:String}
</script>
面试题：子组件传值到父组件
子组件：this.$emit("自定义事件名称",要传的数据);
父组件：<Header @childInput='getVal'></Header>methods:{getVal(msg){//msg就是，子组件传递的数据}}
----------------------------------------------------------------
父组件"Home"：
<template><div>父 {{msgVal}}组件<Header @childInput='getVal'></Header></div>
</template>
<script type="text/javascript">
import Header from './Header'
export default {data () {return{msgVal:" "}},components:{Header},methods:{getVal(msg){this.msgVal = msg;}}
}
</script>
-----------------------------------------------------------------
子组件"Header":
<template><div>子组件<input type="" name="" V-model='changeVal'></div>
</template>
<script type="text/javascript">
export default {data () {return{changeVal:""}},watch:{changeVal(){this.$emit("childInput",this.changeVal)}}
}
</script>
面试题：兄弟组件之间的传值
通过一个中转(bus)A兄弟传值：import bus from '@/common/bus'bus.$emit("toFooter",this.msg);B兄弟接收：import bus from '@/common/bus'bus.$on('toFooter',(data)=>{//data是this.msg数据})
----------------------------------------------------------------------------------
Home.vue:
<template><div><Header></Header><Footer></Footer></div>
</template>
<script type="text/javascript">
import Header from './Header'
import Footer from './Footer'
export default {components:{Header,Footer}
}
</script>
----------------------------------------------------------------------------------
兄弟组件:'Header'
<template><div>header<button @click='goFooter'>传过去了</button></div>
</template>
<script type="text/javascript">
import bus from '@/common/bus'
export default {data () {return{msg：“这是兄弟数据}},methods:{goFooter(){bus.$emit("toFooter",this.msg);}}
}
</script>
--------------------------------------------------------------------------------
兄弟组件:'Fotter'
<template><div>footer{{str}}</div>
</template>
<script type="text/javascript">
import bus from '@/common/bus'
export default {data () {return {str:''}},mounted(){bus.$on('toFooter',(data)=>{this.str=data;})}
}
</script>
----------------------------------------------------------------------------------
bus.js
import Vue from 'vue';
export default new Vue;
面试题：computed(计算)、methods(方法)、watch(监听)有什么区别?
1. computed vs methods区别computed 是有缓存的methods 没有缓存
2. computed vs watch区别watch 是监听，数据或者路由发生了改变才可以响应（执行)computed 计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回watch 是当前监听到数据改变了，才会执行内部代码
面试题：props和data优先级谁高?
props ===> methods ===> data ===> computed ===> watch
