computed 属性挂载到实例

Question

在扩展组件构造器时，计算属性添加到构造器原型上，不明白computed 属性什么时候挂载到vm实例上的？
在initState->initComputed中判断如果实例上有key就不会继续执行defineComputed方法的，不解？

Answer 1

donggua_nor 2021-08-20 14:53:25

子组件构造函数是走 Vue.extend 实现的

位于 vdom/create-component.js => createComponent 中 Ctor = baseCtor.extend(Ctor)

如果在vue中使用过typeScript，也会显式使用 Vue extend，该函数位于 global-api/extend.js

在 Vue.extend 中继承了 Vue.prototype._init 方法(位于 instance/init.js )，但没有执行。当前 Sub 是个构造函数

在这里检查组件computed，并在组件原型 `Sub.prototype` 上定义计算属性

当后续实例化组件Sub时，才会走到 defineComputed 
这时原型上已经有了，我们可以通过原型链读取到对应的computed key，就不会重复执行

简单将注释翻译如下: （位于 instance/state.js ）

Answer 2

开心阿桶暮 2021-08-19 16:34:56

这个地方的 !(key in vm) 是判断是否和当前实例属性的其他变量名(例如data中和computed中声明了同样的变量名)冲突的，所以开发时只要写的正确，必定进入difineComputed的，所以你问题里说的 key就不会继续执行defineComputed方法,  只有你写错了，才不会继续执行，正常就是往defineComputed这里面走的

• 提问者 菜菜木子 #1

  谢谢你的解答，但是好像不太正确，建议再多看看源码

Answer 3

ustbhuangyi 2021-08-16 13:57:54

在 global-api/extend.js 中，在执行 extend API 创建子组件构造器的时候，会执行 initComputed 函数，它会在组件原型上义。

• 提问者 菜菜木子 #1

  这就是不理解的地方，在执行 extend API 创建子组件构造器的时候，会执行 initComputed 函数，它会在组件原型上义。组件实例化时，判读key in vm，原型上有就不会再执行defineComputed，那么实例上的计算属性什么时候挂载上去的

• ustbhuangyi 回复 提问者 菜菜木子 #2

  举个例子
  
  function A() {
  }
  Object.defineProperty(A.prototype, 'b', {
    get() {},
    set() {}
  })
  const a = new A()
  'b' in a 返回 true

• 提问者 菜菜木子 回复 ustbhuangyi #3

  构造器添加属性只有配置了get和set方法，new 出来的实例也具有同样的属性了，对吧

点开查看后面1条评论

Answer 4

ustbhuangyi 2021-08-16 11:45:20

initState -> initComputed -> defineComputed 
defineComputed 的最后，执行 Object.defineProperty 

• 提问者 菜菜木子 #1

  在initState->initComputed中判断如果实例上有key就不会继续执行defineComputed方法的，不解？（老师，回复不能贴图，问答有修改）