【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)专栏

相关推荐
zhougl9969 分钟前
html处理Base文件流
linux·前端·html
花花鱼13 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_16 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript