2.最俗学习之-Vue源码学习-引入篇(中)

引入Vue后进行了global-api的初始化，那么现在就到了第二步的初始化，文件入口为：

src\entries\web-runtime.js

首先是4个方法绑定在Vue.config上


isUnknownElement     --方法解释看methods realizes目录  源码在platforms\web\util\element.js
isReservedTag        --方法解释看methods realizes目录  源码在platforms\web\util\element.js
getTagNamespace      --这个方法就不做解释了比较简单     源码在platforms\web\util\element.js
mustUseProp          --方法解释看methods realizes目录  源码在platforms\web\util\attrs.js

然后这里到了extend方法，这个和Vue.extend不一样的，我们来看一下src\shared\util


export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

好吧，这个就是object的继承吧，把后者的属性赋值给前者，最后返回前者，然后我们找到这两个东西

platforms/web/runtime/directives/index
platforms/web/runtime/components/index

这两个文件夹里面有6个js文件，很熟悉的东东，就是常用的v-model,v-show,transition组件了，在上
一篇有提到过的


// 还记得Vue.options这个值是这样的

Vue.options = {
    components: {
      KeepAlive: {

      },
      // 这两个是Vue自带的，在另一个地方初始化的，这里暂时这样理解就好，存在这两个方法的
      Transition: {

      },
      TransitionGroup: {

      },
      my-component: {

      }
    },
    directives: {
      // 这两个是Vue自带的，在另一个地方初始化的，这里暂时这样理解就好，存在这两个方法的
      model: {

      },
      show: {

      },
      // 如果经过了第一种方法注册指令，那么就会添加下面一个了
      demo: {
        bind: function () {
          // some methods
        }
      }
    },
    filters: {}
}

那么自带的东东就是在这里初始化的了通过这两个操作，这里水平有限，暂时搁着 - -#

extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

然后到了Vue.prototype.patch

这个东西涉及太多，包括vdom和渲染rander等等，水平有限，暂时搁着 - -#

主要就是看这个Vue.prototype.$mount

这里有个query(el)，这个源码在platforms\web\util\index.js里面，主要就是获取el这个dom元素

然后执行this._mount(el, hydrating)，这个方法后续再讲，这个是Vue实例启动了的方法，至于第二个
参数hydrating，这个貌似是服务端渲染才要用到的，个人猜想

然后再到了同目录下的web-runtime-with-compiler.js文件，这个文件重写了$mount方法，查了下资料以及
官方的说法大概就是，独立构建时带有模板编译功能的初始化方法，还是直接看代码吧

首先const mount = Vue.prototype. $mount缓存了上面的$ mount方法，然后重写，query(el)获取dom，
然后判断dom不能是body标签或者html标签，获取this.$options，这个实际上就是new Vue传入的参数
后面讲数据绑定的时候会经常用到，这里举个栗子说明一下吧：


var options = {
  el: '#app',
  data () {
    return {
      msg: 'hello world'
    }
  }
}

new Vue(options)

// 这个就是这个options，一个对象字面量，然后有if (!options.render)这样的一个判断，这里要
// 说下Vue的三种写法：Render函数，template模板，el绑定

第一种：Render函数


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Render函数</title>
</head>
<body>
  <div id="app">

  </div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>

var options = {
  el: '#app',
  data () {
    return {
      msg: 'hello world'
    }
  },
  render: function (createElement) {
    return createElement('h1', this.msg)
  }
}


new Vue(options)


</script>
</html>

// 这种写法就是最底层的写法，性能最好，但是难以理解，这里方法还有更复杂的方式，后面的两种写法
// 最后会经过一些列的算法，比如AST解析再转换成render函数，最后还是得出这样的形式，这里这种方
// 法不讨论了

第二种：template模板，这里又有三种情况


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
</head>
<body>
  <div id="app">

  </div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>

