Vue前端面试2021-018

1、为什么组件中的data是一个函数？

Vue中的组件是要被重复使用的，如果data只是一个对象，多个复用的组件他们之间的数据就会互相影响，所以data是一个返回独立对象的函数，保障每个被复用的组件的数据都是独立的！

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

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

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

3、Vue中的生命周期函数有哪些？分别都在什么时候执行？

beforeCreate()：组件实例创建之前执行
created()：组件实例创建之后执行，此时可以访问组件实例数据和函数
beforeMount()：组件对应虚拟DOM挂载之前执行
mounted(0：组件对应虚拟DOM挂载之后执行，此时可以访问实例数据和DOM结构
beforeUpdate()：组件中的数据发生更新，更新前执行
updated()：组件中的任意数据发生更新，更新后执行
beforeDestory()：组件卸载时，卸载之前执行
destoryed()：组件卸载时，卸载后执行
activated()：组件缓存时，组件被激活时执行
deactivated()：组件缓存时，组件被失活时执行

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

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

5、简述常用的vue指令以及它们的含义

v-text/v-html：数据渲染
v-once：和v-text/v-html/{{}}配合使用只渲染一次
v-bind：操作属性
v-on：操作事件
v-show/v-if：根据条件进行渲染
v-if|v-else-if|v-else / v-for ：程序流程控制指令
v-model：数据双向绑定执行
v-slot：插槽数据绑定指令

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

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

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

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

8、computed和watch的区别以及运用场景？

computed和watch都可以在数据发生变化的时候，自动参与运算获取自动执行函数
computed计算属性只有被调用才会执行，执行过程中只有参与运算的数据发生了变化才会重复执行计算属性函数内部的代码得到结果，否则直接返回上一次运算的结果
watch监听数据的变化，当数据发生变化时会自动执行处理函数

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支持其他的操作方式！