vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略


Posted in Javascript onJune 04, 2019

1. 子类父类

 2.Vue.extend()      //创建vue的子类

组件的语法器 Vue.extend(options)

Profile().$mount('#app') // 挂在app上,并替换app

新建 initExend

==》 Vue.extend

 3. strat.data

==> if(!vm){子组件中data的值是一个方法function ==> mergeDataorFn()} // 数据的合并

==> else {} //通过实例绑定的data 实际是一个函数 mergeDataorFn

==》 mergeDataorFn if(!vm) mergeDataFn ==> mergeData()

else ==》mergedInstanceDataFn ==>mergeData()

    mergeData(to,from) //终极合并

jquery.extend // 深copy和浅copy

// 大体思路 (二)
// 1. 子类父类 
/* 
   2.Vue.extend()  //创建vue的子类
   组件的语法器 Vue.extend(options)
   Profile().$mount('#app') // 挂在app上,并替换app
   新建 initExend  
     ==》 Vue.extend
*/
/* 3. strat.data  
  ==> if(!vm){子组件中data的值是一个方法function ==> mergeDataorFn()} // 数据的合并
  ==> else {} //通过实例绑定的data 实际是一个函数 mergeDataorFn 
  ==》 mergeDataorFn if(!vm) mergeDataFn ==> mergeData()  
     else ==》mergedInstanceDataFn ==>mergeData()
  mergeData(to,from) //终极合并
  jquery.extend // 深copy和浅copy
*/
(function(global,factory){
  // 兼容 cmd 
  typeof exports === 'object' && module !== 'undefined' ? module.exports = factory():  
  // Amd
  typeof define === 'function' && define.amd ? define(factory) : global.Vue = factory();
})(this,function(){
  var uip = 0;
  function warn(string){
    console.error('Vue Wran:' + string)
  }
  function resolveConstructorOptions(Con){
    var options = Con.options;
    // 判断是否为vm的实例 或者是子类
     return options
  }
  var hasOwnPropeerty = Object.prototype.hasOwnProperty
  function hasOwn(obj , key){
    return hasOwnPropeerty.call(obj,key)
  }
  function makeMap(str, expectsLoweraseC){
    if(expectsLoweraseC){
      str = str.toLowerCase()
    }
    var map = Object.create(null)
    var list = str.split(',')
    for(var i = 0 ; i < list.length; i++){
      map[list[i]] = true
    }
    return function(key){
      return map[key]
    }
  }
  var isbuiltInTag = makeMap('slot,component',true)
  var isHTMLTag = makeMap(
    'html,body,base,head,link,meta,style,title,' +
    'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
    'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
    'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
    's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
    'embed,object,param,source,canvas,script,noscript,del,ins,' +
    'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
    'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
    'output,progress,select,textarea,' +
    'details,dialog,menu,menuitem,summary,' +
    'content,element,shadow,template,blockquote,iframe,tfoot'
  );
  var isSVG = makeMap(
    'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
    'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
    'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
    true
  );
  var isReservedTag = function(key){
    return isHTMLTag(key) || isSVG(key) 
  }
  function validataComponentName(key){
    //检测component 的自定义名称是否合格 
    // 只能是字母开头或下划线,必须是字母开头
    if(!(/^[a-zA-Z][\w-]*$/g.test(key))){
      warn('组件的名称必须是字母或中横线,必须由字母开头')
    }
    // 1. 不能为内置对象,2.不能是html ,和avg的内部标签
    if( isbuiltInTag(key) || isReservedTag(key)){
      warn('不能为html标签或者avg的内部标签')
    } 
  }
  function checkComonpents(child){
    for(var key in child.component){
      validataComponentName(key)
    }
  }
  // 配置对象
  var config = {
    // 自定义的策略
    optionMergeStrategies:{}
  }
  var strats = config.optionMergeStrategies
  strats.el = function(parent,child , key , vm){
     if(!vm){
       warn('选项'+key+'只能在vue实例用使用')
     }
     return defaultStrat(parent,child , key , vm)
  }
  function mergeData(to,form){
    // 终极合并
    if(!form){
      return to
    }
  }
  function mergeDataorFn(parentVal,childVal,vm){
    // 合并 parentVal childVal 都是函数
    if(!vm){
      if(!childVal){
        return parentVal
      }
      if(!parentVal){
        return childVal
      }
      return function mergeDataFn(parentVal,childVal,vm){//只是一个函数  什么样的情况下调用 加入响应式系统 
        // 合并子组件对应的data 和  父组件对应的data
        return mergeData( 
          typeof parentVal === 'function' ? parentVal.call(this,this) : parentVal,  // -----忘记写
          typeof childVal === 'function' ? childVal.call(this,this): childVal)   // -----忘记写
      }
    }else{ // vue实例
      return function mergeInstanceDataFn(parentVal,childVal,vm){//只是一个函数  什么样的情况下调用 加入响应式系统 
        var InstanceData = typeof childVal === 'function' ? childVal.call(vm,vm): childVal;  // -----忘记写
        var defaultData = typeof parentVal === 'function' ? parent.call(vm,vm): parentVal;  // -----忘记写
        if(InstanceData){
          return mergeData(parentVal,childVal)
        }else{        // -----忘记写
          defaultData
        }
      }
    }
  }
  strats.data = function(parent,child , key , vm){
    if(!vm){
     // console.log(typeof child === 'function')
      if(child && !(typeof child === 'function')){
        warn('data必须返回是一个function')
      }
      return mergeDataorFn(parent,child)
    }
    return mergeDataorFn(parent,child,vm)
  }
  function defaultStrat(parent,child , key , vm){
    return child === undefined ? parent :child ;
  }
  function mergeOptions(parent,child,vm){
    var options = {}
    // 检测是component 是否是合法的 
    checkComonpents(child)
    // console.log(parent, child)
    for(key in parent){
      magerField(key)
    }
    for(key in child){
      if(!hasOwn(parent ,key)){ // parent 中循环过地方不进行循环
        magerField(key) // ----忘记写
      }
    }
    // 默认合并策略
    function magerField(key){ 
      // 自定义策略 默认策略 
      // console.log(key)
      var result = strats[key] || defaultStrat    // ---忘记写
      options[key] = result(parent[key],child[key] , key , vm)
    }
    // console.log(options)
    return options
  }
  function initMinxin(options){
    Vue.prototype._init = function(options){
      var vm = this 
      // 记录生成的vue实例对象 
      vm._uip = uip++ //  //-------忘记写
       vm.$options =mergeOptions(resolveConstructorOptions(vm.constructor),options,vm)
    }
  }
  function Vue(options){
    // 安全机制
    if(!(this instanceof Vue)){   //-------忘记写
      warn('Vue是一个构造函数,必须是由new关键字调用') 
    }
    this._init(options)
  }
  initMinxin() // 初始化选项1: 规范 2: 合并策略。
  Vue.options = {
    components: {},
    directives:{},
    _bash: Vue
  }
  function initExend(Vue){
    Vue.extend = function(extendOptions){
      extendOptions = extendOptions || {}  // -----忘记写
      var Super = this 
      var Child = function VueComponent() {
        this._init(options)
      }
      Child.prototype = Object.create(Super.prototype)
      Child.prototype.constructor = Child  // 改变constructor 的指向
      Child.options = mergeOptions(Super.options,extendOptions)
      // 子类继承父类的静态方法。
      Child.extend = Vue.extend
      return Child
    }
  }
  initExend(Vue)
  return Vue
})
<body>
  <div id="app">
    <huml></huml>
  </div>
  <script src="vue.js"></script>
  <!-- <script src="vue2.5.1.js"></script> -->
  <script type="text/javascript">
    var componentA = {
      el: "#app"
    }
    var vm = new Vue({
      el:"#app",
      data: {
        message: "hello Vue",
        key: "wodow"
      },
      components:{
        huml: componentA
      }
    })
    // console.log(Vue)
    var Parent = Vue.extend({
      data: function() {}
    })
    var Child = Parent.extend({});
    console.log(vm.$options)
  </script>
</body>

总结

以上所述是小编给大家介绍的vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
js实现三角形粒子运动
Sep 22 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 #Javascript
JavaScript实现页面中录音功能的方法
Jun 04 #Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 #Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 #Javascript
js回文数的4种判断方法示例
Jun 04 #Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 #Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 #Javascript
You might like
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php google或baidu分页代码
2009/11/26 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
解决pip install psycopg2出错问题
2020/07/09 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
学生就业推荐信
2013/11/13 职场文书
服务员自我评价
2014/01/25 职场文书
乔迁之喜主持词
2014/03/27 职场文书
计生专干事迹
2014/05/28 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
商超业务员岗位职责
2015/02/13 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android