前端面试必备 | 计算属性和监听器篇(P1-15)

alt

文章目录

请解释一下 Vue.js 中的 watch 和 computed 的作用和区别。
在 Vue.js 中，watch 和 computed 的底层实现机制有何不同？
如何在 Vue.js 中使用 watch 监听数据的变化？
在 Vue.js 中，watch 的 immediate 选项是用来做什么的？
请解释一下 Vue.js 中的 computed 属性是如何工作的。
computed 属性有哪些特点？请举例说明。
在 Vue.js 中，computed 属性和 methods 方法的区别是什么？
Vue.js 中的 computed 属性是否支持异步操作？为什么？
如何在 Vue.js 中监听到计算属性的变化？
在 Vue.js 中，是否可以将计算属性的结果作为其他计算属性的依赖？
在 Vue.js 中，如何避免计算属性的无限循环依赖？
什么情况下应该使用 watch，而不是 computed？
请解释一下 Vue.js 中的深度监听和浅监听的概念。
Vue.js 3 中对 watch 和 computed 的改进有哪些？
除了 watch 和 computed，Vue.js 中是否还有其他方式来监听数据的变化？

1. 请解释一下 Vue.js 中的 watch 和 computed 的作用和区别。

在Vue.js中，watch和computed都是用于响应数据变化的功能，但它们的作用和区别略有不同。

watch：
- 作用：watch用于监听数据的变化，并在数据变化时执行相应的操作。可以监听单个数据的变化，也可以监听多个数据的变化。
- 使用场景：当需要在数据变化时执行异步操作、复杂的逻辑判断或对多个数据的变化作出响应时，常常会使用watch。
- 示例代码：
```
watch: {
  inputValue(newValue, oldValue) {
    // 监听inputValue的变化
    // 执行相应的操作
  },
  // ...
}
```
computed：
- 作用：computed用于根据已有的数据计算和派生新的数据，并返回计算后的结果。计算属性是基于它们的依赖进行缓存的，只有依赖的数据发生变化时，计算属性才会重新计算。
- 使用场景：当需要根据现有数据派生出一些新的数据，并且希望这些派生数据能够自动更新时，常常会使用computed。
- 示例代码：
```
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  // ...
}
```

区别：

watch适合处理数据的变化逻辑，可以监听单个或多个数据的变化，并执行相应的操作。它更适合执行异步操作或有副作用的操作。
computed适合派生新的数据，通过对现有数据的计算和处理，返回一个新的计算结果。计算属性是基于它们的依赖进行缓存的，只有依赖的数据发生变化时，计算属性才会重新计算。它在性能上更好，可以避免不必要的计算和更新。

需要注意的是，computed和watch的使用略有差异，根据具体的业务需求和场景选择合适的方式。有时候可以同时使用它们来满足不同的需求。

2. 在 Vue.js 中，watch 和 computed 的底层实现机制有何不同？

在Vue.js中，watch和computed的底层实现机制有所不同。

watch的底层实现机制：
- watch使用了Vue.js提供的$watch方法来监听数据的变化。当我们定义一个watch选项时，Vue.js会在组件实例创建时，遍历这些watch选项，并通过$watch方法对相应的数据进行监听。
- watch可以监听单个数据的变化，也可以监听多个数据的变化，通过对象的形式进行定义。在数据发生变化时，相应的回调函数会被触发，我们可以在回调函数中执行我们需要的操作。
computed的底层实现机制：
- computed使用了Vue.js提供的计算属性的机制。在定义计算属性时，我们通过编写计算属性的get函数来计算和返回数据，而不是直接在模板中编写逻辑。
- Vue.js会为计算属性创建一个依赖追踪器，用于追踪计算属性依赖的数据。当依赖的数据发生变化时，Vue.js会自动重新计算计算属性的值，并将计算结果缓存起来。
- 当计算属性被访问时（如在模板中使用），Vue.js会检查计算属性所依赖的数据是否发生了变化。如果没有变化，则直接返回缓存的计算结果，如果有变化，则重新计算并更新缓存。

