龙恩0707

vue系列---Vue组件化的实现原理（八）

阅读目录

一. 什么是Vue组件? 如何注册组件？
1.1 全局注册组件

1.2 局部注册组件
二：组件之间数据如何传递的呢？
1) props

2) $emit

3) 使用$ref实现通信

4) $attrs 和 $listeners 及 inheritAttrs

5) 理解 provide 和 inject 用法

6) 理解使用bus总线
三：在vue源码中注册组件是如何实现的呢？

在Vue中，组件是一个很强大的功能，组件可以扩展HTML元素，封装可重用的代码。比如在页面当中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件来进行复用。组件可以大大提高了代码的复用率。

所有的Vue组件都是Vue的实列，因此它可以接受Vue中的所有的生命周期钩子。Vue又分为全局注册和局部注册两种方式来注册组件。全局组件它可以在任何(根)实列中使用的组件，局部组件只能在某一实列中使用的组件。

回到顶部

1.1 全局注册组件

全局注册有下面两种方式注册:

1. 通过 Vue.component 直接注册

全局组件可以使用 Vue.component(tagName, option); 来注册组件。 tagName 是自定义的组件名称, option是组件的一些选项, 比如可以在option对象中添加如下一些选项：
1) template 表示组件模板。
2) methods 表示组件里的方法。
3) data 表示组件里的数据。

在Vue中, 定义组件名的方式也是有规范的。定义组件名的方式有两种:

1) 使用kebab-case

Vue.component('my-component-name', {});

kebab-case 的含义是: "短横线分隔命名" 来定义一个组件, 因此我们在使用该组件的时候, 就如这样使用:

2) 使用 PascalCase

Vue.component('MyComponentName', {});

PascalCase 的含义是: "首字母大写命名" 来定义一个组件, 我们在使用该组件时，可以通过如下两种方式来使用:或都是可以的。
那么一般的情况下，我们习惯使用第一种方式来使用组件的。

下面以官方列子来举例如何注册一个全局组件，简单的代码如下：

DOCTYPE html>
<html>
<head>
  <title>vue组件测试title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    
    <button-counter>button-counter><br/><br/>
    <button-counter>button-counter><br/><br/>
    <button-counter>button-counter>
  div>
  <script type="text/javascript">
    Vue.component('button-counter', {
      data: function() {
        return {
          count: 0
        }
      },
      template: ''
    });
    new Vue({
      el: '#app'
    });
  script>
body>
html>

如上调用了三次组件，对第一个按钮点击了一次，因此 count = 1了，第二个按钮点击2次，因此count=2了，对第三个按钮点击了3次，因此count=3了。如下图所示:

注意：当我们定义 button-counter 组件的时候，data 必须为一个函数，不能是一个对象，比如不能是如下的对象:

data: {
  count: 0
};

因为每个实列可以维护一份被返回对象的独立拷贝。如果是一个对象的话，那么它每次调用的是共享的实列，因此改变的时候会同时改变值。

官方文档是这么说的：当一个组件被定义时，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实列。如果data仍然是一个纯粹的对象，则所有的实列将共享引用同一个数据对象。通过提供data函数，每次创建一个新实列后，我们能够调用data函数，从而返回初始数据的一个全新副本的数据对象。

2. 通过Vue.extend来注册

Vue.extend(options); Vue.extend 返回的是一个 "扩展实列构造器", 不是具体的组件实列, 它一般是通过 Vue.component 来生成组件。

简单的代码如下测试:

DOCTYPE html>
<html>
<head>
  <title>vue组件测试title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    
    <button-counter>button-counter><br/><br/>
    <button-counter>button-counter><br/><br/>
    <button-counter>button-counter>
  div>
  
  <div id="app2">
    <button-counter>button-counter>
  div>
  <script type="text/javascript">
    var buttonCounter = Vue.extend({
      name: 'button-counter',
      data: function() {
        return {
          count: 0
        }
      },
      template: ''
    });
    /*
      Vue.component 是用来全局注册组件的方法, 其作用是将通过 Vue.extend 生成的扩展实列构造器注册为一个组件 
    */
    Vue.component('button-counter', buttonCounter);
    
    // 初始化实列
    new Vue({
      el: '#app'
    });
    new Vue({
      el: '#app2'
    });
  script>
body>
html>

效果和上面也是一样的。如上我们可以看到, 全局组件不仅仅在 '#app' 域下可以使用, 还可以在 '#app2' 域下也能使用。这就是全局组件和局部组件的区别, 局部组件我们可以看如下的demo。

回到顶部

1.2 局部注册组件

<div id="app">
  <child-component>child-component>
div>
<script type="text/javascript">
  var child = {
    template: "我是局部组件"
  };
  new Vue({
    el: '#app',
    components: {
      "child-component": child
    }
  })
script>

在浏览器中会被渲染成html代码如下:

"<div id='app'><h1>我是局部组件h1>div>";

如上代码是局部组件的一个列子, 局部组件只能在 id 为 'app' 域下才能使用, 在其他id 下是无法访问的。如下如下代码:

<div id="app">
  <child-component>child-component>
div>
<div id="app2">
  <child-component>child-component>
div>
<script type="text/javascript">
  var child = {
    template: "我是局部组件"
  };
  new Vue({
    el: '#app',
    components: {
      "child-component": child
    }
  });
  new Vue({
    el: '#app2'
  })
script>

如上代码, 我们在 id 为 '#app2' 的域下使用 child-component 组件是使用不了的, 并且在控制台中会报错的。因为该组件是局部组件, 只能在 '#app' 域下才能使用。

回到顶部

1) props

在Vue中, 组件之间的通信有父子组件、兄弟组件、祖先后代组件等之间通信。

1. 父子组件通信

父组件想把数据传递给子组件是通过 props 来传递的, 子组件想把数据传递给父组件是通过事件 emit 来触发的。

在vue中，子组件向父组件传递数据, 子组件使用 $emit 触发事件, 在父组件中我们使用 v-on / @ 自定义事件进行监听即可。

我们可以使用如下图来解释他们是如何传递数据的, 如下图所示:

子组件的props选项能够接收来自父组件的数据。我们可以使用一个比方说, 父子组件之间的数据传递相当于自上而下的下水管子, 只能从上往下流,不能逆流。这也正是Vue的设计理念之单向数据流。
而Props可以理解为管道与管道之间的一个衔接口。这样水才能往下流。

如下代码演示:

DOCTYPE html>
<html>
<head>
  <title>父子组件通信title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    
    <child-component :content="message">child-component>
  div>
  <script type="text/javascript">
    var childComponent = Vue.extend({
      template: '{{ content }}',
      // 使用props接收父组件传递过来的数据
      props: {
        content: {
          type: String,
          default: 'I am is childComponent'
        }
      }
    });
    new Vue({
      el: '#app',
      data: {
        message: 'I am is parentComponent'
      },
      components: {
        childComponent
      }
    });
  script>
body>
html>

在页面渲染出HTML如下:

<div id="app">
  <div>I am is parentComponentdiv>
div>

回到顶部

