《深入浅出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",
  ...
}

[CMS2019]

你好 请问第四章 35页提到如果watcher的expOrFn参数是一个表达式的话,肯定只收集一个Dep,
但是如果表达式是x.y.z ,当watch中调用data.x.y.z时 ,x,y,z每一个对应Object.defineProperty中get都会分别被触发,这样他们三个的dep实例不是都会被当前watch实例收集吗??这样watch不就收集了3个dep实例吗

[berwin]

@CMS2019 对哒~ 是这样的~ 你可以写个demo测一下~

[CMS2019]

@berwin 你好 ,刚刚测了一下确实会收集 x,y,z 三个依赖到一个watch中. 谢谢😆

[Boboboer]

博文好,第59页的组件节点,componentOptions属性包含了tag等信息,但是下面的tag是写在和componentOptions同级的位置呀.
不是应该如下这样吗
{
componentOptions:{
tag:"vue-component-1-child"
}
}
是我理解错了吗?

[berwin]

@Boboboer 哈哈哈哈，这块确实有点没写清楚，因为有两个tag。例如：同级的tag叫："vue-component-1-child"，那么componentOptions里面的tag就叫“child" 😂

[nibihzoay]

为什么不出pdf版本啊

[berwin]

@nibihzoay 这个都是出版社规定哒，我也不知道为啥没有pdf版，哈哈哈哈~

[ghost]

@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）。

建议增加一些注释，或者调整一下写法。望采纳

[shakerjim]

第九页中notify()的subs[i].update()是不是 watcher的update（）

[JJoinIn]

从1.2直接跳到3.4，这是怎么回事？看的一愣一愣的。

[berwin]

@JJoinIn 这是出版社装订的问题，一般是极个别现象，昨天微信上要了您的收获地址，现在已经免费给您发了一本新书在路上，注意查收噢~~

[XYH1996]

书本第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么？

[berwin]

@XYH1996 https://github.com/berwin/Blog/issues/41#issuecomment-513837483

[melon95]

这阵子刚阅读完这本书，有一个小疑问，思来想去没想通。就是关于：本书第15页上说的，外界通过Watcher来读取数据，从而触发getter来收集依赖。
很好奇外界是怎么通过Watcher来读取数据的。可是又没想不通。望得到大佬的指点。

[XYH1996]

看来你漏掉了一些细节，vm. _render（）时候会依次访问到依赖的所有数据，触发getter

…

---原始邮件--- 发件人: "shisanOnly"<notifications@github.com&gt; 发送时间: 2019年8月28日(星期三) 晚上9:14 收件人: "berwin/Blog"<Blog@noreply.github.com&gt;; 抄送: "Mention"<mention@noreply.github.com&gt;;"XYH1996"<994764998@qq.com&gt;; 主题: 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.

[wenye123]

书里计算属性的实现方式提了两种，但是vue的最新源码并没有采用第二种方式诶。我只有在v2.5.17-beta.0发现过，为啥没合并呢

[kevin2y]

建议把29页的“第一个”改为“任一个”，我就误以为只有第一个会这样，还跑了很多次的代码，发现所有都不行。

[berwin]

@NLRX-WJC 向 《深入浅出Vue.js》 致敬为什么在电子书中一个字都没提。。。。 😑😑

真正的致敬应该在电纸书最开始就说明，本电子书中的内容参考某某书以及某某资料再结合自己的学习和理解最终产出不是嘛？

[wenye123]

@NLRX-WJC 链接不知道为啥打开404，不过楼主书还得卖呢，你直接贡献开源了也不好吧

[berwin]

@NLRX-WJC 主要是我这本书只有”人民邮电出版社“有版权，我自己也不能拿去其他平台恰饭。你的电子书我看超过一半的内容都是来自我书中，确实会有版权问题。

如果以学习为目的我建议改成私有仓库自己学习或复习用，而以笔记的名义公开出来恰饭感觉有点不妥。 🤔

[NLRX-WJC]

