每日一篇——23秋招VUE面经（3）

⭐父子组件生命周期的先后关系

生命周期（父子组件）父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件 mounted --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy--> 子组件destroyed --> 父组件updated

加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

挂载阶段 父created->子created->子mounted->父mounted

父组件更新阶段 父beforeUpdate->父updated

子组件更新阶段 父beforeUpdate->子beforeUpdate->子updated->父updated

销毁阶段 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

⭐computed与watch

关联：
- computed：computed 是 Vue.js 提供的一个属性计算方式。通过定义 computed 属性，可以根据依赖的响应式数据自动计算衍生值，并且只有在相关数据发生变化时才重新计算。computed 属性是基于响应式依赖进行缓存的，只有依赖的数据发生改变时才会重新计算。
- watch：watch 是 Vue.js 提供的一个观察属性变化的功能。通过定义 watch 属性，可以监听指定的数据变化并执行相应的回调函数。watch 是基于观察的方式，当被监听的数据发生变化时，回调函数将被立即执行。
适用情况：
- computed：适用于需要根据已有响应式数据计算衍生值的场景，例如对数据进行格式化、过滤、排序等操作。由于 computed 属性是基于依赖的缓存机制，可以有效地减少不必要的计算，并提高性能。
- watch：适用于需要在数据变化时执行异步或开销较大的操作，或者需要监听非响应式数据的变化。watch 允许你执行任意逻辑，包括调用接口、发起网络请求等操作。
优劣势：
- computed的优势：
  - 缓存机制：computed 属性会基于依赖进行缓存，只有当依赖发生变化时才会重新计算，避免了不必要的重复计算。
  - 自动更新：对于依赖的响应式数据的变化，computed 属性会自动更新。
  - 声明式：通过声明 computed 属性，可以更直观地描述数据之间的关系。
- watch的优势：
  - 异步和副作用：watch 属性可以处理异步或有副作用的操作，例如调用接口、发起网络请求等。
  - 监听非响应式数据：watch 可以监听非响应式数据的变化。
  - 灵活性：watch 允许执行任意逻辑，更加灵活。

需要根据具体情况选择使用 computed 还是 watch。通常情况下，如果需要根据已有的响应式数据计算衍生值，使用 computed 更加合适；如果需要监听数据变化并执行异步或开销较大的操作，使用 watch 更加适合。

⭐组件中的data为什么是函数

在 Vue.js 组件中，data 通常被定义为一个函数，而不是一个直接的对象。这是因为组件在 Vue 中是可复用的，当多个实例共享同一个组件时，每个实例都需要拥有自己独立的数据。如果在组件中直接使用对象形式的 data，那么所有实例将共享同一个数据对象，从而导致数据混乱和不可预料的行为。

通过将 data 定义为函数，每个组件实例都会调用该函数来返回一个独立的数据对象。这样每个实例就可以拥有自己的数据副本，彼此之间互不干扰。

示例：

Vue.component('my-component', {
  data: function() {
    return {
      message: 'Hello, World!'
    };
  }
});

当组件被创建的时候，data 函数会被执行，返回一个新的数据对象给该组件的实例。这样，在每次创建该组件实例时，都会得到一个全新的数据对象，确保数据的独立性和隔离性。

值得注意的是，如果使用 ES6 的箭头函数来定义 data，会导致箭头函数内部的 this 不再指向组件实例。因此，为了确保在 data 函数内部能够访问到正确的组件实例，应该使用普通函数来定义 data。

总结：将组件的 data 定义为函数是为了确保每个组件实例都拥有独立的数据对象，避免数据混乱和共享引发的问题。每次创建组件实例时，都会调用该函数返回一个全新的数据对象，确保数据隔离和独立性。

⭐为什么v-for和v-if不建议用在一起

1.当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费（Vue2.x） 2.这种场景建议使用 computed，先对数据进行过滤

注意：3.x 版本中 v-if 总是优先于 v-for 生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。