总结：

watch依赖于$watch方法来手动监听数据的变化，并执行相应的操作。
computed通过定义计算属性的get函数来派生和缓存新的数据，并自动追踪所依赖的数据的变化。

这种底层实现的不同使得watch和computed适用于不同的场景，具有不同的特性和优势。

3. 如何在 Vue.js 中使用 watch 监听数据的变化？

在Vue.js中，你可以通过以下方式来使用watch来监听数据的变化：

在Vue组件的选项中添加一个watch属性，它是一个对象。

watch: {
  // 监听单个数据的变化
  dataToWatch(newValue, oldValue) {
    // 执行相应的操作
  },
  
  // 监听多个数据的变化
  'data1': {
    handler(newValue, oldValue) {
      // 执行相应的操作
    },
    deep: true // 可选：深度监听对象内部的变化
  },
  'data2.data3': 'handleData2Data3Change', // 监听嵌套属性的变化
},
methods: {
  handleData2Data3Change(newValue, oldValue) {
    // 执行相应的操作
  },
}

可以通过handler属性或直接提供一个处理函数来指定当数据变化时要执行的操作。使用handler属性时，这个属性值是一个回调函数。你还可以指定其他选项，如deep选项（用于深度监听对象内部的变化）。
在监听函数或方法中，你可以访问新值和旧值，通过参数newValue和oldValue来接收它们。

需要注意的是，当你使用watch来监听一个数据时，Vue会自动在组件销毁时停止监听，所以你不需要手动取消监听。

除了上述的对象形式的watch，Vue还支持使用计算属性的形式来监听数据的变化。你可以将要监听的数据作为计算属性的依赖，在计算属性中返回一个值。

computed: {
  fullName: {
    get() {
      // 计算属性的get函数
      // 返回计算结果
    },
    set(newValue) {
      // 计算属性的set函数
      // 处理数据变化的操作
    }
  }
}

这种方式相对更灵活，你可以在计算属性的get函数或set函数中执行逻辑。但是需要注意的是，计算属性是被动侦听的，只有当你在模板或组件中使用计算属性时，它才会被触发。

4. 在 Vue.js 中，watch 的 immediate 选项是用来做什么的？

在Vue.js中，watch选项中的immediate属性是用来指定在初始创建时是否立即执行监听回调函数的。

当你在定义watch时设置了immediate: true，监听函数会在侦听开始之后立即被调用一次，无论数据是否发生了实际的变化。这意味着无论初始值是什么，监听回调函数都会被执行。

这个选项对于需要在组件初始加载时执行一些逻辑的情况非常有用。你可以利用这个选项来处理初始状态的数据或执行一些初始化操作。

下面是使用watch的immediate选项的示例：

watch: {
  dataToWatch: {
    handler(newValue, oldValue) {
      // 执行相应的操作
    },
    immediate: true // 立即执行监听回调函数
  }
}

在上面的示例中，dataToWatch的初始值将被传递给监听回调函数作为newValue参数，无论它是否发生了实际的变化。

需要注意的是，只有在Vue组件实例创建时设置了immediate: true时，监听回调函数才会被立即执行。如果你在运行时动态更改了watch选项，immediate选项将不会生效，监听函数不会被立即执行。

要注意谨慎使用immediate选项，确保只在必要的情况下使用，以免引发意外的副作用或性能问题。

5. 请解释一下 Vue.js 中的 computed 属性是如何工作的。

在Vue.js中，computed属性用于定义计算属性。计算属性是可以根据其他数据的值动态计算得出的属性，它的值是通过计算函数返回的。

使用计算属性可以方便地对数据进行处理和衍生，而且可以在模板中像普通属性一样使用。

以下是计算属性的基本用法和工作原理：