2) $emit

子组件想把数据传递给父组件的话, 那么可以通过事件触发的方式来传递数据, 父组件使用 v-on / @ 自定义事件进行监听即可。

如下基本代码演示:

DOCTYPE html>
<html>
<head>
  <title>父子组件通信title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    <child-component @event="eventFunc">child-component>
  div>
  <script type="text/javascript">
    var childComponent = Vue.extend({
      template: '子组件使用事件把数据传递给父组件',
      data() {
        return {
          content: '我是子组件把数据传递给父组件'
        }
      },
      methods: {
        triggerClick() {
          this.$emit('event', this.content);
        }
      } 
    });
    new Vue({
      el: '#app',
      components: {
        childComponent
      },
      methods: {
        eventFunc(value) {
          console.log('打印出数据:' + value);
        }
      }
    });
  script>
body>
html>

如上代码, 在子组件childComponent中, 我们定义了一个点击事件, 当我们点击后会触发 triggerClick 这个函数, 该函数内部使用 $emit 来派发一个事件, 事件名为 "event", 然后在父组件中我们使用 @ 或 v-on 来监听 'event' 这个事件名称, 在父组件中使用 @event="eventFunc"; 因此当我们点击后, 会触发父组件中的 "eventFunc" 这个方法, 该方法有一个参数值, 就是子组件传递过来的数据。

回到顶部

3) 使用$ref实现通信

ref它有下面两点用处:

1. 如果ref用在子组件上, 那么它指向的就是子组件的实列, 可以理解为对子组件的索引的引用, 我们可以通过$ref就可以获取到在子组件定义的属性和方法。
2. 如果ref使用在普通的DOM元素上使用的话, 引用指向的就是DOM元素, 通过$ref就可以获取到该DOM的属性集合, 我们轻松就可以获取到DOM元素。作用和jquery中的选择器是一样的。

那么我们如何通过使用 $ref 来实现父子组件之间通信呢? 我们将上面使用 props 实现的功能, 下面我们使用 $ref 来实现一下:

如下代码演示:

DOCTYPE html>
  <html>
  <head>
    <title>父子组件通信title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
  head>
  <body>
    <div id="app">
      <child-component ref="child">child-component>
    div>
    <script type="text/javascript">
      var childComponent = Vue.extend({
        template: '{{message}}',
        data() {
          return {
            message: ''
          }
        },
        methods: {
          getMsg(value) {
            this.message = value;
          }
        }
      });
      new Vue({
        el: '#app',
        components: {
          childComponent
        },
        mounted() {
          this.$refs.child.getMsg('父组件给子组件传递数据的');
        }
      });
    script>
  body>
  html>

如上代码, 我们子组件childComponent 默认的 message值为空字符串, 但是在父组件中的 mounted 生命周期中, 我们使用 $refs 获取到子组件的方法, 把值传递给子组件, 最后子组件就能获取值, 重新渲染页面了。因此最后页面被渲染成为:

父组件给子组件传递数据的

; 如上我们在父组件中调用子组件的方法，当然我们也可以改变子组件的属性值也是可以实现的.
props 和 $refs 之间的区别:

props 着重与数据传递, 父组件向子组件传递数据, 但是他并不能调用子组件里面的属性和方法。

$refs 着重与索引，主要用于调用子组件里面的属性和方法。并且当ref使用在DOM元素的时候, 能起到选择器的作用, 我们可以通过它能获取到DOM元素的节点, 可以对DOM元素进行操作等。

回到顶部

4) $attrs 和 $listeners 及 inheritAttrs

$attrs 是vue2.4+版本添加的内容, 目的是解决props 在组件 "隔代" 传值的问题的。
如下图所示:

如上图我们可以看到, A组件与B组件是父子组件, A组件传递给B组件的数据可以使用props传递数据, B组件作为A组件的子组件, 传递数据只需要通过事件 $emit 触发事件即可。但是A组件它与C组件要如何通信呢? 我们可以通过如下方案解决:

1) 我们首先会想到的是使用Vuex来对数据进行管理, 但是如果项目是非常小的话, 或者说全局状态比较少, 如果我们使用Vuex来解决的话, 感觉大材小用了。
2) 我们可以把B组件当做中转站, 比如说我们使用A组件把数据先传递给B组件, B组件拿到数据后在传递给C组件, 这虽然算是一种方案, 但是并不好, 比如说组件传递的数据非常多, 会导致代码的繁琐, 或导致代码以后更加的难以维护。
3) 自定义一个Vue中央数据总线, 但是这个方法适合组件跨级传递消息。

因此为了解决这个需求, 在vue2.4+ 的版本后, 引入了 $attrs 和 $listeners, 新增了 inheritAttrs选项。

inheritAttrs、attrs和listeners的使用场景: 组件之间传值, 特别对于祖孙组件有跨度的传值。

inheritAttrs 默认值为true, 意思是说会将父组件中除了props以外的属性会添加到子组件的根节点上。但是我们的子组件仍然可以通过 $attrs 获取到 props 以外的属性。

上面的含义可能会有点理解不清晰, 我们换句话说吧, 就是说我们的父组件传了两个属性值给子组件,但是子组件只获取到其中一个属性了, 那么另外一个属性会被当做子组件的根节点上的一个普通属性。
如下代码演示下:

DOCTYPE html>
<html>
<head>
  <title>父子组件通信title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    <father-component
      :foo="foo"
      :bar="bar"
      @event="reciveChildFunc"
    >
    father-component>
  div>
  <script type="text/javascript">
    var str = `
      <div>
        <div>attrs: {{$attrs}}</div>
        <div>foo: {{foo}}</div>
      </div>
    `;
    // 这是父组件
    var fatherComponent = Vue.extend({
      template: str,
      name: 'father-component',
      data() {
        return {
          
        }
      },
      props: {
        foo: {
          type: String,
          default: ''
        }
      },
      components: {
        
      },
    });

    // 这是祖先组件
    new Vue({
      el: '#app',
      components: {
        fatherComponent
      },
      data() {
        return {
          foo: 'hello world',
          bar: 'kongzhi'
        }
      },
      methods: {
        reciveChildFunc(value) {
          console.log('接收孙子组件的数据' + value);
        }
      }
    });
  script>
body>
html>

如上代码我们定义了一个祖先组件和一个父组件, 在祖先组件里面, 我们引用了父组件, 并且给父组件传递了两个属性数据, 分别为 'foo' 和 'bar'; 如下代码可以看得到:

<father-component
  :foo="foo"
  :bar="bar"
  @event="reciveChildFunc"
>
father-component>

但是在我们的父组件中只接收了一个属性为 'foo'; 'bar' 属性值并没有接收, 因此该bar默认会把该属性放入到父组件的根元素上, 如下父组件接收祖先组件的代码如下：

var str = `
  
    attrs: {{$attrs}}
    foo: {{foo}}
  
`;
// 这是父组件
var fatherComponent = Vue.extend({
  template: str,
  name: 'father-component',
  data() {
    return {
      
    }
  },
  props: {
    foo: {
      type: String,
      default: ''
    }
  },
  components: {
    
  },
});