var options = {
  el: '#app',
  data () {
    return {
      msg: 'hello world'
    }
  },
  template: '<h1 style="color: red;">{{msg}}</h1>'
}

new Vue(options)


</script>
</html>

// 这是第一种情况
// 这种写法因为没有render函数，则会进入if语句里面，然后这里let template = options.template获取
// 字符串模板后就直接进入compileToFunctions这个方法了


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
</head>
<body>
  <div id="app">

  </div>
</body>
<script type="text/javascript" src="vue.js"></script>

<script id="my-tel">
  `<h1 style="color: blue;">{{msg}}</h1>`
</script>

<script>

var options = {
 el: '#app',
 data () {
   return {
     msg: 'hello world'
   }
 },
 template: '#my-tel'
}

new Vue(options)


</script>
</html>

// 这是第二种情况
// 这种写法因为没有render函数，则会进入if语句里面，然后进入if (template.charAt(0) === '#')
// idToTemplate方法执行，方法解释见methods realizes目录
// 之后就直接进入compileToFunctions这个方法了


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
</head>
<body>
  <div id="app">

  </div>

  <template id="typeByMe">
    <div>
      <p style="color: red">{{msg}} No.1</p>
      <p style="color: blue">{{msg}} No.2</p>
    </div>
  </template>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>

var options = {
  el: '#app',
  data () {
    return {
      msg: 'hello world'
    }
  },
  template: document.getElementById('typeByMe')
}

new Vue(options)

</script>
</html>

// 第三种则走if (template.nodeType)这里，这个就很好理解了，因为这里的template是dom节点
// 所以里面直接就获取innerHTML了，和第二种差不多，只是这里自己手动获取了dom节点
// 之后就直接进入compileToFunctions这个方法了

第三种：el绑定方法，这种便是我们最常用的了


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>el绑定</title>
</head>
<body>
  <div id="app">
    <p style="color: blue">{{msg}}</p>
  </div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>

var options = {
  el: '#app',
  data () {
    return {
      msg: 'hello world'
    }
  }
}

new Vue(options)

</script>
</html>

// 这种则走template = getOuterHTML(el)这个方法，这里el就是dom节点，通过query(el)方法获取的
// getOuterHTML方法就在下面，获取元素的el元素的html片段，最后template也是一段字符串模板了
// 之后就直接进入compileToFunctions这个方法了，这个方法先不看了，很复杂

// 这个方法返回对象{ render, staticRenderFns }，然后绑定在options上面

// options.render = render   也就是下面这个方法

function anonymous() {
  with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticStyle:{"color":"blue"}},[_v(_s(msg))])])}
}

这个并不是一个自定义的方法名字，它的创建其实是这样子的，算是一种比较特殊的创建函数方式

var code = 'var co = 12;co = co + 1;return co'

var a = new Function(code)

console.log(a)

输出 =>
function anonymous() {
  var co = 12;co = co + 1;return co
}

console.log(a())

输出 => 13

最后还是调用先前缓存下来的mount方法，这个下一节再说

关于这个可以参考这位大神的文章

【Vue源码探究二】从 $mount 讲起，一起探究Vue的渲染机制

剩下的几个问题


Vue.set = set                       // 涉及到Vue的数据响应式系统，先保留
Vue.delete = del                    // 涉及到Vue的数据响应式系统，先保留
Vue.nextTick = util.nextTick        // 水平有限，看不懂 - -#
initMixin(Vue)                      // 这个后面再讲
initExtend(Vue)                     // 水平有限，看不懂 - -#


extend(Vue.options.directives, platformDirectives)  // 水平有限，看不懂 - -#
extend(Vue.options.components, platformComponents)  // 水平有限，看不懂 - -#
Vue.prototype.__patch__                             // 水平有限，看不懂 - -#
compileToFunctions                                  // 水平有限，看不懂 - -#

2.最俗学习之-Vue源码学习-引入篇(中)

猜你喜欢