Vue常见面试题

一，v-if和v-show的区别
v-if会频繁的创建（重建），删除元素（销毁），初始切换条件为假，则什么也不做知道条件为真
v-show只是css的显示和隐藏，初始条件不管是真是假都会渲染
频繁切换用v-show好，条件不怎么变用v-if好
二，css在vue中如何避免类名相同导致样式重复的问题
在style标签中加上scoped属性

三，sass和stylus样式穿透(两者都css预处理器)
sass下载npm install sass-loader,node-sass --save
stylus下载npm install stylus stylus-loader --save
指加上scoped避免了全局污染，可要修改的样式不变，必须加上： 父元素属性/deep/子元素属性
列如：div/deep/span
四，v-model配合input，select，文本中的value使用，实现双向绑定
五，onclick在移动端游300毫秒的延迟，可以下载fastclick
下载npm install fastclick
在main.js中引入
用fastclick.attach(document.body)方法可以解决
六。vue-loader是做什么的
是.vue的加载器，没有浏览器不认识.vue
用途：让js可以写es6，template，sass等
七。NextTick是做什么的
实在下次dom更新后结束后执行延迟回调，在修改数据后使用$nextTick则可以获取更新的dom场景：需要在视图更新后，基于新的视图进行操作八。脚手架的data为甚么必须是函数因为js的特性，如果data是一个对象，那么所有的实例如果修改其中一个属性，则会影响所有vue实例的数据，如果定义为函数每个属性都是独立的则互不影响九。对keep-alive的了解1.keep-alive是内置组件，能在组件切换中保存状态，防止重复渲染dom2.keep-alive不会再dom中渲染列如：点击按钮跳转到新页面，返回又重新渲染，加上keep-alive就可以避免3.keep-alive生命周期activated可以在这里写条件deactivated十。vue种key的作用主要是为了高效的更新虚拟domdiff算法默认算法（虚拟dom，不加key）1。如果节点类型不同，直接干点前面所有节点，在创建并插入新的节点，不会再比较这个节点以后的子节点。2.如果节点类型相同，则会重新设置节点的属性，从而实现节点的更新举例：ABCDE，往BC之间插入F，AB不变，C变成F，D变成C，E变成D使用key给每个节点做一个唯一标识，diff算法可以正确识别位置，不会更改其他元素举例：ABCDE，往BC之间插入F，就只是插入十一。在vue中使用插件的步骤1.下载npminstallxx2.引入importxxfrom‘xx’3.配置<xx></xx>十二。watch和computed的差异computed1.是一个计算属性是由data中的已知值，得到一个新值2.别人变化影响自身。3.性能不好watch是数据监听时执行相应的操作，执行方法等监听data中的数据监听路由十三。vue项目打包了一个js，css还是多个都是一个十四。vue组件之间的传值1.父组件传值到子组件父组件在子组件上自定义属性和自身数据连接起来子组件通过props:父组件在子组件的自定义属性拿到数据2.子组件传值到父组件子组件通过//第一个参数为给父组件自定义事件，第二个参数为子组件的值this.$emit(‘chan’,this.inputval)
父组件通过在子模板中写@chan=‘change’
在methods中写change（msg）参数就是子组件传来的值
3.兄弟组件之间的传值
在src文件夹下新建Bus.js写入如下内容
import Vue from ‘Vue’;
export default new Vue;
在子组件a中引入Bus.js
用Bus.$emit(‘事件名’,传入值msg)
在子组件b中引入Bus.js
用Bus.$on(‘事件名’,函数(msg){处理传入值msg})
十五。vue-cli中src各个文件夹的含义
assets 静态资源（图片，js，css）
components 非路由组件
views 路由组件
router 路由配置
store vuex（仓库）
App.vue 挂载的第一个组件
main.js 全局的文件