然后代码执行的结果如下所示:

如上效果可以看到, 我们可以使用 $attrs 来接收祖先组件传递给父组件中未使用的数据。

同时bar参数默认会把属性放入到我们父组件的根元素上当做一个普通属性, 如下图所示:

如果我们不想让未使用的属性放入到父组件的根元素上当做普通属性的话, 我们可以在父组件上把 inheritAttrs 设置为false即可。如下父组件代码添加 inheritAttrs: false

// 这是父组件
var fatherComponent = Vue.extend({
  template: '.....',
  name: 'father-component',
  data() {
    return {
      
    }
  },

  // 这是新增的代码
  inheritAttrs: false,

  props: {
    foo: {
      type: String,
      default: ''
    }
  },
  components: {
    
  },
});

效果如下图所示:

如上是祖先组件和父组件之间的交互, 现在我们又来了一个子组件, 我们现在要考虑的问题是我们要如何让祖先组件的数据直接传递给子组件呢? 或者说我们的子组件的数据如何能直接传递给祖先组件呢?

如上父组件我们可以看到，我们使用 $attrs 就可以拿到祖先组件的未使用的属性, 也就是 {"bar": 'kongzhi'} 这样的值, 如果我们在父组件中把该 $attrs 传递给子组件的话, 那么子组件不就可以直接拿到 bar 的值了吗？因此我们在父组件中可以使用 v-bind = "$attrs" 这样的就可以把数据传递给子组件了。如下代码演示:

DOCTYPE html>
<html>
<head>
  <title>父子组件通信title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    <father-component
      :foo="foo"
      :bar="bar"
      @event="reciveChildFunc"
    >
    father-component>
  div>
  <script type="text/javascript">

    var str2 = `<div>
                  <div>bar: {{bar}}</div>
                  <button @click="childFunc">点击子节点</button>
               </div>`;
    // 这是子组件
    var childComponent = Vue.extend({
      name: 'child-component',
      template: str2,
      data() {
        return {
          
        }
      },
      props: {
        bar: {
          type: String,
          default: ''
        }
      },
      methods: {
        childFunc() {
          this.$emit('event', '32');
        }
      }
    });

    var str = `
      <div>
        <div>attrs: {{$attrs}}</div>
        <div>foo: {{foo}}</div>
        <child-component v-bind="$attrs" v-on="$listeners"></child-component>
      </div>
    `;
    // 这是父组件
    var fatherComponent = Vue.extend({
      template: str,
      name: 'father-component',
      data() {
        return {
          
        }
      },
      props: {
        foo: {
          type: String,
          default: ''
        }
      },
      components: {
        childComponent
      },
    });

    // 这是祖先组件
    new Vue({
      el: '#app',
      components: {
        fatherComponent
      },
      data() {
        return {
          foo: 'hello world',
          bar: 'kongzhi'
        }
      },
      methods: {
        reciveChildFunc(value) {
          console.log('接收孙子组件的数据' + value);
        }
      }
    });
  script>
body>
html>

上面的执行结果如下所示：

如上我们可以看到，在父组件里面，我们传递数据给子组件, 我们通过 v-bind="$atts" 这样的就可以把数据传递给孙子组件了, 同样孙子组件 emit的事件可以在中间组件中通过$listeners属性来传递。在子组件里面我们可以使用 props 来接收参数 'bar' 的值了。同样在子组件我们想把数据传递给祖先组件的话, 我们通过事件的方式:
@click="childFunc"; 然后在该函数代码里面执行: this.$emit('event', '32'); 和我们以前父子组件传递数据没有什么区别, 无非就是在中间组件之间添加了 v-on="$listeners";
这样就可以实现祖先组件和孙子组件的数据交互了, 如上我们在孙子组件点击按钮后会调用 emit 触发事件; 如代码：this.$emit('event', '32'); 然后我们在祖先组件中通过 @event="reciveChildFunc" 来监听该事件了, 因此我们在祖先组件中编写reciveChildFunc函数来接收数据即可。

我们下面可以看下中间组件(也就是父组件是如何使用 $listeners 和 $attrs的了)。如下代码：

var str = `
<div>
  <div>attrs: {{$attrs}}div>
  <div>foo: {{foo}}div>
  
  <child-component v-bind="$attrs" v-on="$listeners">child-component>
div>
`;
// 这是父组件
var fatherComponent = Vue.extend({
  template: str,
  name: 'father-component',
  data() {
    return {
      
    }
  },
  props: {
    foo: {
      type: String,
      default: ''
    }
  },
  components: {
    childComponent
  }
});

回到顶部

5) 理解 provide 和 inject 用法

provide 和 inject 主要是为高阶插件/组件库提供用例, 在应用程序代码中并不推荐使用。
注意: 该两个属性是一起使用的。它允许一个祖先组件向其所有子孙后代组件注入一个依赖, 不论组件层次有多深。也就是说, 在我们的项目当中会有很多很多组件,并且嵌套的很深的组件, 我们的子孙组件想要获取到祖先组件更多的属性的话,那么要怎么办呢? 我们总不可能通过父组件一级一级的往下传递吧, 那如果真这样做的话, 那么随着项目越来越大, 我们的项目会越来越难以维护, 因此 provide 和 inject 出现了, 他们两个就是来解决这个事情的。

provide: 它是一个对象, 或者是一个返回对象的函数。里面它可以包含所有要传递给子孙组件的属性或属性值。
inject: 它可以是一个字符串数组或者是一个对象。属性值也可以是一个对象。

简单的来说, 父组件通过provide来提供变量, 然后在子组件中可以通过 inject来注入变量。

下面我们可以来看下一个简单的demo来理解下 provide/inject 的使用吧:

DOCTYPE html>
<html>
<head>
  <title>父子组件通信title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    <parent-component>parent-component>
  div>
  <script type="text/javascript">
    // 定义一个子组件
    var childComponent = Vue.extend({
      template: '子组件获取祖先组件的age值为: {{age2}}',
      inject: ['age'],
      data() {
        return {
          age2: this.age
        }
      }
    });
    // 定义一个父组件
    var str = `<div>
                <div>父组件获取name属性为: {{name2}}</div>
                <child-component></child-component>
              </div>`;
    var parentComponent = Vue.extend({
      template: str,
      inject: ['name'],
      data() {
        return {
          name2: this.name
        }
      },
      components: {
        childComponent
      }
    });
    // 初始化祖先组件
    new Vue({
      el: '#app',
      components: {
        parentComponent
      },
      // 祖先组件提供所有要传递的属性变量给子组件
      provide: {
        name: 'kongzhi',
        age: 31,
        marriage: 'single'
      },
      data() {
        return {
          
        }
      },
      methods: {
        
      }
    });
  script>
body>
html>

如上代码运行效果如下所示:

如上我们可以看得到, 我们在祖先组件中使用 provide 提供了所有需要传递给子组件甚至孙子组件的数据, 然后在我们的祖先组件中调用了父组件, 并且没有通过props传递任何数据给父组件, 代码如下看得到:

