vue的watcher是什么结构
-
Vue的watcher是一个用来观察和响应数据变化的结构。它是Vue框架中的核心概念之一，用于实现数据的响应式更新。
在Vue中，每个组件都有一个对应的watcher实例。当一个组件中的数据发生变化时，watcher会监听到这个变化，并立即“触发”相应的响应函数。
Watcher的主要作用是在侦听到数据变化时执行回调函数。它会在组件实例化的过程中被创建，并绑定到对应的数据上。当数据发生变化时，watcher会触发回调函数执行，从而更新视图。
Watcher的结构可以简单地分为三个部分：
-
Dep（依赖）：Dep是一个与数据相关的依赖管理器，用来管理watcher的依赖关系。每个数据都会对应一个Dep实例，用来保存依赖于该数据的所有watcher。当数据变化时，Dep会通知所有依赖该数据的watcher执行更新操作。
-
Getter（读取器）：Getter是一个函数，负责获取数据的值。当Watcher实例化时，会调用Getter函数获取数据的初始值，并将Watcher与数据建立关联。每当数据被读取时（在模板中使用或触发计算属性等情况下），Getter都会被调用，并将Watcher添加到相关的Dep中。
-
Watcher（观察者）：Watcher是一个观察者对象，它负责监听数据的变化，并执行相应的回调函数。Watcher可以分为两种类型，一种是渲染Watcher，用来观察数据变化并更新视图，另一种是计算属性Watcher，用来观察计算属性的变化并缓存计算结果。当数据发生变化时，Watcher会被触发，并执行回调函数。
总结起来，Vue的watcher是一个用来观察和响应数据变化的结构，它通过Dep、Getter和Watcher三个部分实现了数据的响应式更新机制。在开发中，我们可以利用Watcher来监听数据的变化，执行相应的操作，从而实现数据驱动的视图更新。
1年前 0条评论 -
-
Vue的watcher是一个观察者模式的实现，用于监听Vue实例数据的变化并执行相应的回调函数。它被用于在Vue中监测数据的变化，并在数据变化时执行一些逻辑操作。
-
Watcher的创建：Watcher实例是在Vue初始化时创建的，它会在实例化过程中自动创建和挂载到对应的Vue实例上。
-
Watcher的类型：Vue的Watcher有三种类型：get、computed和watch。其中，get是默认类型，在Vue实例初始化时会创建一些默认的Watcher用于收集依赖。computed类型的Watcher用于计算属性的依赖收集和更新。watch类型的Watcher用于监听具体的数据变化。
-
Watcher侦测数据：Watcher通过依赖收集的方式来侦测数据的变化，当数据发生变化时，Watcher会触发相应的回调函数。Vue通过数据劫持和代理的方式来实现数据的依赖收集，当数据被访问时，Watcher会将自身添加到依赖列表中，当数据变化时，Watcher会触发相应的回调函数。
-
Watcher的更新机制：当数据发生变化时，Watcher会将变化的数据和上一次的数据进行比较，如果数据发生了变化，Watcher会执行回调函数。在Vue中，数据的变化实际上是通过setter方法来触发的，setter方法会通知所有依赖的Watcher进行更新。
-
Watcher的销毁：当Watcher不再需要的时候，需要手动将其销毁。在Vue实例销毁时，它会自动销毁所有的Watcher，但是我们也可以通过手动调用Watcher实例的destroy方法来销毁Watcher。
总结：Watcher是Vue中用于侦测数据变化和执行相应回调函数的结构。它通过依赖收集来监听数据变化，并在数据变化时触发相应的回调函数。Watcher有三种类型：get、computed和watch，分别用于处理不同的场景。在Vue实例销毁时，Watcher会自动销毁，但也可以手动调用destroy方法进行销毁。
1年前 0条评论 -
-
Vue.js的Watcher是一种结构，它用于监视Vue实例中的数据变化，并在数据变化时执行一些操作。Watcher是Vue中的核心概念之一，它负责监听数据的变化，然后更新相应的视图。
Watcher的结构可以分为三个部分：依赖收集、数据变化响应和更新视图。
-
依赖收集
Watcher首先会进行依赖收集，以确定在数据变化时需要触发哪些操作。当Vue实例中的数据被访问时，会触发数据的getter方法，并将当前的Watcher添加到Dep（依赖）对象中。Dep对象是一个可观察对象，它保存了所有依赖于该数据的Watcher。 -
数据变化响应
当数据发生变化时，会触发数据的setter方法。在setter方法中，会调用Dep对象的notify方法通知所有依赖该数据的Watcher进行更新操作。这样就能确保在数据发生变化时，与该数据相关的视图及时更新。 -
更新视图
Watcher在接收到通知后，会执行自身的update方法进行视图的更新操作。Watcher会调用Vue实例中的渲染函数，重新生成虚拟DOM，并对比新旧虚拟DOM，找出需要更新的部分，最终将变化的部分更新到页面上。
Watcher的创建与Vue实例中的数据绑定紧密相关。Vue使用Object.defineProperty对数据进行劫持，当访问数据时，会触发getter方法，进而将当前Watcher添加到Dep对象中。当数据发生变化时，会触发setter方法，进而触发Dep对象的notify方法，通知所有相关的Watcher进行更新。
总结来说，Watcher是Vue中的核心结构之一，它负责监听数据的变化并更新相关的视图。Watcher通过依赖收集确定需要观察的数据及其相关的Watcher，在数据变化时进行响应，并通过更新视图来实现数据与视图的同步。
1年前 0条评论 -
