iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >vue 2.5.1源码之Vue.extend和data合并策略的示例分析
  • 380
分享到

vue 2.5.1源码之Vue.extend和data合并策略的示例分析

2024-04-02 19:04:59 380人浏览 独家记忆
摘要

这篇文章主要介绍了Vue 2.5.1源码之Vue.extend和data合并策略的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.

这篇文章主要介绍了Vue 2.5.1源码之Vue.extend和data合并策略的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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. 子类父类 


(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,h2,h3,h4,h5,h6,h7,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合并策略的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网node.js频道,更多相关知识等着你来学习!

--结束END--

本文标题: vue 2.5.1源码之Vue.extend和data合并策略的示例分析

本文链接: https://www.lsjlt.com/news/80548.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue 2.5.1源码之Vue.extend和data合并策略的示例分析
    这篇文章主要介绍了vue 2.5.1源码之Vue.extend和data合并策略的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1....
    99+
    2024-04-02
  • Vue源码分析之虚拟DOM的示例分析
    小编给大家分享一下Vue源码分析之虚拟DOM的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!为什么需要虚拟dom?虚拟DOM就是为了解决浏览器性能问题而被...
    99+
    2023-06-15
  • HANA密码策略更改的示例分析
    这篇文章给大家分享的是有关HANA密码策略更改的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   近些日子hana数据库出现密码...
    99+
    2024-04-02
  • angularjs指令之绑定策略的示例分析
    小编给大家分享一下angularjs指令之绑定策略的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!引入主题背景:angu...
    99+
    2024-04-02
  • Java并发编程之ConcurrentLinkedQueue源码的示例分析
    这篇文章给大家分享的是有关Java并发编程之ConcurrentLinkedQueue源码的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、ConcurrentLinkedQueue介绍并编程中,一般需...
    99+
    2023-06-15
  • vue源码架构的示例分析
    这篇文章将为大家详细讲解有关vue源码架构的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。下载去github上下载Vue https://github.com/v...
    99+
    2024-04-02
  • Vue中AST源码解析的示例分析
    这篇文章主要介绍Vue中AST源码解析的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!从这个函数开始的:// Line-3924  Vue.prototy...
    99+
    2024-04-02
  • Vue源码之数据代理访问的示例分析
    小编给大家分享一下Vue源码之数据代理访问的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!概念解析:1) 数据代理: 通...
    99+
    2024-04-02
  • vue源码之批量异步更新策略的深入解析
    vue异步更新源码中会有涉及事件循环、宏任务、微任务的概念,所以先了解一下这几个概念。 一、事件循环、宏任务、微任务 1.事件循环Event Loop:浏览器为了协调事件处理、脚本...
    99+
    2024-04-02
  • Java源码解析之ConcurrentHashMap的示例分析
    小编给大家分享一下Java源码解析之ConcurrentHashMap的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!早期 ConcurrentHashMap,其实现是基于:分离锁,也就是将内部进行分段(Segme...
    99+
    2023-06-15
  • python源码剖析之PyObject的示例分析
    这篇文章主要介绍python源码剖析之PyObject的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、Python中的对象Python中一切皆是对象。————Guido van Rossum(1989)这...
    99+
    2023-06-15
  • Vue源码解析之数据响应系统的示例分析
    这篇文章主要介绍Vue源码解析之数据响应系统的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!数据双向绑定的思路1. 对象先来看元素是对象的情况。假设我们有一个对象和一个监测方...
    99+
    2024-04-02
  • 浏览器中同源策略以及跨域的示例分析
    这篇文章主要介绍了浏览器中同源策略以及跨域的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。什么是浏览器的同源策略,以及跨域?同源策略...
    99+
    2024-04-02
  • Go并发中goroutine模型与调度策略的示例分析
    这篇文章给大家分享的是有关Go并发中goroutine模型与调度策略的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。单进程操作系统早期的单进程操作系统,可以理解为只有一个时间轴,CPU顺序执行每一个进程/...
    99+
    2023-06-25
  • Android框架之Volley源码的示例分析
    这篇文章主要介绍Android框架之Volley源码的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Volley简单使用我这里是以依赖架包的形式 ,大家也可以以gradle的形式进行依赖。好了,接下来上代码了...
    99+
    2023-06-15
  • webpack源码之loader机制的示例分析
    这篇文章主要介绍webpack源码之loader机制的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!loader概念loader是用来加载处理各种形式的资源,本质上是一个函数...
    99+
    2024-04-02
  • Android框架之OkHttp3源码的示例分析
    这篇文章将为大家详细讲解有关Android框架之OkHttp3源码的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。OkHttp流程图OkHttp基本使用gradle依赖implementation...
    99+
    2023-06-15
  • Java源码解析之接口Collection的示例分析
    小编给大家分享一下Java源码解析之接口Collection的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、图示二、方法定义我们先想一想,公司如果要我...
    99+
    2023-06-15
  • Vue.js源码分析之自定义指令的示例分析
    这篇文章给大家分享的是有关Vue.js源码分析之自定义指令的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令...
    99+
    2023-06-14
  • Redis中过期操作和过期策略的示例分析
    这篇文章主要介绍Redis中过期操作和过期策略的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!过期操作过期设置Redis 中设置过期时间主要通过以下四种方式:expire k...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作