面试题：Vue组件生命周期优化之父子组件协同

Question

在一个包含多层父子组件嵌套的Vue应用中，父组件和子组件都有各自的生命周期。假设子组件在mounted钩子函数中有一些初始化操作依赖于父组件传递的数据，而父组件的数据是异步获取的。请描述如何通过合理的生命周期钩子函数和数据传递机制，确保子组件在正确的时机完成初始化，同时尽可能减少不必要的渲染和性能开销。

Answer 1

1. 父组件处理：
   • 在父组件中，使用created钩子函数发起异步数据请求。例如：

   <template>
     <div>
       <ChildComponent :data="parentData" />
     </div>
   </template>
   <script>
   import ChildComponent from './ChildComponent.vue';
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         parentData: null
       };
     },
     created() {
       this.fetchData();
     },
     methods: {
       async fetchData() {
         // 模拟异步请求
         const response = await new Promise(resolve => {
           setTimeout(() => {
             resolve({ someData: 'example' });
           }, 1000);
         });
         this.parentData = response;
       }
     }
   };
   </script>
   

2. 子组件处理：
   • 子组件使用watch监听父组件传递过来的数据parentData，而不是直接在mounted钩子函数中进行初始化操作。这样可以确保数据变化时子组件能够正确响应，并且避免在mounted中因数据未准备好而导致的错误。例如：

   <template>
     <div>
       <!-- 子组件内容 -->
     </div>
   </template>
   <script>
   export default {
     props: ['data'],
     data() {
       return {
         // 子组件内部数据
       };
     },
     watch: {
       data(newVal) {
         if (newVal) {
           // 在这里进行依赖于父组件数据的初始化操作
           console.log('初始化操作，依赖父组件数据:', newVal);
         }
       }
     }
   };
   </script>
   

3. 避免不必要渲染：
   • 使用v - if指令在父组件中控制子组件的渲染。在父组件数据未获取到之前，不渲染子组件，这样可以减少不必要的渲染。例如：

   <template>
     <div>
       <template v - if="parentData">
         <ChildComponent :data="parentData" />
       </template>
     </div>
   </template>
   

   • 在子组件中，合理使用computed属性和watch的immediate选项。如果子组件有一些基于父组件数据的计算属性，可以使用computed，并且watch时设置immediate: false（默认值），这样只有数据变化时才触发相应操作，减少不必要的性能开销。例如：

   <template>
     <div>
       <p>{{ computedValue }}</p>
     </div>
   </template>
   <script>
   export default {
     props: ['data'],
     computed: {
       computedValue() {
         return this.data.someData + '经过计算';
       }
     },
     watch: {
       data: {
         handler(newVal) {
           if (newVal) {
             // 处理数据变化
           }
         },
         immediate: false
       }
     }
   };
   </script>