@berwin 好的，感谢大佬提醒，我去修改

[zhenzhenChange]

return了也就不执行啦

[curiosity-hyf]

书中第106页，27行的注释应该是 "判断该标签是否存在闭合" 吧，这里应该不管是自闭合还是非自闭合，if 都会判断 true
"判断该标签是否是自闭合标签" 应该是在 handleStartTag 中用来确定是否入栈的

if (!unary) {
  stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end });
  lastTag = tagName;
}

[zengkan0703]

书中第 26 页 3.10 【侦测数组中元素变化】这一节的示例代码好像缺了一点，如图示的部分，缺少了「拦截器方法挂载到数组属性上」这一步，估计是漏掉了。

[alamhubb]

您好，还能进群吗

[foreverwang]

本书第11页， Watcher类的update 方法，触发了getter, 又会添加依赖到数据，这样导致每触发一次数据更新就重复添加一次依赖，这样有问题吧

[Leo-Shaoqiang]

本书第11页， Watcher类的update 方法，触发了getter, 又会添加依赖到数据，这样导致每触发一次数据更新就重复添加一次依赖，这样有问题吧

书上后面介绍 $watch 的原理时（P33-P35）提到了在 Watcher 收集依赖时会添加一个 addDep 方法，该方法就是为了记录自己订阅过哪些 Dep，而在 constructor 中会有一个 new Set（）去重，然后依次来判断是否重复，然后来判断是否要往 Dep 中添加依赖。 具体可看书中介绍。

[ZSI2017]

本书第14章“生命周期”，14.7.4节 初始化computed，最后部分介绍了新版计算属性方案：
对应的pull Requests 地址是：https://github.com/vuejs/vue/pull/7824，
但是几个月后进行了Revert 回退： vuejs/vue@6b1d431

回退的原因： vuejs/vue#8446

所以实际上往后直到最新版本，都没用到书中提到的新版本计算属性方案

[hoodsheng]

微信咋是用户不存在呀，能拉我进去嘛老哥，tianzzq0
我和你一样，hoodsheng

[mengcan555]

p25 页： 因为拦截器是原型方法，所以可以直接通过 this.__ob__来访问Observer实例，这个怎么理解？

[544402029]

大佬，能麻烦拉我进群吗？微信号 l544402029

[whatoeat2night]

求拉微信 wxb_1202

[MrLeihe]

本书第11页， Watcher类的update 方法，触发了getter, 又会添加依赖到数据，这样导致每触发一次数据更新就重复添加一次依赖，这样有问题吧

addDep 时有去重的

[544402029]

可以加一下该书的群吗？

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "berwin/Blog" ***@***.***&gt;; 发送时间:&nbsp;2021年9月4日(星期六) 下午5:15 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [berwin/Blog] 《深入浅出Vue.js》讨论区 (#34) 本书第11页， Watcher类的update 方法，触发了getter, 又会添加依赖到数据，这样导致每触发一次数据更新就重复添加一次依赖，这样有问题吧 addDep 时有去重的 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[zhangshoucheng1]

怎么微信失效了，大佬拉下我，微信19899775109我群里探讨

[hao-888]

可以拉我一下吗，我想加群，微信Luan15715398039

[MTTTM]

出来冒泡了

[maomincoding]

可以拉我一下吗？我想进群，大佬，我的微信：maomin9761

[MinjieChang]

求拉微信 cmj3257

[zhouzhishou123]

dom diff流程图的两个印刷小错误

[ychanmy]

求拉微信ychanmy

[MiJiaCoding]

vuejs读者，能拉我vx吗: Awei1137551712 , 还想问一下淘系招聘的事情。

[RED523]

嗨喽，berwin，有个疑问请教下。
书中 38 页，vm.$set 的返回值是 取消监听函数(unwatch)吗？

应该返回的是 value 吧？

[sunnyAfterSnow]

博文大佬你好，我是深入浅出Vue.js的读者，请拉我进一下微信群，sunnyAfterSnow