<div id="app">
  <parent-component>parent-component>
div>

然后我们在父组件中使用 inject: ['name'] 这样的, 通过inject这个来注入name属性进来, 因此在我们data中使用 this.name 就可以获取到我们祖先组件中的属性了, 然后在父组件中使用该属性即可。
同样的道理在我们的父组件中调用子组件, 也没有传递任何属性过去, 如下的代码可以看得到:

<child-component>child-component>

在我们子组件中, 也一样可以通过 inject 来注入祖先组件的属性; 比如代码: inject: ['age'], 因此在页面上我们一样通过 this.age 值就可以拿到祖先的属性值了。

回到顶部

6) 理解使用bus总线

bus总线可用于解决跨级和兄弟组件通信的问题，它可以为一个简单的组件传递数据。我们可以使用一个空的Vue实列作为中央事件总线。

我们可以封装Bus成Vue的一个方法; 如下代码:

const Bus = new Vue({
    methods: {
      emit(event, ...args) {
        this.$emit(event, ...args);
      },
      on(event, callback) {
        this.$on(event, callback);
      },
      off(event, callback) {
        this.$off(event, callback);
      }
    }
  });
  // 把该Bus放在原型上
  Vue.prototype.$bus = Bus;

因此我们可以把Bus抽离出来当做一个文件, 然后在入口文件引用进去即可; 假如我们现在项目结构如下:

|--- app
| |--- index
| | |--- common
| | | |--- bus.js
| | |--- views
| | | |--- c1.vue
| | | |--- c2.vue
| | | |--- index.vue
| | |--- app.js
| | |--- package.json
| | |--- webpack.config.js
| | |--- .babelrc

app/app.js 代码如下:

import Vue from 'vue/dist/vue.esm.js';

import Index from './views/index';
import Bus from './common/bus';

Vue.use(Bus);

new Vue({
  el: '#app',
  render: h => h(Index)
});

app/index/common/bus.js 源码如下:

import Vue from 'vue/dist/vue.esm.js';

const install = function(Vue) {
  const Bus = new Vue({
    methods: {
      emit(event, ...args) {
        this.$emit(event, ...args);
      },
      on(event, callback) {
        this.$on(event, callback);
      },
      off(event, callback) {
        this.$off(event, callback);
      }
    }
  });
  // 注册给Vue对象的原型上的全局属性
  Vue.prototype.$bus = Bus;
};

export default install;

app/index/common/index.vue

app/index/common/c1.vue

app/index/common/c2.vue

如上代码, 我们把Bus代码抽离出来封装到 app/index/common/bus.js 中, 然后在app/app.js 中入口文件中使用 Vue.use(Bus);
接着在 app/index/common/c2.vue c2组件中, 点击按钮 Say Hi 触发函数 sendEvent; 调用 this.$bus.$emit('setMsg', '我是来测试Bus总线的');事件, 然后在c1组件中使用

this.$bus.$on('setMsg', function(c) { console.log(c); } 来监听该事件. 如上代码我们可以看到我们打印 console.log(c); 能打印新值出来。

注意: 使用Bus存在的问题是: 如上代码, 我们在 this.$bus.$on 回调函数中 this.msg = c; 改变值后，视图并不会重新渲染更新，之所以会出现这种原因: 是因为我们接收的bus 是 $bus.on触发的。而不会重新渲染页面, 这也有可能是Vue中官方的一个缺陷吧。

因此Bus总线会存在一些问题, 所以在Vue组件通信的时候, 我们可以综合考虑来使用哪种方法来进行通信。

回到顶部

三：在vue源码中注册组件是如何实现的呢？

3.1 全局注册组件

上面已经介绍过, 全局注册组件有2种方式; 第一种方式是通过Vue.component 直接注册。第二种方式是通过Vue.extend来注册。

Vue.component 注册组件

比如如下代码:

DOCTYPE html>
<html>
<head>
  <title>vue组件测试title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js">script>
head>
<body>
  <div id="app">
    
    <button-counter>button-counter><br/><br/>
  div>
  <script type="text/javascript">
    Vue.component('button-counter', {
      data: function() {
        return {
          count: 0
        }
      },
      template: ''
    });
    new Vue({
      el: '#app'
    });
  script>
body>
html>

如上组件注册是通过 Vue.component来注册的, Vue注册组件初始化的时候, 首先会在 vue/src/core/global-api/index.js 初始化代码如下:

import { initAssetRegisters } from './assets'
initAssetRegisters(Vue);

因此会调用 vue/src/core/global-api/assets.js 代码如下:

/* @flow */

import { ASSET_TYPES } from 'shared/constants'
import { isPlainObject, validateComponentName } from '../util/index'

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id)
        }
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

如上代码中的 'shared/constants' 中的代码在 vue/src/shared/constants.js 代码如下:

export const SSR_ATTR = 'data-server-rendered'

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
]

因此 ASSET_TYPES = ['component', 'directive', 'filter']; 然后上面代码遍历:

ASSET_TYPES.forEach(type => {
  Vue[type] = function (
    id: string,
    definition: Function | Object
  ): Function | Object | void {
    if (!definition) {
      return this.options[type + 's'][id]
    } else {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && type === 'component') {
        validateComponentName(id)
      }
      if (type === 'component' && isPlainObject(definition)) {
        definition.name = definition.name || id
        definition = this.options._base.extend(definition)
      }
      if (type === 'directive' && typeof definition === 'function') {
        definition = { bind: definition, update: definition }
      }
      this.options[type + 's'][id] = definition
      return definition
    }
  }
});

从上面源码中我们可知: Vue全局中挂载有 Vue['component'], Vue['directive'] 及 Vue['filter']; 有全局组件, 指令和过滤器。在Vue.component注册组件的时候, 我们是如下调用的:

Vue.component('button-counter', {
  data: function() {
    return {
      count: 0
    }
  },
  template: ''
});

因此在源码中我们可以看到:

id = 'button-counter'; 
definition = {
  template: '',
  data: function() {
    return {
      count: 0
    }
  }
};

如上代码, 首先我们判断如果 definition 未定义的话，就返回 this.options 中内的types 和id对应的值。this.options 有如下值:

this.options = {
  base: function(Vue),
  components: {
    KeepAlive: {},
    Transition: {},
    TransitionGroup: {}
  },
  directives: {
    mode: {},
    show: {}
  },
  filters: {

  }
};

如上我们知道type的可取值分别为: 'component', 'directive', 'filter'; id为: 'button-counter'; 因此如果 definition 未定义的话, 就返回: return this.options[type + 's'][id]; 因此如果type为 'component' 的话, 那么就返回 this.options['components']['button-counter']; 从上面我们的 this.options 的值可知; this.options['components'] 的值为:

this.options['components'] = {
    KeepAlive: {},
    Transition: {},
    TransitionGroup: {}
  };

因此如果 definition 值为未定义的话, 则返回 return this.options['components']['button-counter']; 的值为 undefined;

