《深入浅出Vue.js》讨论区

[berwin]

关于本书的任何意见和建议都可以在这里讨论~

可以在这里免费阅读本书第九章：http://www.ituring.com.cn/book/tupubarticle/25715

书中的代码：https://github.com/berwin/easy-to-understand-Vue.js-examples

也可以加入本书的微信讨论群（群已满100人，添加微信 Berwin1995 我拉进群，加我好友时建议说明自己是Vue.js读者）。

[berwin]

书中第192页的图14-1在排版阶段给箭头弄成了双向的箭头，其实是单向的箭头~正确的原图如下

[berwin]

书中第 40 页，单词拼写错误，splice被写成 slice了，少了个字母p。如下所示：

[cytle]

书中第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
  }

[berwin]

@cytle 对的，Vue.js的源码是一个栈。但书里并不是100%还原源码，因为真实的Vue.js有很多用于处理细节和bug的代码，这些代码并不利于初学者学习，会干扰读者理解主要思想。书里用 window.target 来实现在原理与思想上是一样的，而且理解成本更低。

举个例子：假设我们的目标是打印log，初学者只需要理解console.log能打印就行了，但真实项目代码中可能为了兼容，会写一些额外的代码来兼容 console.log 语法。但其实对于学习来说没必要关注兼容问题，他只需要理解这里的作用是打印log就行了。😁😁

[cytle]

@cytle 对的，Vue.js的源码是一个栈。但书里并不是100%还原源码，因为真实的Vue.js有很多用于处理细节和bug的代码，这些代码并不利于初学者学习，会干扰读者理解主要思想。书里用 window.target 来实现在原理与思想上是一样的，而且理解成本更低。

举个例子：假设我们的目标是打印log，初学者只需要理解console.log能打印就行了，但真实项目代码中可能为了兼容，会写一些额外的代码来兼容 console.log 语法。但其实对于学习来说没必要关注兼容问题，他只需要理解这里的作用是打印log就行了。😁😁

嗯，我提出这个问题是看到这里时候发现和我之前理解的有冲突，这里不处理target总觉得怪怪的😁。不过你说的很有道理，能够理解

[NuoHui]

求拉一下微信进vue二维码失效了, 微信号xyzxiaozhongge。@berwin

[lidog]

求拉微信群 lidog000

[front-vb-charcarron]

为什么Dep的notify函数里const sub = this.subs.slice(), 要这样多一步呢？ 不直接用const sub = this.subs，这样有什么特别用意吗？

[cytle]

为什么Dep的notify函数里const sub = this.subs.slice(), 要这样多一步呢？ 不直接用const sub = this.subs，这样有什么特别用意吗？

表示拷贝一份subs，如果没理解错的话，是为了稳定subs列表，subs[i].update()会触发Watcher.get()，重新计算，这过程中可能会增加subs。

[front-vb-charcarron]

@cytle subs好像不会增加，因为每个属性对应一个Dep, 然后每次改变就往对应的Dep的subs塞一个watcher。但是后来我发现我更改值的次数多了，就会塞更多的watcher，然后没事通知Dep的时候就会重复触发多次watcher,这样显然不对，所以我改成this.subs.slice(this.subs.length - 1)让它每次都值通知最新的watcher。源码也是写this.subs.slice()，所以我就很疑惑。

[cytle]

@cytle subs好像不会增加，因为每个属性对应一个Dep, 然后每次改变就往对应的Dep的subs塞一个watcher。但是后来我发现我更改值的次数多了，就会塞更多的watcher，然后没事通知Dep的时候就会重复触发多次watcher,这样显然不对，所以我改成this.subs.slice(this.subs.length - 1)让它每次都值通知最新的watcher。源码也是写this.subs.slice()，所以我就很疑惑。

1. 比如计算属性，计算属性里面有if判断，有可能Dep会增加sub
2. 因为书里的实现没有去重，vue源码先判断是否已经添加sub。https://github.com/vuejs/vue/blob/dev/src/core/observer/watcher.js#L133

[berwin]

勘误~ 书中第59页，6.3.6的那个代码是错的，第三次印刷已经修复该错误。正确的代码是：

{
  functionalContext: {...},
  functionalOptions: {...},
  context: {...},
  data: {...}
  tag: "div",
  ...
}