VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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. 子类父类 
    /* 
       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
    ] = 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的合并策略,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue.extend实现alert模态框弹窗组件
    • 关于vue.extend和vue.component的区别浅析
    • 用Vue.extend构建消息提示组件的方法实例
    • Vue.extend构造器的详解
    • spring boot+vue 的前后端分离与合并方案实例详解
    • Vue.js中用webpack合并打包多个组件并实现按需加载
    • vue.js实现表格合并示例代码
    • require.js 加载 vue组件 r.js 合并压缩的实例

    广而告之:
    热门推荐:
    windows7下php开发环境搭建图文教程

    Windows7操作系统,在Windows平台上搭建PHP的开发环境可以下载WAMP(Windows、Apache、MySQL、PHP的首字母缩写)集成化安装包。 PHP这样集成开发环境有很多,如XAMPP、AppServ......只要一键安装就把PHP环境给搭建好了。但这种安装方式不够灵活,软件的自由组合不 方便,同时也···

    PHP单元测试框架PHPUnit用法详解

    本文实例讲述了PHP单元测试框架PHPUnit用法。分享给大家供大家参考,具体如下: 以前在学习IOS开发时有专门写过Objective-C的单元测试的文章,IOS开发学习之单元测试,今天再总结下怎么在PHP中使用单元测试。 一、前言 在这篇文章中,我们使用 composer 的依赖包管理工具进行···

    Html中value和name属性的作用及其使用介绍

    1.按钮中用的value 指的是按钮上要显示的文本 比如“确定”“删除”等 2.复选框用的value 指的是这个复选框的值 3.单选框用的value 和复选框一样 4.下拉菜单用的value 是列表中每个子项的值 5.隐藏域用的value 是框里面显示的内容 在后台如果你···

    php数组函数序列 之shuffle()和array

    shuffle()定义和用法 shuffle() 函数把数组中的元素按随机顺序重新排列。 若成功,则返回 TRUE,否则返回 FALSE。 注释:本函数为数组中的单元赋予新的键名。这将删除原有的键名而不仅是重新排序。 注释:自 PHP 4.2.0 起,不再需要用 srand() 或 mt_srand() 函数给随···

    vue-router 源码之实现一个简单的 vue-router

    前言 通过上篇,我们知道前端理由的两种实现方法,Hash 路由与 History 路由,并且用它们分别实现了一个前端路由。 接下来我们就将 Vue 与 Hash 路由结合,实现一个非常简单的 vue-router 吧。 开始实现 想象一下,如果自己实现了一个 vue-router,会怎么去使用呢?参考 vu···

    PHP排序算法系列之插入排序详解

    插入排序 有一个已经有序的数据序列,要求在这个已经排好的数据序列中插入一个数,但要求插入后此数据序列仍然有序,这个时候就要用到一种新的排序方法——插入排序法,插入排序的基本操作就是将一个数据插入到已经排好序的有序数据中,从而得到一个新的、个数加一的有序数据,算···

    详解移动端实现内滚动的四种解决方案

    发现需求 如果在一个区域内只允许部分区域产生滚动的效果,而其余部分不能移动,你会采用什么方法呢? 首先我们可以把这个需求分解为两个小的问题来解决。 部分区域固定 其余区域滚动 部分区域固定 为页面的body部分设置height: 100%以及overflow: hidden,即禁用页面原生的···

    html5组织内容_动力节点Java学院整理

    默认情况下,HTML文档的格式与文档内容在浏览器窗口中显示的格式是不相关的,例如:浏览器会将连在一起的几个空白字符折算为一个空格,并且会忽略换行符。HTML提供了组织内容的方式,将显示的内容分段,预先编排内容的格式等。 建立段落 HTML会忽略你在文本中输入的回车符和其···

    JS实现自定义状态栏动画文字效果示例

    本文实例讲述了JS实现自定义状态栏动画文字效果。分享给大家供大家参考,具体如下: 在IE浏览器中打开,显示动态文字的效果,主要浏览器左下角的文字。 <body onload="stack();"> <script type="text/javascript"> var statusText="自定义动画状态栏文字"; ···

    php微信浏览器分享设置以及回调详解

    在微信中分享给好友/分享到朋友圈这个功能应该是比较常用的了,就拿分享到朋友圈举例,分享出去的内容在朋友圈的展示是以一张小图片+一个简单的介绍的形式来给好友看到的,点击后才是详情,那么这么一来,这张小图片和这段小简介就直接成为了这个被分享后的内容的被点击率的重···