vueSchool
- 前言
Vue 目录
这个是一个 hello world案例
- 源码入门摆脱 webpack
- createElement源码解析

vueSchool

https://github.com/logictuLuoqi/vueSchool

前言

其实 vue 的文档要写出和官网不一样的感觉很难应为官方文档写的已经很好了但目前很少人去读完 vue 的整个文档目前现在我看到不少人说 webpack 不用学都有人配好了入门开始直接 vuecli 这样其实是不对的我准备以 vue 源码为基础讲 vue 的技术我们的目标是培养看懂源码的 vue 工程师

Vue 目录

01 helloworld https://github.com/logictuLuoqi/vueSchool/blob/master/code/01-helloworld/HelloWorld.md

这个是一个 hello world案例

我们不考虑打包工具来写一个vue

webpack的作用就是帮助我们的代码装换成浏览器认识的样子

源码入门摆脱 webpack

下面我用原始的方法来写一个hello world

const HelloWorld = Vue.component('hello-world', Vue.extend({
    data(){
        return {
            hello: "helloworld"
        }
    },
    render(h){
        return h('div', {}, this.hello)
    }
}))
new Vue({
    render: h => h(HelloWorld)
}).$mount('#app1')

看到这里很多人就不懂了这样说吧这种写法等于下面这种只不过下面这种必须webpack webpack是带包工具打包完压缩压缩的解压缩就是上面的样子

<template>
    <div style="height: 100%">
        helloworld
    </div>
</template>
<script>
</script>

其实你们都被 webpack骗了这个编译之前的代码编译之后就是我们用原生方法写的样子

编译过程我放在vue-loader的时候详细讲解

template=createElement

extend

需要一个obj {} 作为参数使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

Vue.component

Vue.component(给定一个组件名称, extend)

render

需要一个 VNnode参数 Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。性能需要这样

去看看 createElement源码解析

$mount

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

el

如果存有el则调用$mount开始挂载

if (vm.$options.el) {
    vm.$mount(vm.$options.el)
}

源码

createElement源码解析

源码地址在 vue(git clone)/src/core/vdom/create-element.js 这个我们会在虚拟dom分析

export function createElement (
  context: Component, // vue的实例
  tag: any, // 我们传入的标签
  data: any, // 我们呢传入的数据
  children: any, // 下面的子元素
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  // h('div', {}, 'helloworld') == h('div', 'helloworld')
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
}

源码解析到这里

01-helloworld