【Vue】watch使用详解

✨ 专栏介绍

在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。在本专栏中,我们将深入学习Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。无论你是初学者还是有一定经验的开发者,通过学习Vue.js,你将能够构建出令人印象深刻的用户界面,并提升自己在Web开发领域的竞争力。让我们一起开始Vue.js之旅吧!

文章目录


作用

watch是Vue.js提供的一个功能,用于监听数据的变化并执行相应的操作。它可以帮助我们根据数据变化来更新界面或执行其他操作。无论是监视单个属性还是多个属性,都可以通过watch来实现。

实现原理

当我们在Vue.js中使用watch选项来监听属性时,Vue.js会在内部使用了一个叫做Watcher的类来实现。Watcher类是Vue.js响应式系统的核心之一,它负责建立依赖关系并在依赖发生变化时执行回调函数。

具体来说,当我们使用watch选项定义一个属性的监听器时,Vue.js会创建一个Watcher实例,并将该实例与当前组件实例、属性名以及回调函数进行关联。Watcher实例会负责追踪所监听的属性,并在属性发生变化时触发回调函数。

下面是Watcher类的简化版本源码示例

js 复制代码
class Watcher {
  constructor(vm, key, callback) {
    this.vm = vm;
    this.key = key;
    this.callback = callback;
    
    // 在这里将当前Watcher实例设置为全局活动Watcher
    Dep.target = this;
    
    // 触发一次属性的读取操作,建立依赖关系
    this.value = vm[key];
    
    // 清空全局活动Watcher
    Dep.target = null;
  }
  
  update() {
    const oldValue = this.value;
    
    // 重新读取属性值,触发依赖更新
    this.value = this.vm[this.key];
    
    // 调用回调函数,并传递新值和旧值
    this.callback(this.value, oldValue);
  }
}

在上述代码中,我们可以看到Watcher类的基本结构。构造函数接收Vue实例、属性名和回调函数作为参数,并将它们保存在Watcher实例的属性中。在构造函数中,我们将当前Watcher实例设置为全局活动Watcher,然后通过读取属性值的方式触发依赖关系的建立。接着,清空全局活动Watcher,以便后续的依赖关系建立。

当属性发生变化时,Watcher实例的update方法会被调用。在update方法中,我们首先保存旧值,然后重新读取属性值以触发依赖更新。最后,调用回调函数,并传递新值和旧值作为参数。

使用方式

在Vue.js中,我们可以通过以下方式使用watch:

js 复制代码
watch: {
  propertyName: {
    handler: function(newVal, oldVal) {
      // 在属性发生变化时执行的逻辑
    },
    deep: true,
    immediate: true
  }
}

参数介绍

  • handler: 监听属性变化时执行的回调函数。
  • deep: 一个布尔值,用于深度监听对象内部属性的变化。默认情况下,Vue只会监听对象的第一层属性变化。如果需要监听嵌套对象内部属性的变化,需要将deep设置为true。
  • immediate: 一个布尔值,用于在组件初始化时立即执行一次回调函数。默认情况下,Vue会在属性发生变化后才执行回调函数。如果需要在组件初始化时立即执行一次回调函数,可以将immediate设置为true。

上述代码中,我们可以指定一个回调函数、设置是否深度监听以及是否在组件初始化时立即执行回调函数。这样就能够根据具体需求来灵活配置watch。


使用示例

js 复制代码
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

在上述示例中,我们定义了一个计数器组件。当点击"Increment"按钮时,计数器会加一。同时,我们使用watch来监听count属性的变化,并在变化时打印出新值和旧值。

总结

通过本文的介绍,我们了解了Vue.js中的watch功能的作用、实现原理、使用方式以及示例。watch是一个非常有用的功能,可以帮助我们监听数据的变化并执行相应的操作。它基于Vue.js的响应式系统实现,通过依赖追踪技术来监听属性变化。在实际开发中,我们可以根据具体需求配置回调函数、深度监听以及立即执行等参数来灵活使用watch功能。


😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分,它们帮助我们解决了许多常见问题,并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中,我们介绍了所有的前端设计模式,包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式,并将其应用于实际项目中,我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式,写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动和组件化的方式,使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中,我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面,并探索其强大的生态系统,如Vue Router和Vuex、Pinia。通过学习这些内容,你将能够成为一名熟练的Vue.js开发者,并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript(ES6)专栏

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点,是构建现代Web应用程序的重要工具之一。在这个专栏中,我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6(ECMAScript 2015)及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript(ES6)专栏

相关推荐
也无晴也无风雨26 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui