vue插槽面试题_常见的vue面试题

001、v-show与v-if的区别

v-show:操作的是元素的display属性

v-if:操作的是元素的创建和插入

相比较而言v-show的性能要高

002、methods、computed、watch三者的区别

methods是个方法，执行的时候需要事件进行触发

computed是一个计算属性，是实时响应的，只要data中的属性发生了变化那么就会触发computed，计算属 性是基于属性的依赖进行缓存的，methods调用的时候需要加()，而computed调用的时候是不需要加()

watch属性监听，watch用来监听属性的变化，当值发生变化的时候来执行特定的函数，watch监听属性的时候 会有2个参数newVal和oldVal一个新值一个旧值

003、vue中自定义指令如何使用

Vue.directive():

参数1：指令名称

参数2：指令实现的函数，在回调函数中第一次参数是指令绑定的元素，参数二是一个对象其中对象中有value 属性代表的是表达式返回的结果，还有modifiers属性是指令的修饰符

004、vue中组件创建的方式有哪些？

全局组件和局部组件

全局组件 Vue.component();参数1：组件名称  参数2：组件的配置项

局部组件 new Vue({    components:{} key值为组件名称  val值为组件的配置项 })

005、vue中的过滤器如何使用

Vue.filter()

参数1：过滤器名称

参数2：过滤器实现的方法  该方法中有2个参数  参数1为需要过滤的数据，参数2为过滤器传递的参数

006、如何实现父子组件传值、非父子组件传值

父组件传递子组件：    通过属性进行传递   接受用props属性进行接受。 props属性用来接收外部属性。    在父组件中当子组件当作标签使用的时候给子组件添加属性，值为需要传递的值。在子组件内部通过props 进行接受。接受的方式有2种，第一种为数组接受，第二种为对象接受，推荐用第二种，对象形式的可以限制数 据的类型

子组件传父组件    //方案一    在父组件中当子组件当作标签使用的时候给子组件绑定自定义方法，子组件通过this.$emit()进行触发。注意 自定义方法是不需要加()的        //方案二    利用solt插槽作用域。

非父子组件传值    方案一：        创建公共的Vue对象。通过调用Vue中的$on() $emit()进行传值。需要接受值得一方调用$on,需要传递值 得一方调用$emit()

方案二：        利用观察者模式封装$on $emit

007、请说出vue中生命周期函数(钩子函数)

1、beforeCreate():组件实例刚刚被创建  (el和data并未初始化)

2、created():组件创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 (完成data数据的初始化)

3、beforeMount():模板编译/挂载之前 (完成了el和data初始化)

4、Mounted():模板编译/挂载之后 (完成挂载)

5、beforeUpdate():组件更新之前

6、updated()：组件更新之后

7、beforedestroy():组件销毁之前

8、destroyed()