vue源码分析 initExtend ---三分一把刀

我是三分一把刀。

上一节看了initMixin源码,这节会弄明白initExtend方法的具体逻辑与实现。


代码内部没有进行操作,只是定义了vue.extend方法,印象中以前vue.extend(componentConfig)注册主键的时候会用到,就是把vue的一些特性继承复制过来。

首先也是如果不是生产环境,会监测组件名称是否有效。

const Sub = function VueComponent (options) { this._init(options)}

这行代码的this本身要和Sub.prototype = Object.create(Super.prototype)结合起来,就会知道,this._init其实是调用的父级的初始化方法,将子级的原型链指向父级的原型链

子级的options 和父级的options合并赋值给子级options,sub.options

后面的操作基本是将父级的属性方法赋给子级。

这里的initProps和initComputed没有进去做研究,看名称就知道是干啥,之后会补充。

我是三分一把刀,有误的地方希望各位指正。

https://juejin.im/post/5c88e669f265da2d8f47792a 【关于initProps 运作】

initProps

    源代码种的逻辑是根据传进来的属性先进行prop是否有效并且返回,然后设置为响应式对象defineReactive。

defineReactive可以理解为将数据设置为响应式数据,类似于java实体的get和set方法,内部实现自己的逻辑,给数据属性添加Dep依赖的实例。

内置属性:key,ref,slot,slot-scope,is

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 回忆 首先,render函数中手写h=>h(app),new Vue()实例初始化init()和原来一样。$mou...
    LoveBugs_King阅读 6,815评论 1 2
  • 合并配置 new Vue的过程通常有2种场景,一种是外部我们的代码主动调用new Vue(options)的方式实...
    oWSQo阅读 1,688评论 0 1
  • PNG 有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,...
    hudaren阅读 5,609评论 0 0
  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 6,736评论 1 8
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,395评论 0 7

友情链接更多精彩内容