DMQ / mvvm

剖析vue实现原理,自己动手实现mvvm

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

作者,你好。想请教一下关于Compile里面的_setVMVal()

HARDCOREAJ opened this issue · comments

//非最后一个key,更新val的值
if (i < exp.length - 1) {
val = val[k]
} else {
val[k] = value
}
这里没看懂为什么要加上这个条件,什么原因造成不可以直接val[k] = value,可以举个例子吗?

非常感谢!@DMQ

作者,你好。我这边还有问题也想请教你:

我这边明白当Compile解析模板指令的时候(如v-text='content' v-bind: click='doSomeThing' )
在Watcher实例化的时候:exp参数便是'content' 'doSomeThing' ,按道理来说exp都是字符串。为什么要

问题1:为何要在Watcher函数里面做以下判断?
if (typeof expOrFn === 'function') {
this.getter = expOrFn;
} else {
this.getter = this.parseGetter(expOrFn)
}

问题2:在Watcher的get方法里,为什么不像思路整理里面写的那样,直接通过var value=this.vm[exp]触发属性的getter?你的写法是value = this.getter.call(this.vm, this.vm),第一个参数this.vm能理解,为什么第二个参数也是this.vm

commented

//非最后一个key,更新val的值
if (i < exp.length - 1) {
val = val[k]
} else {
val[k] = value
}
这里没看懂为什么要加上这个条件,什么原因造成不可以直接val[k] = value,可以举个例子吗?

非常感谢!@DMQ

绑定的是多层级属性的场景,如:

data: {
  child: {
    child: {
      someStr: 'xxx'
    }
  }
}

<input v-model="child.child.someStr"></input>
commented

作者,你好。我这边还有问题也想请教你:

我这边明白当Compile解析模板指令的时候(如v-text='content' v-bind: click='doSomeThing' )
在Watcher实例化的时候:exp参数便是'content' 'doSomeThing' ,按道理来说exp都是字符串。为什么要

问题1:为何要在Watcher函数里面做以下判断?
if (typeof expOrFn === 'function') {
this.getter = expOrFn;
} else {
this.getter = this.parseGetter(expOrFn)
}

问题2:在Watcher的get方法里,为什么不像思路整理里面写的那样,直接通过var value=this.vm[exp]触发属性的getter?你的写法是value = this.getter.call(this.vm, this.vm),第一个参数this.vm能理解,为什么第二个参数也是this.vm

问题1:
watcher里面对属性的监听,不局限于普通属性,还会兼容function类型的属性,如:computed 属性

问题2
因为针对不是function类型的属性,生成的getter,取值的时候需要从vm实例的‘根’开始取值,所以把vm传进去了,源码:https://github.com/DMQ/mvvm/blob/master/js/watcher.js#L60 这里返回函数接收的obj就是传进来的this.vm

当然这里不是必须得这么写,可以改一下,直接从this取值也是可以的