在Vue组件的选项中，添加一个computed属性，它是一个对象。

computed: {
  propertyName() {
    // 计算函数
    // 返回计算结果
    return this.someData + ' computed';
  }
}

在computed对象中，你可以定义一个或多个计算属性。每个计算属性都是一个键值对，键是你想要定义的属性的名称，值是一个计算函数。计算函数将在需要计算属性的时候自动调用。
计算函数通过return关键字返回计算结果作为计算属性的值。在计算函数中，你可以访问组件实例中的其他数据，使用this关键字来引用。
当依赖的数据发生变化时，计算属性会重新计算。Vue会自动追踪计算属性的依赖关系，确保在依赖发生变化时，只重新计算受影响的计算属性。
计算属性是基于它们的依赖进行缓存的，只有在依赖变化时才会重新计算。这意味着多次访问同一个计算属性时，计算函数只会执行一次，后续的访问会直接返回缓存的计算结果。

通过计算属性，你可以避免在模板中写复杂的表达式，提高模板的可读性和可维护性。计算属性还可以充分发挥Vue的响应式系统的优势，确保在数据变化时自动更新计算属性。

需要注意的是，计算属性适合用于处理较为复杂的逻辑，而对于简单的数据处理，你可以使用methods选项来定义方法来实现。但是与计算属性不同，方法在每次访问时都会执行，而不会进行缓存。

6. computed 属性有哪些特点？请举例说明。

计算属性在Vue.js中具有以下特点：

缓存：计算属性是基于它们的依赖进行缓存的，只有在依赖变化时才会重新计算。这意味着多次访问同一个计算属性时，计算函数只会执行一次，后续的访问会直接返回缓存的计算结果。
```
computed: {
  fullName() {
    console.log('计算全名');
    return this.firstName + ' ' + this.lastName;
  }
}
```
在上面的示例中，只有firstName和lastName发生变化时，计算函数才会执行并重新计算fullName。如果多次访问fullName而没有相关数据变化，计算函数将不会执行，而是直接返回之前的缓存结果。

响应式：计算属性依赖的数据发生变化时，计算属性会自动重新计算。Vue会自动追踪计算属性的依赖关系，以确保在依赖发生变化时，只重新计算受影响的计算属性。

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      console.log('计算全名');
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

当firstName或lastName发生变化时，fullName会自动重新计算并更新模板中的显示。

与依赖关系解耦：计算属性与模板中的表达式解耦，可以将复杂的逻辑抽取到计算属性中，使模板保持简洁和易读。
```
computed: {
  isAdult() {
    // 根据年龄判断是否成年
    return this.age >= 18;
  }
}
```
在上面的示例中，isAdult是一个根据age数据计算得出的计算属性。而模板中可以直接使用isAdult，而不需要在模板中写复杂的判断逻辑。
可侦听属性：计算属性本身是一个可侦听的属性，你可以在watch选项中监视计算属性的变化。
```
watch: {
  fullName(newFullName, oldFullName) {
    console.log('fullName发生变化');
    // 执行相应的操作
  }
}
```
在上述示例中，你可以监视fullName计算属性的变化，并在其变化时执行相应的操作。

计算属性的特点使其在处理复杂的数据衍生和处理逻辑时非常有用，并且能够提供更简洁、高效的代码和可维护的模板。

7. 在 Vue.js 中，computed

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端面试必备文章被收录于专栏

前端面试必备知识点：HTML和CSS、JS(变量/数据类型/操作符/条件语句/循环;面向对象编程/函数/闭包/异步编程/ES6)、DOM操作、HTTP和网络请求、前端框架、前端工具和构建流程、浏览器和性能优化、跨浏览器兼容性、前端安全、数据结构和算法、移动端开发技术、响应式设计、测试和调试技巧、性能监测等。准备面试时，建议阅读相关的技术书籍、参与项目实践、刷题和练习，以深化和巩固你的知识。