Vue 探索之旅：第四站 — Vue 计算属性和侦听器

子羽bro
90 阅读4分钟

pexels-pavel-danilyuk-8985529.jpg

本章涵盖知识点

  • 计算属性（computed）的使用场景
  • 侦听器（watchers）的原理和应用
  • 生命周期钩子函数

回顾

  • 第 1 篇中，我们了解了 Vue 的起源、设计理念以及如何搭建 Vue 开发环境。
  • 第 2 篇中，我们学习了 Vue 实例、模板语法、数据绑定和事件处理。
  • 第 3 篇中，我们探索了组件的创建、注册、props 和事件系统，以及插槽的使用。

计算属性（Computed）

计算属性是基于它们的依赖进行缓存的属性。只有当依赖发生变化时，计算属性才会重新计算。

创建计算属性

new Vue({
  data: {
    firstName: "John",
    lastName: "Doe",
  },
  computed: {
    fullName: function () {
      return this.firstName + " " + this.lastName;
    },
  },
});

计算属性的多样性

计算属性不仅限于简单的字符串拼接，它们可以用于执行任何类型的计算，包括对象属性的读取、复杂表达式的计算等。

计算属性的数组过滤

computed: {
  filteredList: function () {
    return this.items.filter(item => item.isVisible);
  }
}

计算属性的复杂表达式

computed: {
  priceWithTax: function () {
    return this.itemPrice * 1.05; // 假设税率为5%
  }
}

计算属性 vs 方法

  • 计算属性是惰性的，只有当依赖发生变化时才会重新计算。它们适用于不需要进行复杂逻辑处理的场合。
  • 方法（methods）每次调用都会执行，适合进行逻辑处理，如 API 请求或异步操作。

计算属性的实例演示

假设我们有一个TodoList组件，我们需要计算已完成的任务数量：

computed: {
  completedTodosCount: function () {
    return this.todos.filter(todo => todo.completed).length;
  }
}

侦听器（Watchers）

侦听器用于观察和响应 Vue 实例上的数据变化。

创建侦听器

new Vue({
  data: {
    username: "",
  },
  watch: {
    username: function (newVal, oldVal) {
      console.log(`Username changed from ${oldVal} to ${newVal}`);
    },
  },
});

侦听器的高级用法

侦听器可以接受选项，如deep、immediate等，以实现更复杂的观察逻辑。

侦听器的深度观察

watch: {
  'user.name': {
    handler: function (newVal, oldVal) {
      // 深度观察user对象中的name属性
    },
    deep: true
  }
}

侦听器的立即执行

watch: {
  searchQuery: {
    handler: 'search',
    immediate: true
  }
},
methods: {
  search: function () {
    // 这个方法将在watcher被创建后立即执行
  }
}

侦听器的实例演示

假设我们需要在用户输入搜索关键词后，从服务器获取搜索结果：

watch: {
  searchQuery: function (newVal, oldVal) {
    if (newVal === oldVal) return;
    this.fetchSearchResults(newVal);
  }
},
methods: {
  fetchSearchResults: function (query) {
    // 发起请求获取搜索结果
  }
}

生命周期钩子函数

Vue 实例的生命周期钩子允许你在实例的生命周期过程中执行代码。

生命周期钩子详解

每个生命周期钩子在 Vue 实例的不同阶段调用，下面是每个钩子的详细说明和示例代码：

  • beforeCreate: 在实例初始化之后，数据观测和事件/侦听器的配置之前被调用。

    new Vue({
  beforeCreate: function () {
    console.log("实例尚未创建");
  },
});

  • created: 实例已经创建完成，但是el属性还没有被处理，data和methods已经可以访问。

    new Vue({
  created: function () {
    console.log("实例已创建，但尚未挂载到DOM");
  },
});

  • beforeMount: 在挂载开始之前被调用，相关的el已经被创建，但是尚未开始渲染过程。

    new Vue({
  el: "#app",
  beforeMount: function () {
    console.log("挂载过程即将开始");
  },
});

  • mounted: 实例已经挂载到 DOM 上，data已经渲染到 DOM，此时可以访问到 DOM 元素。

    new Vue({
  el: "#app",
  mounted: function () {
    console.log("实例已经挂载到DOM");
  },
});

  • beforeUpdate: 数据更新时，虚拟 DOM 重新渲染和打补丁之前调用。

    new Vue({
  data: {
    message: "Hello",
  },
  beforeUpdate: function () {
    console.log("数据更新前");
  },
});

  • updated: 数据更新后，虚拟 DOM 重新渲染和打补丁后调用。

    new Vue({
  data: {
    message: "Hello",
  },
  updated: function () {
    console.log("数据更新完成");
  },
});

  • beforeDestroy: 实例销毁之前调用，实例仍然完全可用。

    new Vue({
  beforeDestroy: function () {
    console.log("实例销毁前");
  },
});

  • destroyed: 实例销毁后调用，data和methods都不可访问。

    new Vue({
  destroyed: function () {
    console.log("实例已经销毁");
  },
});

结语

本文详细介绍了 Vue 的计算属性和侦听器，以及生命周期钩子函数。计算属性提供了一种声明性描述一个值是如何根据组件中其他数据计算得来的方式，侦听器允许我们对数据的变化做出响应，而生命周期钩子函数则让我们可以在 Vue 实例的不同阶段执行特定的逻辑。在下一篇文章中，我们将探讨 Vue 的路由管理，包括 Vue Router 的配置和使用。

互动交流

欢迎在文章下方留言，分享学习 Vue 计算属性、侦听器和生命周期钩子函数的心得体会，或提出在学习过程中遇到的问题。我们将在后续的文章中提供解答和指导。

注意：本文内容会根据 Vue.js 的最新版本进行更新，确保提供的信息是最新的。同时，为了提高文章的可读性，我们使用了清晰的代码块和图表。希望本文能够帮助你深入理解 Vue 的计算属性、侦听器和生命周期钩子函数，为你的 Vue 学习之旅添砖加瓦。

avatar
文章
阅读
粉丝