如果definition定义了的话, 如果不是正式环境的话, 就调用 validateComponentName(id); 方法, 该方法的作用是验证我们组件名的合法性; 该方法代码如下:

// 验证组件名称的合法性
function validateComponentName (name) {
  if (!new RegExp(("^[a-zA-Z][\\-\\.0-9_" + (unicodeRegExp.source) + "]*$")).test(name)) {
    warn(
      'Invalid component name: "' + name + '". Component names ' +
      'should conform to valid custom element name in html5 specification.'
    );
  }
  if (isBuiltInTag(name) || config.isReservedTag(name)) {
    warn(
      'Do not use built-in or reserved HTML elements as component ' +
      'id: ' + name
    );
  }
}

如果是component（组件）方法，并且definition是对象, 源码如下:

if (type === 'component' && isPlainObject(definition)) {
  definition.name = definition.name || id = 'button-counter';
  definition = this.options._base.extend(definition)
}

我们可以打印下 this.options._base 的值如下:

如上我们可以看到 this.options._base.extend 就是指向了 Vue.extend(definition); 作用是将定义的对象转成了构造器。

Vue.extend 代码在 vue/src/core/global-api/extend.js中, 代码如下:

/*
 @param {extendOptions} Object
 extendOptions = {
   name: 'button-counter',
   template: '',
   data: function() {
    return {
      count: 0
    }
  }
 };
 */
Vue.cid = 0;
var cid = 1;
Vue.extend = function (extendOptions: Object): Function {
  extendOptions = extendOptions || {}
  const Super = this
  const SuperId = Super.cid
  // 如果组件已经被缓存到extendOptions, 则直接取出组件
  const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  if (cachedCtors[SuperId]) {
    return cachedCtors[SuperId]
  }
  /*
    获取 extendOptions.name 因此 name = 'button-counter'; 
    如果有name属性值的话, 并且不是正式环境的话，验证下组件名称是否合法
   */
  const name = extendOptions.name || Super.options.name
  if (process.env.NODE_ENV !== 'production' && name) {
    validateComponentName(name)
  }
  
  const Sub = function VueComponent (options) {
    this._init(options)
  }
  /*
    将Vue原型上的方法挂载到 Sub.prototype 中。
    因此Sub的实列会继承了Vue原型中的所有属性和方法。
   */
  Sub.prototype = Object.create(Super.prototype)
  // Sub原型重新指向Sub构造函数
  Sub.prototype.constructor = Sub
  Sub.cid = cid++
  Sub.options = mergeOptions(
    Super.options,
    extendOptions
  )
  Sub['super'] = Super

  // For props and computed properties, we define the proxy getters on
  // the Vue instances at extension time, on the extended prototype. This
  // avoids Object.defineProperty calls for each instance created.
  if (Sub.options.props) {
    initProps(Sub)
  }
  if (Sub.options.computed) {
    initComputed(Sub)
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend
  Sub.mixin = Super.mixin
  Sub.use = Super.use

  // create asset registers, so extended classes
  // can have their private assets too.
  ASSET_TYPES.forEach(function (type) {
    Sub[type] = Super[type]
  })
  // enable recursive self-lookup
  if (name) {
    Sub.options.components[name] = Sub
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options
  Sub.extendOptions = extendOptions
  Sub.sealedOptions = extend({}, Sub.options)

  // cache constructor
  cachedCtors[SuperId] = Sub
  return Sub
}

如上代码中会调用 mergeOptions 函数, 该函数的作用是: 用于合并对象, 将两个对象合并成为一个。如上代码:

Sub.options = mergeOptions(
  Super.options,
  extendOptions
);

如上函数代码，我们可以看到 mergeOptions 有两个参数分别为: Super.options 和 extendOptions。他们的值可以看如下所示:

如上我们可以看到, Super.options 和 extendOptions 值分别为如下:

Super.options = {
  _base: function Vue(options),
  components: {},
  directives: {},
  filters: {}
};
extendOptions = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  _Ctor: {}
};

该mergeOptions函数的代码在 src/core/util/options.js 中, 基本代码如下:

/* 
  参数 parent, child, 及 vm的值分别为如下:
  parent = {
    _base: function Vue(options),
    components: {},
    directives: {},
    filters: {}
  };
  child = {
    name: 'button-counter',
    template: '',
    data: function() {
      return {
        count: 0
      }
    },
    _Ctor: {}
  }
  vm: undefined
*/
export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    checkComponents(child)
  }

  if (typeof child === 'function') {
    child = child.options
  }

  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)

  // Apply extends and mixins on the child options,
  // but only if it is a raw options object that isn't
  // the result of another mergeOptions call.
  // Only merged options has the _base property.
  if (!child._base) {
    if (child.extends) {
      parent = mergeOptions(parent, child.extends, vm)
    }
    if (child.mixins) {
      for (let i = 0, l = child.mixins.length; i < l; i++) {
        parent = mergeOptions(parent, child.mixins[i], vm)
      }
    }
  }

  const options = {}
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}

如上代码, 首先该函数接收3个参数, 分别为: parent, child, vm ，值分别如上注释所示。第三个参数是可选的, 在这里第三个参数值为undefined; 第三个参数vm的作用是: 会根据vm参数是实列化合并还是继承合并。从而会做不同的操作。

首先源码从上往下执行, 会判断是否是正式环境, 如果不是正式环境, 会对组件名称进行合法性校验。如下基本代码:

export function validateComponentName (name: string) {
  if (!new RegExp(`^[a-zA-Z][\\-\\.0-9_${unicodeRegExp.source}]*$`).test(name)) {
    warn(
      'Invalid component name: "' + name + '". Component names ' +
      'should conform to valid custom element name in html5 specification.'
    )
  }
  if (isBuiltInTag(name) || config.isReservedTag(name)) {
    warn(
      'Do not use built-in or reserved HTML elements as component ' +
      'id: ' + name
    )
  }
}
function checkComponents (options: Object) {
  for (const key in options.components) {
    validateComponentName(key)
  }
}
if (process.env.NODE_ENV !== 'production') {
  checkComponents(child)
}

接下来会判断传入的参数child是否为一个函数，如果是的话, 则获取它的options的值重新赋值给child。也就是说child的值可以是普通对象, 也可以是通过Vue.extend继承的子类构造函数或是Vue的构造函数。基本代码如下:

if (typeof child === 'function') {
  child = child.options
}

接下来会执行如下三个函数:

normalizeProps(child, vm)
normalizeInject(child, vm)
normalizeDirectives(child)

它们的作用是使数据能规范化, 比如我们之前的组件之间的传递数据中的props或inject, 它既可以是字符串数组, 也可以是对象。指令directives既可以是一个函数, 也可以是对象。在vue源码中对外提供了便捷, 但是在代码内部做了相应的处理。因此该三个函数的作用是将数据转换成对象的形式。

normalizeProps 函数代码如下:

/*
 @param {options} Object 
 options = {
   name: 'button-counter',
    template: '',
    data: function() {
      return {
        count: 0
      }
    },
    _Ctor: {}
 };
 vm = undefined
 */
