Vue侦测相关api的实现方法

2023-08-23 05:06:04 471

vm.$watch

用法：vm.$watch(expOrFn,callback,[options])，返回值为unwatch是一个函数用来取消观察；下面主要理解options中的两个参数deep和immediate以及unwatch

Vue.prototype.$watch=function(expOrFn,cb,options){
constvm=this
options=options||{}
constwatcher=newWatcher(vm,expOrFn,cb,options)
if(options.immediate){
cb.call(vm,watcher,.value)
}
returnfunctionunwatchFn(){
watcher.teardown()
}
}

immediate

从上面代码中可以看出当immediate为true时，就会直接进行执行回调函数

unwatch

实现方式是：

将被访问到的数据dep收集到watchs实例对象上，通过this.deps存起来
将被访问到的数据dep.id收集到watchs实例对象上，通过this.depIds存起来
最后通过watchs实例对象的teardown进行删除

classWatcher{
constructor(vm,expOrFn,cb){
this.vm=vm
this.deps=[]
this.depIds=newSet()
if(typeofexpOrFn==='function'){
this.getter=expOrFn
}else{
this.getter=parsePath(expOrFn)
}
this.cb=cb
this.value=this.get()
}
....
addDep(dep){
constid=dep.id//参数dep是Dep实例对象
if(!this.depIds.has(id)){//判断是否存在避免重复添加
this.depIds.add(id)
this.deps.push(dep)
dep.addSub(this)//this是依赖
}
}
teardown(){
leti=this.deps.length
while(i--){
this.deps[i].removeSub(this)
}
}
}
letuid=0
classDep{
constructor(){
this.id=uid++
...
}
...
depend(){
if(window.target){
window.target.addDep(this)//将this即当前dep对象加入到watcher对象上
}
}
removeSub(sub){
constindex=this.subs.indexOf(sub)
if(index>-1){
returnthis.subs.splice(index,1)
}
}
}

分析

当执行teardown()时需要循环；因为例如expOrFn=function(){returnthis.name+this.age}，这时会有两个dep分别是name与age分别都加入了watcher依赖(this)，都会加入到this.deps中，所以需要循环将含有依赖的dep都删除其依赖

deep

需要明白的是

deep干啥用的，例如data={arr:[1,2,{b:6]}，当我们只是监听data.arr时，在[1,2,{b:66}]这个数值内部发生变化时，也需要触发，即b=888

怎么做呢？

classWatcher{
constructor(vm,expOrFn,cb,options){
this.vm=vm
this.deps=[]
this.depIds=newSet()
if(typeofexpOrFn==='function'){
this.getter=expOrFn
}else{
this.getter=parsePath(expOrFn)
}
if(options){//取值
this.deep=!!options.deep
}else{
this.deep=false
}
this.cb=cb
this.value=this.get()
}
get(){
window.target=this
letvalue=this.getter.call(vm,vm)
if(this.deep){
traverse(value)
}
window.target=undefined
returnvalue
}
...
}
constseenObjects=newSet()
functiontraverse(val){
_traverse(val,seenObjects)
seenObjects.clear()
}
function_traverse(val,seen){
leti,keys
constisA=Array.isArray(val)
if((!isA&&isObject(val))||Object.isFrozen(val)){//判断val是否是对象或者数组以及是否被冻结
return
}
if(val._ob_){
constdepId=val._ob_.dep.id//可以看前面一篇我们对Observer类添加了this.dep=newDep()，所以能访问其dep.id
if(seen.has(depId)){
return
}
seen.add(depId)
}
if(isA){
i=val.length
while(i--)_traverse(val[i],seen)
}else{
keys=Object.keys(val)
i=keys.length
while(i--)_traverse(val[i],seen)
}
}

分析

window.target=this，寄存依赖
letvalue=this.getter.call(vm,vm)访问当前val，并执行get

的dep.depend()，如果发现val为数组，则将依赖加入到observer的dep中，也就实现了对当前数组的拦截

traverse(value)也就是执行_traverse(val,seenObjects)；核心就是对被Observer的val通过val[i]通过这种操作，间接触发get，将依赖添加到当前数值的dep中，这样也就实现了，当内部数据发生变化，也会循环subs执行依赖的update，从而触发回调；当是数组时，只需进行遍历，看内部是否有Object对象即可，因为在第二步的时候，会对val进行判断是否是数组，变改变七个方法的value，在遍历；所以这边只要是内部数组都会进行拦截操作，添加依赖，即对象{}这种没没添加依赖。
seenObjects.clear()当内部所以类型数据都添加好其依赖后，就清空。
window.target=undefined消除依赖

vm.$set

用法：vm.$set(target,key,value)

作用

对于数组，进行set则是添加新元素，并需要触发依赖更新
对于对象，如果key值存在，则是修改value；不存在，则是添加新元素，需新元素要进行响应式处理，以及触发更新
对于对象本身不是响应式，则直接添加key-value，无需处理

Vue.prototype.$set=function(target,key,val){
if(Array.isArray(target)&&isValidArrayIndex(key)){//是数组并且key有效
target.length=Math.max(target.length,key)//处理key>target.length
target.splice(key,1,val)//添加新元素，并输出依赖更新同时新元素也会进行`Obsever`处理
returnval
}
if(keyintargert&&!(keyinObject.prototype){//能遍历并且是自身key
target[key]=val//触发set，执行依赖更新
returnval
}
constob=target._ob_
if(target.isVue||(ob&&ob.vm.Count){//不是vue实例也不是vue实例的根对象(即不是this.$data跟对象)
//触发警告
return
}
if(!ob){//只添加
target[key]=val
returnval
}
defineReactive(ob.value,key,val)//进行响应式处理
ob.dep.notify()//触发依赖更新
returnvval
}

vm.$delete

用法：vm.$delete(target,key)

作用

对于数组，进行delete则是删除新元素，并需要触发依赖更新
对于对象，如果key值不存在，直接return，存在，删除元素，
对于对象本身不是响应式，则只删除key-value，无需其他处理

Vue.prototype.$delete=function(target,key){
if(Array.isArray(target)&&isValidArrayIndex(key)){
target.splice(key,1)
return
}
constob=target._ob_
if(target.isVue||(ob&&ob.vm.Count){//不是vue实例也不是vue实例的根对象(即不是this.$data跟对象)
//触发警告
return
}
if(!hasOwn(target,key)){
return
}
deletetarget[key]
if(!ob){
return
}
ob.dep.notify()
}

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

Vue侦测相关api的实现方法

热门推荐

随机推荐