Blog
Blog copied to clipboard
berwin
《深入浅出Vue.js》讨论区
关于本书的任何意见和建议都可以在这里讨论~
可以在这里免费阅读本书第九章：http://www.ituring.com.cn/book/tupubarticle/25715
书中的代码：https://github.com/berwin/easy-to-understand-Vue.js-examples
也可以加入本书的微信讨论群（群已满100人，添加微信 Berwin1995 我拉进群，加我好友时建议说明自己是Vue.js读者）。
书中第11页，这是不得恢复先入栈的target？
vue.js源码/src/core/observer/dep.js#L58-L66 和/src/core/observer/watcher.js#L119是通过栈来做的。如果不恢复先入栈的target，就不能实现深层次的响应了
get () {
const preTarget = window.target
window.target = this
const value = this.getter.call(this.vm, this.vm)
window.target = preTarget
return value
}
@cytle 对的，Vue.js的源码是一个栈。但书里并不是100%还原源码，因为真实的Vue.js有很多用于处理细节和bug的代码，这些代码并不利于初学者学习，会干扰读者理解主要思想。书里用 window.target 来实现在原理与思想上是一样的，而且理解成本更低。
举个例子：假设我们的目标是打印log，初学者只需要理解console.log能打印就行了，但真实项目代码中可能为了兼容，会写一些额外的代码来兼容 console.log 语法。但其实对于学习来说没必要关注兼容问题，他只需要理解这里的作用是打印log就行了。😁😁
@cytle 对的，Vue.js的源码是一个栈。但书里并不是100%还原源码，因为真实的Vue.js有很多用于处理细节和bug的代码，这些代码并不利于初学者学习，会干扰读者理解主要思想。书里用 window.target 来实现在原理与思想上是一样的，而且理解成本更低。
举个例子：假设我们的目标是打印log，初学者只需要理解console.log能打印就行了，但真实项目代码中可能为了兼容，会写一些额外的代码来兼容 console.log 语法。但其实对于学习来说没必要关注兼容问题，他只需要理解这里的作用是打印log就行了。😁😁
嗯，我提出这个问题是看到这里时候发现和我之前理解的有冲突，这里不处理target总觉得怪怪的😁。不过你说的很有道理，能够理解
为什么Dep的notify函数里const sub = this.subs.slice(), 要这样多一步呢？ 不直接用const sub = this.subs，这样有什么特别用意吗？
为什么Dep的notify函数里const sub = this.subs.slice(), 要这样多一步呢？ 不直接用const sub = this.subs，这样有什么特别用意吗？
表示拷贝一份subs，如果没理解错的话，是为了稳定subs列表，subs[i].update()会触发Watcher.get()，重新计算，这过程中可能会增加subs。
@cytle subs好像不会增加，因为每个属性对应一个Dep, 然后每次改变就往对应的Dep的subs塞一个watcher。但是后来我发现我更改值的次数多了，就会塞更多的watcher，然后没事通知Dep的时候就会重复触发多次watcher,这样显然不对，所以我改成this.subs.slice(this.subs.length - 1)让它每次都值通知最新的watcher。源码也是写this.subs.slice()，所以我就很疑惑。
@cytle subs好像不会增加，因为每个属性对应一个Dep, 然后每次改变就往对应的Dep的subs塞一个watcher。但是后来我发现我更改值的次数多了，就会塞更多的watcher，然后没事通知Dep的时候就会重复触发多次watcher,这样显然不对，所以我改成this.subs.slice(this.subs.length - 1)让它每次都值通知最新的watcher。源码也是写this.subs.slice()，所以我就很疑惑。
- 比如计算属性，计算属性里面有
if判断，有可能Dep会增加sub - 因为书里的实现没有去重，vue源码先判断是否已经添加sub。https://github.com/vuejs/vue/blob/dev/src/core/observer/watcher.js#L133
勘误~ 书中第59页，6.3.6的那个代码是错的，第三次印刷已经修复该错误。正确的代码是：
{
functionalContext: {...},
functionalOptions: {...},
context: {...},
data: {...}
tag: "div",
...
}
你好 请问第四章 35页提到如果watcher的expOrFn参数是一个表达式的话,肯定只收集一个Dep,
但是如果表达式是x.y.z ,当watch中调用data.x.y.z时 ,x,y,z每一个对应Object.defineProperty中get都会分别被触发,这样他们三个的dep实例不是都会被当前watch实例收集吗??这样watch不就收集了3个dep实例吗
博文好,第59页的组件节点,componentOptions属性包含了tag等信息,但是下面的tag是写在和componentOptions同级的位置呀. 不是应该如下这样吗 { componentOptions:{ tag:"vue-component-1-child" } } 是我理解错了吗?
@Boboboer 哈哈哈哈，这块确实有点没写清楚，因为有两个tag。例如：同级的tag叫："vue-component-1-child"，那么componentOptions里面的tag就叫“child" 😂
@cytle 对的，Vue.js的源码是一个栈。但书里并不是100%还原源码，因为真实的Vue.js有很多用于处理细节和bug的代码，这些代码并不利于初学者学习，会干扰读者理解主要思想。书里用 window.target 来实现在原理与思想上是一样的，而且理解成本更低。
举个例子：假设我们的目标是打印log，初学者只需要理解console.log能打印就行了，但真实项目代码中可能为了兼容，会写一些额外的代码来兼容 console.log 语法。但其实对于学习来说没必要关注兼容问题，他只需要理解这里的作用是打印log就行了。😁😁
第11页的第12行对于理解造成了一些困扰：我想了一段时间为什么
let value = this.getter.call(this.vm, this.vm)
不是
let value = this.getter(this.vm)或者this.getter.call(null, this.vm).
后来明白，this.getter.call(this.vm, this.vm)中的第一个参数是为自定义getter服务的。调用this.$watch(...)时，第一个参数也可以是一个用于取值的函数，此时需要绑定this到vm（而不是Watcher）。
建议增加一些注释，或者调整一下写法。望采纳
书本第40页4.2.3，书本前面讲到过像this.list[0] = 2这种操作Vue是无法检测到的，那么调用observerArray()循环检测数组中的每一项时，当数组值不是Object而是Number时，调用this.walk(value)方法检测到不是Object就不会进行下一步监听，那么4.2.3例子中直接使用target[key] = val 不是不会触发视图更新？而且vm.$set(list,0,'2')这种方式按该例子看来不是等同于 this.list[0] = 2么？
这阵子刚阅读完这本书，有一个小疑问，思来想去没想通。就是关于：本书第15页上说的，外界通过Watcher来读取数据，从而触发getter来收集依赖。 很好奇外界是怎么通过Watcher来读取数据的。可是又没想不通。望得到大佬的指点。
看来你漏掉了一些细节，vm. _render（）时候会依次访问到依赖的所有数据，触发getter
---原始邮件--- 发件人: "shisanOnly"<[email protected]> 发送时间: 2019年8月28日(星期三) 晚上9:14 收件人: "berwin/Blog"<[email protected]>; 抄送: "Mention"<[email protected]>;"XYH1996"<[email protected]>; 主题: Re: [berwin/Blog] 《深入浅出Vue.js》讨论区 (#34)
这阵子刚阅读完这本书，有一个小疑问，思来想去没想通。就是关于：本书第15页上说的，外界通过Watcher来读取数据，从而触发getter来收集依赖。 很好奇外界是怎么通过Watcher来读取数据的。可是又没想不通。望得到大佬的指点。
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
@shisanOnly 外界有很多种途径可以通过Watcher触发getter，最常见的就是 new Watcher()的时候。在用户角度，像vm.$watch就可以让Watcher触发getter~
因为Vue把细粒度调整到中级，状态变化后只会通知到组件，组件内部在使用虚拟DOM进行对比。是不是可以理解为每个Vue实例是不是都只会有一个依赖，也就是只有一个Watcher。