function normalizeProps (options: Object, vm: ?Component) {
  const props = options.props
  if (!props) return
  const res = {}
  let i, val, name
  if (Array.isArray(props)) {
    i = props.length
    while (i--) {
      val = props[i]
      if (typeof val === 'string') {
        name = camelize(val)
        res[name] = { type: null }
      } else if (process.env.NODE_ENV !== 'production') {
        warn('props must be strings when using array syntax.')
      }
    }
  } else if (isPlainObject(props)) {
    for (const key in props) {
      val = props[key]
      name = camelize(key)
      res[name] = isPlainObject(val)
        ? val
        : { type: val }
    }
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `Invalid value for option "props": expected an Array or an Object, ` +
      `but got ${toRawType(props)}.`,
      vm
    )
  }
  options.props = res
}

该函数的作用对组件传递的 props 数据进行处理。在这里我们的props为undefined，因此会直接return, 但是我们之前父子组件之间的数据传递使用到了props, 比如如下代码:

var childComponent = Vue.extend({
  template: '{{ content }}
',
  // 使用props接收父组件传递过来的数据
  props: {
    content: {
      type: String,
      default: 'I am is childComponent'
    }
  }
});

因此如上代码的第一行: const props = options.props; 因此props的值为如下:

props = {
  content: {
    type: String,
    default: 'I am is childComponent'
  }
};

如上props也可以是数组的形式, 比如 props = ['x-content', 'name']; 这样的形式, 因此在代码内部分了2种情况进行判断, 第一种是处理数组的情况, 第二种是处理对象的情况。

首先是数组的情况, 如下代码:

export function cached (fn: F): F {
  const cache = Object.create(null)
  return (function cachedFn (str: string) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  }: any)
}

const camelizeRE = /-(\w)/g;
/*
 该函数的作用是把组件中的 '-' 字符中的第一个字母转为大写形式。
 比如如下代码:
 'a-b'.replace(/-(\w)/g, (_, c) => c ? c.toUpperCase() : ''); 
  最后打印出 'aB';
 */
export const camelize = cached((str: string): string => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

const res = {}
let i, val, name
if (Array.isArray(props)) {
  i = props.length
  while (i--) {
    val = props[i]
    if (typeof val === 'string') {
      name = camelize(val)
      res[name] = { type: null }
    } else if (process.env.NODE_ENV !== 'production') {
      warn('props must be strings when using array syntax.')
    }
  }
}

我们可以假设props是数组, props = ['x-content', 'name']; 这样的值。因此 i = props.length = 2; 因此就会进入while循环代码, 最后会转换成如下的形式:

res = {
  'xContent': { type: null },
  'name': { type: null }
};

同理如果我们假设我们的props是一个对象形式的话, 比如值为如下:

props: {
  'x-content': String,
  'name': Number
};

因此会执行else语句代码; 代码如下所示:

const _toString = Object.prototype.toString;

function isPlainObject (obj: any): boolean {
  return _toString.call(obj) === '[object Object]'
}

else if (isPlainObject(props)) {
  for (const key in props) {
    val = props[key]
    name = camelize(key)
    res[name] = isPlainObject(val)
      ? val
      : { type: val }
  }
}

因此最后 res的值变为如下：

res = {
  'xContent': {
    type: function Number() { ... }
  },
  'name': {
    type: function String() { ... }
  }
};

当然如上代码, 如果某一个key本身是一个对象的话, 就直接返回该对象, 比如 props 值如下:

props: {
  'x-content': String,
  'name': Number,
  'kk': {'name': 'kongzhi11'}
}

那么最后kk的键就不会进行转换, 最后返回的值res变为如下:

res = {
  'xContent': {
    type: function Number() { ... }
  },
  'name': {
    type: function String() { ... }
  },
  'kk': {'name': 'kongzhi11'}
};

因此最后我们的child的值就变为如下值了:

child = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  _Ctor: {},
  props: {
    'xContent': {
      type: function Number() { ... }
    },
    'name': {
      type: function String() { ... }
    },
    'kk': {'name': 'kongzhi11'}
    }
  }
};

normalizeInject 函数, 该函数的作用一样是使数据能够规范化, 代码如下:

function normalizeInject (options: Object, vm: ?Component) {
  const inject = options.inject
  if (!inject) return
  const normalized = options.inject = {}
  if (Array.isArray(inject)) {
    for (let i = 0; i < inject.length; i++) {
      normalized[inject[i]] = { from: inject[i] }
    }
  } else if (isPlainObject(inject)) {
    for (const key in inject) {
      const val = inject[key]
      normalized[key] = isPlainObject(val)
        ? extend({ from: key }, val)
        : { from: val }
    }
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `Invalid value for option "inject": expected an Array or an Object, ` +
      `but got ${toRawType(inject)}.`,
      vm
    )
  }
}

同理, options的值可以为对象或数组。options值为如下:

options = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  inject: ['name'],
  _Ctor: {}
};

同理依次执行代码; const inject = options.inject = ['name'];

1: inject数组情况下:

inject是数组的话, 会进入if语句内, 代码如下所示:

var normalized = {};

if (Array.isArray(inject)) {
  for (let i = 0; i < inject.length; i++) {
    normalized[inject[i]] = { from: inject[i] }
  }
}

因此最后 normalized 的值变为如下:

normalized = {
  'name': {
    from: 'name'
  }
};

因此child值继续变为如下值:

child = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  _Ctor: {},
  props: {
    'xContent': {
      type: function Number() { ... }
    },
    'name': {
      type: function String() { ... }
    },
    'kk': {'name': 'kongzhi11'}
    }
  },
  inject: {
    'name': {
      form: 'name'
    }
  }
};

2. inject为对象的情况下:

比如现在options的值为如下:

options = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  },
  _Ctor: {}
};

如上inject配置中的 from表示在可用的注入内容中搜索用的 key，default当然就是默认值。默认是 'foo', 现在我们把它重置为 'bar'. 因此就会执行else if语句代码，基本代码如下所示:

/**
 * Mix properties into target object.
 */
export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

else if (isPlainObject(inject)) {
  for (const key in inject) {
    const val = inject[key]
    normalized[key] = isPlainObject(val)
      ? extend({ from: key }, val)
      : { from: val }
  }
}

由上可知; inject值为如下:

inject = {
  foo: {
    from: 'bar',
    default: 'foo'
  }
};

如上代码, 使用for in 遍历 inject对象。执行代码 const val = inject['foo'] = { from: 'bar', default: 'foo' }; 可以看到val是一个对象。因此会调用 extend函数方法, 该方法在代码 vue/src/shared/util.js 中。
代码如下:

/*
  @param {to}
  to = {
    from: 'foo'
  }
  @param {_from}
  _form = {
    from: 'bar',
    default: 'foo'
  }
 */
export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

如上执行代码后, 因此最后 normalized 值变为如下:

normalized = {
  foo: {
    from: 'bar',
    default: 'foo'
  }
};

因此我们通过格式化 inject后，最后我们的child的值变为如下数据了:

child = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  _Ctor: {},
  props: {
    'xContent': {
      type: function Number() { ... }
    },
    'name': {
      type: function String() { ... }
    },
    'kk': {'name': 'kongzhi11'}
    }
  },
  inject: {
    'foo': {
      default: 'foo',
      from: 'bar'
    }
  }
};

现在我们继续执行 normalizeDirectives(child); 函数了。该函数的代码在 vue/src/core/util/options.js中，代码如下：

/*
 * Normalize raw function directives into object format.
 * 遍历对象, 如果key值对应的是函数。则把他修改成对象的形式。
 * 因此从下面的代码可以看出, 如果vue中只传递了函数的话, 就相当于这样的 {bind: func, unpdate: func}
 */
function normalizeDirectives (options: Object) {
  const dirs = options.directives
  if (dirs) {
    for (const key in dirs) {
      const def = dirs[key]
      if (typeof def === 'function') {
        dirs[key] = { bind: def, update: def }
      }
    }
  }
}

现在我们再回到 vue/src/core/util/options.js中 export function mergeOptions () 函数中接下来的代码:

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component) {
  : Object {
    // ...  代码省略
    if (!child._base) {
      if (child.extends) {
        parent = mergeOptions(parent, child.extends, vm)
      }
      if (child.mixins) {
        for (let i = 0, l = child.mixins.length; i < l; i++) {
          parent = mergeOptions(parent, child.mixins[i], vm)
        }
      }
    }

    const options = {}
    let key
    for (key in parent) {
      mergeField(key)
    }
    for (key in child) {
      if (!hasOwn(parent, key)) {
        mergeField(key)
      }
    }
    function mergeField (key) {
      const strat = strats[key] || defaultStrat
      options[key] = strat(parent[key], child[key], vm, key)
    }
    return options
  }
}

从上面可知, 我们的child的值为如下:

child = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  _Ctor: {},
  props: {
    'xContent': {
      type: function Number() { ... }
    },
    'name': {
      type: function String() { ... }
    },
    'kk': {'name': 'kongzhi11'}
    }
  },
  inject: {
    'foo': {
      default: 'foo',
      from: 'bar'
    }
  }
};

因此 child._base 为undefined, 只有合并过的选项才会有 child._base 的值。这里判断就是过滤掉已经合并过的对象。因此会继续进入if语句代码判断是否有 child.extends 这个值，如果有该值, 会继续调用mergeOptions方法来对数据进行合并。最后会把结果赋值给parent。
继续执行代码 child.mixins, 如果有该值的话, 比如 mixins = [xxx, yyy]; 这样的，因此就会遍历该数组，递归调用mergeOptions函数，最后把结果还是返回给parent。

接着继续执行代码;

// 定义一个空对象, 最后把结果返回给空对象
const options = {}
let key
/*
 遍历parent, 然后调用下面的mergeField函数
 parent的值为如下:
 parent = {
   _base: function Vue(options),
  components: {},
  directives: {},
  filters: {}
 };
 因此就会把components, directives, filters 等值当作key传递给mergeField函数。
*/
for (key in parent) {
  mergeField(key)
}
for (key in child) {
  if (!hasOwn(parent, key)) {
    mergeField(key)
  }
}

/*
 该函数主要的作用是通过key获取到对应的合并策略函数, 然后执行合并, 然后把结果赋值给options[key下面的starts的值，在源码中
 的初始化中已经定义了该值为如下：
 const strats = config.optionMergeStrategies;
 starts = {
   activated: func,
   beforeCreate: func,
   beforeDestroy: func,
   beforeMount: func,
   beforeUpdate: func,
   components: func,
   computed: func,
   created: func,
   data: func,
   deactivated: func,
   destroyed: func,
   directives: func,
   filters: func
   ......
 };
 如下代码: const strat = strats[key] || defaultStrat; 
 就能获取到对应中的函数, 比如key为 'components', 
 因此 start = starts['components'] = function mergeAssets(){};
*/
function mergeField (key) {
  const strat = strats[key] || defaultStrat
  options[key] = strat(parent[key], child[key], vm, key)
}
return options

mergeAssets函数代码如下：

function mergeAssets (
  parentVal: ?Object,
  childVal: ?Object,
  vm?: Component,
  key: string
): Object {
  const res = Object.create(parentVal || null)
  if (childVal) {
    process.env.NODE_ENV !== 'production' && assertObjectType(key, childVal, vm)
    return extend(res, childVal)
  } else {
    return res
  }
}

最后返回的options的值变为如下了：

options = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  _Ctor: {},
  props: {
    'xContent': {
      type: function Number() { ... }
    },
    'name': {
      type: function String() { ... }
    },
    'kk': {'name': 'kongzhi11'}
    }
  },
  inject: {
    'foo': {
      default: 'foo',
      from: 'bar'
    }
  },
  components: {},
  directives: {},
  filters: {}
};

因此我们再回到代码 vue/src/core/global-api/extend.js 代码中的Vue.extend函数，如下代码:

Vue.extend = function (extendOptions: Object): Function {
  //......
  /*
   Sub.options的值 就是上面options的返回值
  */
  Sub.options = mergeOptions(
    Super.options,
    extendOptions
  )
  Sub['super'] = Super;
  if (Sub.options.props) {
    initProps(Sub)
  }
  if (Sub.options.computed) {
    initComputed(Sub)
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend
  Sub.mixin = Super.mixin
  Sub.use = Super.use;
  // create asset registers, so extended classes
  // can have their private assets too.
  ASSET_TYPES.forEach(function (type) {
    Sub[type] = Super[type]
  })
  // enable recursive self-lookup
  if (name) {
    Sub.options.components[name] = Sub
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options
  Sub.extendOptions = extendOptions
  Sub.sealedOptions = extend({}, Sub.options)

  // cache constructor
  cachedCtors[SuperId] = Sub
  return Sub
}

因此 Sub.options值为如下：

Sub.options = {
  name: 'button-counter',
  template: '',
  data: function() {
    return {
      count: 0
    }
  },
  _Ctor: {},
  props: {
    'xContent': {
      type: function Number() { ... }
    },
    'name': {
      type: function String() { ... }
    },
    'kk': {'name': 'kongzhi11'}
    }
  },
  inject: {
    'foo': {
      default: 'foo',
      from: 'bar'
    }
  },
  components: {},
  directives: {},
  filters: {}
};

因此执行代码：

if (Sub.options.props) {
  initProps(Sub)
}

从上面的数据我们可以知道 Sub.options.props 有该值的，因此会调用 initProps 函数。代码如下：

function initProps (Comp) {
  const props = Comp.options.props
  for (const key in props) {
    proxy(Comp.prototype, `_props`, key)
  }
}

因此 const props = Comp.options.props;

即 props = {
  'xContent': {
    type: function Number() { ... }
  },
  'name': {
    type: function String() { ... }
  },
  'kk': {'name': 'kongzhi11'}
  }
}

使用for in 循环该props对象。最后调用 proxy 函数, 该函数的作用是使用 Object.defineProperty来监听对象属性值的变化。
该proxy函数代码如下所示:

