Vue.js中的$手表使用方法

这两天学习了Vue.js中的$手表这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

开源代码库源码

观察者，观察者，虚拟机可谓某视频剪辑软件中比较重要的部分，检测数据变动后视图更新的重要环节。下面我们来看看如何实现一个简单的$手表功能，当然某视频剪辑软件中使用了很多优化手段，在本文中暂不一一讨论。

例子：

//创建VM let VM=new Vue({ data : ' a ' })//键路径虚拟机$watch('a.b.c '，function () { //做点什么})先阐明在这个演示以及某视频剪辑软件中，它们的关系：

伏特计调用$手表后，首先调用观察函数创建观察者实例观察数据观察者又创建副，副用来维护订阅者。然后创建看守人实例提供更新函数。一旦数据变动，就层层执行回调函数。

观察者和观察

递归调用观察函数创建观察员。在创建观察者的过程中，使用Object.defineProperty()函数为其添加预备开始函数，并创建Dep实例。

导出函数观察(val) { if(！val | |的类型！=='object') { return }返回新的观察者(val)函数定义者活动(对象、键、值){ var Dep=new Dep()(var property=object)。getowntpropertysdescriptor(obj，key) //是否允许修改if(属性。可配置===false){ return }//获取定义好的预备开始函数var getter=property属性。get var setter=property属性。设置var childOb=observe(val)对象。definepreproperty(obj，key，{ enumerable: true，configurable: true，get: ()={ var value=getter？getter.call(obj) : val //说明是看守人初始化时获取的，就添加订阅者if(dep。目标){ dep。depend()} if(childOb){ childOb。离开depend()}//if isArray做一些.}返回值}，设置：(NewVal)={ var value=getter？吸气器。调用(obj): VaL if(value===NewVaL){ return } if(setter){ setter。call(obj，NewVal)} else { val=NewVal } child ob=observe(NewVal)dep。notify()})你可能会疑问副目标是个什么鬼？

答案是：观察者，我们接下来看

Dep

导出默认函数Dep () { this.subs=[]}//就是你！~Dep.target=null //添加订阅者离开原型。addsub=function(sub){ this。潜艇。推送(子)}//添加依赖离开原型。Dep=function(){ Dep。目标。addDep(this)}//通知订阅者：要更新啦~ dep。原型。notify=function(){ this。潜艇。foreach(sub=sub。update())} Watcher

为了给每个数据添加订阅者，我们想到的办法是在数据的得到函数中，但是得到函数会调用很多次呀~。 肿么办？那就给Dep添加个参数目标

导出默认函数观察者(vm，expOrFn，CB){这个。CB=CB这个。VM=VM这个。Expo rfn=Expo rfn这个。值=这个。get()} Watcher。原型。get=function(){ Dep。target=这个常量值=这个。虚拟机。_ data[this。Expo rfn]//此时目标有值，此时执行到了上面的定义活动函数中得到函数。就添加订阅者Dep.target=null //为了不重复添加就设置为空返回值}Vue实例

在某视频剪辑软件实例做得最多的事情就是初始化国家，添加函数等等。

//Vue实例导出默认功能Vue(选项){这个.$options=options this ._initState()}//初始化州政府。原型。_ initState=function(){ 0让数据=这个._数据=这个.$选项。数据对象。键(数据)。forEach(键=这个._proxy(key)) observe(data，this)}//$watch函数哦，vue。原型。$ watch=function(expOrFn，Fn，options) { new Watcher(this，expOrFn，fn)}总结

至此，我们已经实现了一个简单的$手表函数，Object.defineProperty()函数可谓是举足轻重，因此不支持该函数的浏览器，Vue均不支持。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。