关于vue.extend 里的initComputed作用

Question

老师您好, 在生成vue.extend的过程中，执行的一个方法initComputed, 看方法的作用是将options里面的computed的属性代理到组件的实例上,但是我发现在_init的过程中也触发了initState里面的initComputed方法执行,两个方法都将computed代理到了实例上,后来通过注释了vue.extend 里面的initComputed 发现并不影响代码的正常运行并且功能也没问题,所以想问问这段代码是还有其他作用么? 版本的2.6.11的

	function initState (vm) {
	  vm._watchers = [];
	  var opts = vm.$options;
	  if (opts.props) { initProps(vm, opts.props); }
	  if (opts.methods) { initMethods(vm, opts.methods); }
	  if (opts.data) {
	    initData(vm);
	  } else {
	    observe(vm._data = {}, true /* asRootData */);
	  }
	  if (opts.computed) {
		  // 这是Vue里面的 initComputed
	    initComputed(vm, opts.computed); 
	  }
	  if (opts.watch && opts.watch !== nativeWatch) {
	    initWatch(vm, opts.watch);
	  }
	}

if (Sub.options.computed) {
     initComputed$1(Sub);
  }
  //这是vue.extend里面的initComputed
function initComputed$1 (Comp) {
  var computed = Comp.options.computed;
  for (var key in computed) {
    defineComputed(Comp.prototype, key, computed[key]);
  }
}

Answer 1

ustbhuangyi 2020-11-19 09:58:06

其实这个注释已经说的很清楚了，在 extend 阶段做一次就可以避免在每个实例的初始化阶段做了。

• 提问者 Doctor_Rui #1

  看了下源码,在vue.extend里面initComputed 先挂载在vueComponent的构造器上, 但是这个时候依赖的值都是undefined,所以Computed的值都是undefined, 然后再_init的过程中再次initComputed,直接new 一个watcher的时候默认求值一次,获取到的用户设置的getter获取到了正确的值, 就不会执行再次挂载的过程了吧

• ustbhuangyi 回复 提问者 Doctor_Rui #2

  initComputed 的过程实际上就是执行 defineComputed 来定义计算属性的 getter 和 setter，而 getter 和 setter 内部的实际执行过程是在组件使用的时候，比如渲染的时候访问到

• 提问者 Doctor_Rui 回复 ustbhuangyi #3

  谢谢老师, 老师讨论群号是多少啊，不知道在哪加群

点开查看后面7条评论