Vue前端面试2021-017

1、Vue中的过滤器的作用是什么 ？如何声明过滤器？

Vue中的过滤器主要是用来按照指定的格式进行数据输出格式渲染，声明过程中根据使用的方式不同可以声明为全局过滤器或者局部过滤器

• 全局过滤器：可以在任意Vue实例中进行使用 Vue.filter(过滤器名称, (dat) => 处理函数)
• 局部过滤器：只能在当前实例中进行使用

new Vue({
   filters: { 声明过滤器 }
})

2、Vue项目中为什么组件的数据声明data()是一个返回了对象的函数？

因为Vue中的组件是被用来复用的一个代码块，在不同的复用的地方处理的数据可能不同，组件中定义的data()就是一个返回了对象的函数，保障了每个复用的组件都有自己独立的数据，多个复用的地方操作的数据互相独立不会受到影响！

3、组件的作用是什么？如何声明组件？

组件是Vue中的一个常用的视图对象，组件的声明主要是为了数据视图的复用；组件根据使用范围不同可以声明为全局组件和局部组件

• 全局组件，可以在任何Vue实例中使用 Vue.component(组件名称, {组件模板})
• 局部组件，只能在当前组件/实例中使用

new Vue({
    components: { 声明局部组件 }
})

4、父组件如何给子组件传值？传递数据的使用有什么注意事项？

在组件的嵌套关系中，父组件一般通过自定义属性的形式将数据传递给子组件 Vue中规范了父组件传递数据给子组件，建议单向数据绑定；如果子组件中需要使用父组件的数据作为初始值，可以通过data()中的自定义变量进行数据接受；如果子组件中需要父组件的数据作为运算数据，可以通过computed计算属性进行数据的获取！

5、子组件如何给父组件传值？传递数据时有什么注意事项？

子组件是通过自定义事件将数据传递给父组件，父组件需要监听子组件的自定义事件，然后通过事件处理函数获取子组件传递的数据 自定义事件的名称必须全部匹配的情况下才能触发和正确监听，包括大小写字符不存在自动转换的操作！

6、计算属性和侦听器的区别是什么？

计算属性是Vue实例中通过computed声明的对象，侦听器是Vue实例中通过watch声明的对象； 侦听器一般都是针对单个变量的数据变化进行监听和处理的配置对象，当监听的变量数据发生更新时自动执行对应的监听函数，处理相关的业务逻辑 计算属性一般都是针对单个或者多个数据的变化进行监听和处理的配置对象，当监听的一个或者多个变量数据发生变化时，调用执行计算属性的位置会自动运算得到结果；如果数据没有发生变化，调用执行时会直接使用上次缓存的计算结果，不会再次执行运算

7、计算属性和普通函数的区别是什么？

计算属性是Vue实例中声明在computed上的配置对象，普通函数主要声明在Vue实例的methods配置选项上； 普通函数必须通过函数名称进行调用才能执行，每次调用都会重复执行函数内部的所有代码；计算属性可以当成普通属性一样使用，当计算属性监听的变量数据发生改变时可以和普通函数的执行一样执行函数内部代码得到结果，如果监听的变量数据没有发生变化就会直接使用上次的运算结果，比普通函数的执行效率要更高！