该proxy函数代码在 vue/src/core/instance/state.js 中，代码如下所示:

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

继续执行代码如下:

if (Sub.options.computed) {
  initComputed(Sub)
}

判断是否有computed选项, 如果有的话，就调用 initComputed(Sub); 该函数代码在 vue/src/core/instance/state.js; 该代码源码先不分析, 会有对应的章节分析的。最后代码一直到最后, 会返回Sub对象, 该对象值就变为如下了:

Sub = {
  cid: 1,
  component: func,
  directive: func,
  extend: func,
  extendOptions: {
    name: 'button-counter',
    template: '',
    data: function() {
      return {
        count: 0
      }
    },
    _Ctor: {},
    props: {
      'xContent': {
        type: function Number() { ... }
      },
      'name': {
        type: function String() { ... }
      },
      'kk': {'name': 'kongzhi11'}
      }
    },
    inject: {
      'foo': {
        default: 'foo',
        from: 'bar'
      }
    }
  }，
  filter，func,
  mixin: func,
  options: {
    name: 'button-counter',
    template: '',
    data: function() {
      return {
        count: 0
      }
    },
    _Ctor: {},
    props: {
      'xContent': {
        type: function Number() { ... }
      },
      'name': {
        type: function String() { ... }
      },
      'kk': {'name': 'kongzhi11'}
      }
    },
    inject: {
      'foo': {
        default: 'foo',
        from: 'bar'
      }
    },
    components: {},
    directives: {},
    filters: {},
    components: button-counter: f VueComponent,
    _base: f Vue()
    ......
  }
};

注意：在代码中会有如下一句代码; 就是会把我们的组件 'button-counter' 放到 Sub.options.components 组件中。

// enable recursive self-lookup
if (name) {
  Sub.options.components[name] = Sub
}

如上代码执行完成及返回完成后，我们再回到 vue/src/core/global-api/assets.js 代码中看接下来的代码:

/* @flow */

import { ASSET_TYPES } from 'shared/constants'
import { isPlainObject, validateComponentName } from '../util/index'

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id)
        }
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

因此最后代码: this.options[type + 's'][id] = definition;

this.options = {
  components: {
    KeepAlive: {},
    Transition: {},
    TransitionGroup: {},
    button-counter: ƒ VueComponent(options){}
  },
  directives: {},
  filters: {},
  base: f Vue(){}
};

this.options[type + 's'][id] = this.options['components']['button-counter'] = f VueComponent(options);

最后我们返回 definition 该Vue的实列。即definition的值为如下：

definition = ƒ VueComponent (options) {
  this._init(options);
}

最后我们就会调用 new Vue() 方法来渲染整个生命周期函数了，因此button-counter组件就会被注册上可以调用了。

你可能感兴趣的:(vue系列---Vue组件化的实现原理（八）)

斤斤计较的婚姻到底有多难？白心之岂必有为
很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
芦花鞋一四许叶晗
又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
关于沟通这件事，项目经理不需要每次都面对面进行流程大师兄
很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说造命者说
底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
2020-01-25 晴岚85
郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
随笔 | 仙一般的灵气海思沧海
仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
想家爆米花机
也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
【iOS】MVC设计模式 Magnetic_h ios mvc 设计模式 objective-c 学习 ui
MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
OC语言多界面传值五大方式 Magnetic_h ios ui 学习 objective-c 开发语言
前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
一百九十四章. 自相矛盾巨木擎天
唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
C语言宏函数南林yan C语言 c语言
一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
地推话术，如何应对地推过程中家长的拒绝校师学
相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
谢谢你们，爱你们！鹿游儿
昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
C语言如何定义宏函数？小九格物 c语言
在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务 java 架构
在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
理解Gunicorn：Python WSGI服务器的基石范范0825 ipython linux 运维
理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
小丽成长记（四十三）玲玲54321
小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
2021年12月19日，春蕾教育集团团建活动感受——黄晓丹黄错错加油
感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断尐尐呅
结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
c++ 的iostream 和 c++的stdio的区别和联系黄卷青灯77 c++算法开发语言 iostream stdio
在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
瑶池防线谜影梦蝶
冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
爬山后遗症璃绛
爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation 元注解自定义注解
一、基本概述　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
mysql优化特定类型的查询 annan211 java 工作 mysql
本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。在统
MAC下安装多版本JDK和切换几种方式棋子chessman jdk
环境： MAC AIR,OS X 10.10,64位历史：过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。在终端中输入jav
javaScript （1） Array_06 JavaScript java 浏览器
JavaScript 1、运算符　　运算符就是完成操作的一系列符号，它有七类：　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
国内顶级代码分享网站袁潇含 java jdk oracle .net PHP
现在国内很多开源网站感觉都是为了利益而做的当然利益是肯定的,否则谁也不会免费的去做网站 &
Elasticsearch、MongoDB和Hadoop比较随意而生 mongodb hadoop 搜索引擎
IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
mac os 系统科研软件总结张亚雄 mac os
1.1 Microsoft Office for Mac 2011 大客户版，自行搜索。 1.2 Latex （MacTex）: 系统环境：https://tug.org/mactex/ &nb
Maven实战（四）生命周期 AdyZhang maven
1. 三套生命周期 Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
Linux下Jenkins迁移 aijuans Jenkins
1. 将Jenkins程序目录copy过去源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面 tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
request.getInputStream()只能获取一次的问题 ayaoxinchao request Inputstream
问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
数据库SQL优化大总结之百万级数据库优化方案 BigBird2012 SQL优化
网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
jsonObject的使用 bijian1013 java json
在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
[Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher， /** * Register a watcher for a particular p
【Scala十三】Scala核心七：部分应用函数 bit1129 scala
何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
Tomcat Error listenerStart 终极大法 ronin47 tomcat
Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码 handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
不用加减符号实现加减法 BrokenDreams 实现
今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。
读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化如果在
CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！所以验证结果的正确性很重要！！！在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。以下程序在K5000GPU上跑的。
诡异的超长时间GC问题定位 chenchao051 jvm cms GC hbase swap
HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
maven环境快速搭建 daizj 安装 mavne 环境配置
一下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
public function searchWithRelated() { $criteria = new CDbCriteria; $criteria->together = true; //without th
Java集合对象和数组对象的转换 dyy_gusi java集合
在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
nginx同一主机部署多个应用 geeksun nginx
近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1. 在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts 2. 修改nginx.conf的配置，在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
ubuntu添加admin权限的用户账号 hongtoushizi ubuntu useradd
ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd 使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。顾应该如下操作：
第五章常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginx lua
JSON库在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timer quartz 定时器
原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时首先继承jav
Linux下df与du两个命令的差别？ pda158 linux
　一、df显示文件系统的使用情况，与du比較，就是更全盘化。　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。　　举比例如以下：　　[root@localhost ~]# df -T 　　Filesystem Type &n
[转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VO android sqlite 反射 Cursor
在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。使用时需要注意：考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
该学习笔记用到的Employee表 vipbooks oracle sql 工作
这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