笔记大全

Vue3侦听器watch的实现原理是什么

更新时间：2023-12-29

前言

Vue3中新增了Composition API，提供了许多新的特性和功能。其中，侦听器(watch)是一个非常重要的功能，用于在数据变化时执行相应的操作。本文将介绍Vue3侦听器的实现原理。

Vue3侦听器的基本用法

在Vue3中，可以使用`watch`函数来创建一个侦听器。基本的用法如下：

import { watch } from 'vue';

watch(source, callback, options);

`source`参数指定要侦听的数据源，可以是一个响应式的数据对象、一个计算属性或一个函数。`callback`参数是一个回调函数，用于在`source`变化时执行特定的操作。`options`参数是一个可选对象，用于配置侦听器的行为，例如设置`immediate`为`true`来立即执行一次回调函数。

Vue3侦听器的实现原理

Vue3的侦听器实现原理主要涉及了Proxy和effect两个关键点。

Proxy

在Vue3中，侦听器使用了ES6的Proxy对象来监听数据的变化。Proxy是一个在目标对象之前架设一个拦截层，可以拦截目标对象的读取和写入操作。Vue3通过使用Proxy对象来拦截对数据的访问，从而实现数据的侦听。

const data = { count: 0 };
const proxy = new Proxy(data, {
  get(target, key) {
    console.log('读取属性');
    return target[key];
  },
  set(target, key, value) {
    console.log('设置属性');
    target[key] = value;
  }
});

proxy.count; // 读取属性，并返回0
proxy.count = 1; // 设置属性，并将data中的count改为1

在上述代码中，通过Proxy对象对data进行了拦截。在读取属性时，会输出"读取属性"，并返回目标对象的对应属性值。在设置属性时，会输出"设置属性"，并将目标对象的对应属性值改为新的值。

effect

在Vue3中，effect函数用于创建一个响应式的副作用。副作用可以是对侦听到的数据变化做出的响应操作。

import { reactive, effect } from 'vue';

const state = reactive({ count: 0 });

effect(() => {
  console.log('副作用函数执行', state.count);
});

在上述代码中，effect函数接受一个回调函数作为参数，并在回调函数中执行特定的操作。当回调函数中依赖的响应式数据发生改变时，effect函数会重新执行回调函数。

总结

Vue3的侦听器基于Proxy和effect这两个关键点实现。通过Proxy对象拦截数据的读取和写入操作，从而实现对数据的侦听。而effect函数则用于创建响应式的副作用，当依赖的数据发生变化时，执行对应的回调函数。这种基于Proxy和effect的实现机制，使得Vue3的侦听器功能更加强大和灵活。

c语言编程笔录