前端面试题解答（十六）

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

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

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

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

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

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

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

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

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

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

5、Vue组件的通信方式有哪些？

组件之间的通信，主要描述的是数据的传输，主要如下几种

自定义属性，实现了父组件向子组件传输数据
自定义事件，实现了子组件向父组件传输数据
事件中心，实现了组件之间数据传递
插槽，实现了子组件向父组件传递数据
ref属性，实现了父组件访问子组件的数据
其他
路由中的数据传递
vuex中的数据传递

6、Vue组件中如何监听数据发生了变化并做出响应？

updated() 组件声明周期可以监听
watch：侦听器可以监听变量数据
computed：计算属性可以监听变量数据发生变化，并在计算属性调用的地方自动做出更新

7、怎么理解Vue中的数据双向绑定？

双向绑定底层是通过数据劫持的方式进行实现的，通过Object.defineProperty()声明变量的同时劫持执行的变量数据，就可以在变量数据被读取时自动调用getter()函数完成数据的获取，在变量数据更新时自动调用setter()函数完成数据的设置，设置的同时就会自动通知Watchers组件完成数据的更新，这样数据从实例和视图之间的互相同步更新的过程就是数据双向绑定

8、怎么理解Vue中的单向数据流？

当组件之间通过自定义属性进行数据传递时，父组件传递给子组件的数据就是单向数据流！
父组件传递数据给子组件进行使用，为了保障数据的可控性，不允许子组件直接修改父组件传递的数据，这样的机制就是单向数据流
如果子组件中需要父组件的数据作为初始数据并进行修改，可以在自己的data()数据中进行数据的获取，然后修改子组件自己的数据副本
如果子组件中需要父组件的数据参与运算并得到结果，可以在自己的computed计算属性中进行数据的运算，然后通过子组件自己的计算属性获取数据结果

9、v-if和v-for为什么不建议一起使用？

v-for用于循环渲染数据，渲染的数据一般都是用于页面组件中进行循环展示，如果需要显示或者隐藏的切换一般会通过v-show执行，v-if会造成DOM结构的卸载/加载的操作耗费资源较多，所以v-if和v-for很少一起使用！

10、Vue如何监听数组数据是否发生了变化？

Vue中监听数组中的数据，同样也是通过数据劫持的方式完成数组数据的更新操作，主要针对数据中常见的函数调用进行了监听(push/pop/shift/unshift/sort/reverse/splice)七个函数进行了监听，只有当这些函数执行时才会双向数据绑定进行同步渲染，其他函数或者操作执行时不会发生数据同步，如果有必要的话Vue提供了Vue.set/vm.$set支持其他的操作方式！