Vue面试题一(持续更新)

v-show与v-if区别

v-if 创建与删除 （false时没有元素）
v-show 显示与隐藏 （false时页面加载元素 display：none）

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内事件监听和子组件适当地摧毁和重建。
v-if是惰性的，如果在初始渲染时条件为假，则什么也不做一直到条件为真时，才会开始渲染条件快。
相比之下，v-show就简单得多，不管初始条件是什么，元素总会被渲染，并且只是简单的基于css进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此如果需要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if。

如何让CSS只在当前的组件中起作用

将当前的组件< style > 修改成< style scoped >

scss
< style lang=“scss” scoped >
父元素 /deep/ 子元素

stylus
< style lang=“stylus” scoped >
父元素 /deep/ 子元素
父元素 >>> 子元素

v-model是什么 怎么使用 Vue中的标签怎么绑定事件

v-model可是实现双向绑定，在input或者select或者文本域value使用
v-on:click 简写为@click，在移动端中有300ms延时，解决这个问题可以引入fastClick

vue-loader是什么 使用它的用途

vue文件的加载器，跟template/js/style转化为js模块
用途：js可以写es6，style样式可以写scss或者less，template可以加载jode。

nextTick是做什么

$ nextTick是在下次DOM更新循环结束后执行延迟回调，在修改数据之后使用$ nextTick则可以在回调中获取更新后的DOM。
（Vue响应式并不是数据发生变化之后DOM就立刻发生变化）
场景：需要在视图更新之后，基于新的视图进行操作。

Vue组件中data为什么是函数（脚手架中）

因为js本身的特性带来的。如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中一个属性，会影响到所有vue实例的数据。如果data为函数返回对象时，那么每个实例的data属性都是独立的，不会相互影响。

对keep-alive的了解

内置组件。能够在组件切换过程中将状态保留内存，防止重新渲染DOM。
keep-alive不会在DOM中渲染
多两个生命周期：activated()/deactivated()

Vue中key的作用

key的作用主要是为了高校的更新虚拟DOM
diff算法问题：
1⃣️如果节点类型不同，直接干掉前面所有的节点，在创建并插入新的节点，不会比较这个节点以后的节点。
2⃣️如果节点类型相同，则会重新设置节点的属性，从而实现节点的更新。
要使用key给每个节点一个唯一的表示，diff算法可以正确的识别此节点，找到正确的位置插入新的节点。

• diff
  

• vue中加key
  

在Vue中使用插件的步骤

下载 npm install xxx
引用 import xxx form ‘xxx’；Vue.use(xxx)；
配置 < xxx >< xxx />

watch与computed差异

computed：计算属性；
                    计算属性是由data中的一直值，得到一个新的值。
                    性能不好
                    别人变化影响自己
watch：监听数据data中的数据
              监听data中的数据
              我的变化影响别人
             
watch是进行数据监听，然后进行相应的操作，执行方法等；conputed和method的合体使用，比较耗费性能，与vue性能背道而驰。computed是数据进行改变的数据变化，由旧数据迸发新数据（return返回），会利用缓存机制对数据进行缓存，只有当依赖数据变化的石斛才会进行相应的变化。

Vue项目打包了一个js和一个css ，还是有多个文件

根据vue-cli脚手架的规范，一个js文件和一个css文件

vue-cli项目中的src目录每个文件夹的作用

assets静态资源文件（img/js/css）
components非路由组件
router路由配置
store仓库（vuex）
views路由组件
App.vue挂载的每个组件
main .js全局文件

Vue组件之间的传值通信

父组件 传值 子组件
父组件：< Header :msg=‘msg’ >< Header />
子组件：props:[‘msg’]
              props:{msg:数据类型 }

子组件 传值 父组件
子组件：this.$emit(‘自定义事件名称’,‘要传的值’)
父组件：< Header @自定义事件名称=‘自定义事件名称’></ Header >
             methods{自定义事件名称(msg){//msg就是子组件传递的数据}}

兄弟组件传值
A传递：import bus form ‘路径’
              bus.$emit(‘自定义事件名称’,'要传递的数据 ')

B接受：import bus form ‘路径’
              bus.$on(‘自定义事件名称’,data=>{//data为要传递的数据})