【手把手系列之】实现一个简易版vue2

头像
普通程序员
    阅读 16 分钟
    8

    说明

    本文主要教大家一步一步实现一个简易的vue2，下一篇将会教大家实现vue3

    实现的功能点：

    1. 利用snabbdom实现虚拟dom与patch等(vue的虚拟dom也是参考snabbdom的)
    2. 数据双向绑定（包括data, computed, watch）
    3. 实现绑定methods，以改变数据状态
    4. 实现定义组件
    5. 实现jsx，即我们可以写jsx代码来替代前面的写render函数

    项目目录结构与vue2源码一致，通过本项目的学习，你也能对vue的具体实现有一个较全面的了解。相信当你去阅读vue源码时会更得心应手。

    通过本文的学习，你可以了解

    1. 如何实现一个mvvm
    2. 如何把jsx代码转为虚拟dom，虚拟dom的结构是怎样的
    3. vue是如何实现计算属性，监听器等
    4. Vue组件是如何工作的
    5. 帮你理解vue的源码，并实现一个vue
    6. ……等等

    下面我们就手把手实现一个vue2吧

    代码已上传到 https://github.com/aoping/vue...

    大家可以根据commit来看是如何一步一步实现vue2的(注意从下到上)

    一、搭建项目

    本节目标是用搭建项目的大概结构，我们用parcel打包我们的应用，入口是index.html

    项目结构如下：

    package.json 这个没什么好解释的

    {
  "name": "snabbdom-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "snabbdom": "0.7.3"
  },
  "devDependencies": {
    "@babel/core": "7.2.0",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}

    index.html 这个也不解释

    <!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>

    <script src="src/index.js">
    </script>
</body>

</html>

    index.js

    console.log('sss')

    现在通过npm start就可以启动项目了

    这样我们就完成了第一步

    二、snabbdom实现render

    在第一步的基础上修改index.js

    实现的功能：

    1. 把data代理到Vue实例上，即我们可以通过this.title来访问data里的title
    2. 把title渲染到页面上
    3. 实现监听click事件,打印log
    import { h, init } from 'snabbdom'
// init 方法用来创建 patch 函数
// 注意这里要require这些包，才能监听点击事件等
const patch = init([
  require('snabbdom/modules/class').default, // makes it easy to toggle classes
  require('snabbdom/modules/props').default, // for setting properties on DOM elements
  require('snabbdom/modules/style').default, // handles styling on elements with support for animations
  require('snabbdom/modules/eventlisteners').default, // attaches event listeners
])

function someFn() {
  console.log("got clicked");
}

// // 两秒之后重渲染
// setTimeout(() => {
//   // 数据变更，产出新的 VNode
//   const nextVnode = MyComponent({ title: 'next' })
//   // 通过对比新旧 VNode，高效的渲染真实 DOM
//   patch(prevVnode, nextVnode)
// }, 2000)



function Vue(options) {
  debugger
  this._init(options)
}

Vue.prototype._s = function (text) {
  return this[text]
}

Vue.prototype._init = function(options){
  this.$options = options
  initData(this)
  this.$mount(this.$options.el)
}

function initData(vm) {
  let data = vm._data = vm.$options.data
  const keys = Object.keys(data)
  let i = keys.length
  while (i--) {
    const key = keys[i]
    proxy(vm, `_data`, key)
  }
}

function noop () {}

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

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


Vue.prototype.$mount =function (el) {
  const vnode = this.$options.render.call(this)
  debugger
  patch(document.querySelector(el), vnode)
}


var vm = new Vue({
  el: '#app',
  data: {
    title: 'prev',
  },
  render() {
    return h('button', {on: {click: someFn}}, this.title);
  }
})

    执行npm start结果如下

    三、调整一下目录

    这节的目的就是把我们的目录调整的跟vue源码一致，方便我们以后阅读vue源码能一一对应上

    修改后的index.js, 是不是跟vue一模一样

    import Vue from './src/platforms/web/entry-runtime-with-compiler'

var vm = new Vue({
  el: '#app',
  data: {
    title: 'prev',
  },
  render(h) {
    return h('button', {on: {click: this.$options.methods.someFn}}, this.title);
  },
  methods: {
    someFn() {
      console.log("got clicked");
    }
  }
})

    这里就不贴全部的代码了，大家可以reset到chroe: 调整目录这个commit

    四、优化：把methods绑定到Vue实例上

    这节的目的是把methods绑定到Vue实例上，这样我们就能直接通过this.someFn来访问方法了，而不用像上一节通过this.$options.methods.someFn

    改动如下：

    五、实现双向绑定

    先讲讲整个原理：

    观察data的每个属性

    observe(data)

    observe实现

    data的每个key都有一个dep，这个是用来收集依赖，即watcher的（后面会介绍）

    这里主要是给key设置了getter、setter，当我们获取key的时候就把watcher加入到dep里，当我们给key赋值时就通知dep执行依赖

    Dep.target是用来保存目前是在哪个watcher里的

    import Dep from "./dep";

export function observe(data) {
  if (!data || typeof data !== 'object') {
    return;
  }
  for (var key in data) {
    var dep = new Dep()
    let val = data[key]
    observe(val)
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        console.log('gggg')
        if (Dep.target) {
          dep.addSub(Dep.target)
        }
        return val
      },
      set(newVal) {
        if (val === newVal) return;
        console.log('sss')
        val = newVal
        dep.notify(); // 通知所有订阅者
      },
    })
  }
}

// function Observer(key) {

// }

    实现Dep

    在上一步我们引入了一个Dep, 这个用来收集依赖，保存在subs这个数组里, 这里是简化版，目的是让大家先对这个原理有个了解

    export default function Dep() {
  this.subs = [];
}
Dep.prototype.addSub = function(sub) {
  this.subs.push(sub);
}

Dep.prototype.notify = function() {
  this.subs.forEach(function(sub) {
      sub.update();
  });
}
Dep.target = null

    渲染组件

    当我们渲染组件的时候，我们会new一个watcher，这个我们称之为渲染watcher，后面还会介绍user watcher等

    patch过程大家可以先不看，就是利用snabbdom来实现的，这里我们主要关心new Watcher(vm, updateComponent)

    import { h } from 'snabbdom'
import { noop, } from '../util/index'
import Watcher from '../observer/watcher'
import { patch } from 'web/runtime/patch'

export function mountComponent (vm, el) {
  let updateComponent = () => {
    const vnode = vm.$options.render.call(vm, h)
    if (vm._vnode) {
      patch(vm._vnode, vnode)
    } else {
      patch(document.querySelector(el), vnode)
    }
    vm._vnode = vnode

  }

  new Watcher(vm, updateComponent)
}

    实现watcher

    这个也很简单，需要注意的是new的时候会执行一次

    import Dep from './dep'

export default function Watcher(vm, cb) {
  this.cb = cb;
  this.vm = vm;
  // 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
  this.value = this.get(); 
}

Watcher.prototype.get = function() {
  Dep.target = this
  this.cb.call(this.vm)
  Dep.target = null
}

Watcher.prototype.update = function() {
  return this.get(); 
}

    到这里我们就已经实现了一个简易的vue2

    改一改render

    为了看效果，我们稍微改一下render

    import Vue from './src/platforms/web/entry-runtime'

var vm = new Vue({
  el: '#app',
  data: {
    title: 'prev',
    num: 1,
    deep: {
      num: 1
    }
  },
  render(h) {
    return h('button', {on: {click: this.someFn}}, this.deep.num);
  },
  methods: {
    someFn() {
      this.deep.num++
    }
  }
})

    查看效果

    六、实现计算属性

    目标：实现计算属性，改变它依赖的data时，计算属性相应的改变

    修改new Vue

    增加一个计算属性，并渲染它

    import Vue from './src/platforms/web/entry-runtime'

var vm = new Vue({
  el: '#app',
  data: {
    title: 'prev',
    num: 1,
    deep: {
      num: 1
    }
  },
  computed: {
    computedNum() {
      return this.num * 10
    }
  },
  render(h) {
    return h('button', {on: {click: this.someFn}}, this.computedNum);
  },
  methods: {
    someFn() {
      this.num++
    }
  }
})

// setTimeout(() => {
//   vm.deep.num++
// }, 3000)

    修改core/instance/state.js

    主要改动如下：

    export function initState (vm) {
  ……
  + if (opts.computed) initComputed(vm, opts.computed)
  ……
}


function initComputed(vm, computed) {
  vm._computedWatchers = Object.create(null) // 用于保存计算watcher

  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    vm._computedWatchers[key] = new Watcher(vm, getter, computedWatcherOptions)

    defineComputed(vm, key, userDef)
  }
}

function defineComputed(target, key, userDef) {
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get() {
      debugger

      const watcher = this._computedWatchers && this._computedWatchers[key]
      if (watcher) {
        if (watcher.dirty) {
          watcher.evaluate()
        }
        if (Dep.target) {
          watcher.depend()
        }
        return watcher.value
      }
    },
    set: noop,
  })
}

    这里也是给key设置getter,并用_computedWatchers保存一个计算watcher,当获取key时就执行这个watcher，并把当前的Dep.target加入到key依赖的data的dep里（这里有点绕，在这个例子中就是当执行render（这时新建了一个渲染watcher）的时候会获取this.computedNum，这个是根据this.num计算出来的，所以就会把渲染watcher加入到num的dep里）

    改造Dep

    let uid = 0

export default function Dep() {
  this.id = ++uid // uid for batching
  this.subs = [];
  this.subIds = new Set();

}
Dep.prototype.addSub = function(sub) {
  if (!this.subIds.has(sub.id)) {
    this.subs.push(sub);
    this.subIds.add(sub.id);
  }
}

Dep.prototype.depend = function() {
  if (Dep.target) {
    Dep.target.addDep(this)
  }
}

Dep.prototype.notify = function() {
  this.subs.forEach(function(sub) {
      sub.update();
  });
}
Dep.target = null
const targetStack = []

export function pushTarget (target) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget () {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}

    这里targetStack是用来保存Dep.target的

    改造watcher

    import Dep, {pushTarget, popTarget} from './dep'
let uid = 0

export default function Watcher(vm, expOrFn, options) {
  this.id = ++uid // uid for batching
  this.expOrFn = expOrFn;
  this.vm = vm;
  this.deps = []
  this.depIds = new Set();
  if (options) {
    this.lazy = !!options.lazy
  } else {
    this.lazy = false
  }

  this.dirty = this.lazy // 用于渲染时不把计算watcher设置成Dep.target
  // 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
  this.value = this.lazy ? undefined :this.get(); 
}

Watcher.prototype.get = function() {
  let value;
  pushTarget(this)

  // if (this.dirty) Dep.target = this
  value = this.expOrFn.call(this.vm)
  // if (this.dirty) Dep.target = null
  popTarget()
  return value
}

Watcher.prototype.update = function() {
  if (this.lazy) {
    this.dirty = true;
  } else {
    this.get(); 
  }
}

Watcher.prototype.addDep = function(dep) {
  const id = dep.id
  if (!this.depIds.has(id)) {
    this.deps.push(dep)
    this.depIds.add(id)
    dep.addSub(this)
  }
}

Watcher.prototype.evaluate = function() {
  this.value = this.get()
  this.dirty = false
}

Watcher.prototype.depend = function() {
  let i = this.deps.length
  while (i--) {
    this.deps[i].depend()
  }
}

    到这里我们就实现了计算属性

    七、实现watch

    目的：改变num，watchMsg的值也改变

    修改render

    import Vue from './src/platforms/web/entry-runtime'

var vm = new Vue({
  el: '#app',
  data: {
    num: 1,
    watchMsg: 'init msg'
  },
  watch: {
    num(newVal, oldVal) {
      this.watchMsg = newVal + ' apples'
    },
  },
  render(h) {
    return h('button', {on: {click: this.someFn}}, this.watchMsg);
  },
  methods: {
    someFn() {
      this.num++
    }
  }
})

    初始化watch

    function initWatch(vm, watch) {
  debugger
  for (const key in watch) {
    const handler = watch[key]
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

function createWatcher (vm, expOrFn, handler, options) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}

export function stateMixin(Vue) {
  Vue.prototype.$watch = function (expOrFn, cb, options) {
    const vm = this
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    // return function unwatchFn () {
    //   watcher.teardown()
    // }
  }
}

    这里主要是new了一个Watcher

    改造watcher

    import Dep, {pushTarget, popTarget} from './dep'
import { parsePath } from '../util/lang'

let uid = 0

export default function Watcher(vm, expOrFn, cb, options) {
  this.id = ++uid // uid for batching
  this.cb = cb
  this.vm = vm;
  this.deps = []
  this.depIds = new Set();
  if (options) {
    this.user = !!options.user // user表示是否是用户定义的watcher,即我们在new Vue({watch:{}})里的watch
    this.lazy = !!options.lazy
  } else {
    this.user = this.lazy = false
  }

  this.dirty = this.lazy // 用于渲染时不把计算watcher设置成Dep.target
  this.getter = typeof expOrFn === 'function' ? expOrFn : parsePath(expOrFn);

  this.value = this.lazy ? undefined :this.get(); 
}

Watcher.prototype.get = function() {
  let value;
  const vm = this.vm
  pushTarget(this)

  value = this.getter.call(vm, vm)
  popTarget()
  return value
}

Watcher.prototype.update = function() {
  if (this.lazy) {
    this.dirty = true;
  } else {
    this.run(); 
  }
}

Watcher.prototype.addDep = function(dep) {
  const id = dep.id
  if (!this.depIds.has(id)) {
    this.deps.push(dep)
    this.depIds.add(id)
    dep.addSub(this)
  }
}

Watcher.prototype.evaluate = function() {
  this.value = this.get()
  this.dirty = false
}

Watcher.prototype.depend = function() {
  let i = this.deps.length
  while (i--) {
    this.deps[i].depend()
  }
}

Watcher.prototype.run = function() {
  const value = this.get()
  // 变化时才执行
  if (value !== this.value) {
    const oldValue = this.value
    this.value = value
    if (this.user) {
      try {
        this.cb.call(this.vm, value, oldValue)
      } catch (e) {
        console.error(`callback for watcher "${this.expression}"`)
      }
    } else {
      this.cb.call(this.vm, value, oldValue)
    }
  }
}

Watcher.prototype.teardown = function() {
  
}

    八、实现组件系统

    到目前为止，我们都不能自定义一个组件,那本节的目的就是实现自定义组件

    修改render

    这里我们自定义了一个button-counter的组件

    import Vue from './src/platforms/web/entry-runtime'

Vue.component('button-counter', {
  data: function () {
    return {
      num: 0
    }
  },
  render(h) {
    return h('button', {on: {click: this.someFn}}, this.num);
  },
  methods: {
    someFn() {
      this.num++
    }
  }
})

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello'
  },
  render(h) {
    return h('div', {}, [
      this._c('button-counter'),
      h('span', {}, this.msg)
    ]);
  },
})

    实现Vue.component

    这个api是通过initGlobalAPI(Vue)挂载到Vue上的

    实现在core/global-api/assets.js里

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

export function initAssetRegisters (Vue) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (id, definition) {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          // 这里组件继承Vue
          definition = this.options._base.extend(definition)
        }
        // TODO:暂时先不实现directive
        // if (type === 'directive' && typeof definition === 'function') {
        //   definition = { bind: definition, update: definition }
        // }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

    之前我们都是直接渲染根元素，这里我们要考虑怎么渲染一个组件

    render组件

    其实也是调用组件里的render方法

    先拿到构造函数，然后调用render就可以了

    import { h } from 'snabbdom'

let cachaComp = {}

export function initRender (vm) {
  vm._c = (tag, options) => {
    var Ctor = vm.constructor.options['components'][tag]
    var sub
    // 缓存组件，避免已初始化的组件被重新初始化
    if (cachaComp[tag]) {
      sub = cachaComp[tag]
    } else {
      sub = cachaComp[tag] = new Ctor(Ctor.options)
    }
    return Ctor.options.render.call(sub, h)
    // const vnode = createComponent(Ctor, data, context, children, tag)
    // return vnode
  }
}

function createComponent(Ctor) {

}

export function renderMixin (Vue) {

  Vue.prototype._render = function () {
    const vm = this
    const { render, _parentVnode } = vm.$options
    vm.$vnode = _parentVnode

    let vnode
    vnode = render.call(vm, h)
    vnode.parent = _parentVnode

    return vnode
  }

}

    九、实现compiler

    目标：我们可以直接写jsx，即可以直接写
    <button onClick={this.someFn}>{this.num}</button>
    而不用像之前那样写个h('button', {on: {click: this.someFn}}, this.num)

    修改render

    import Vue, { compiler } from './src/platforms/web/entry-runtime-with-compiler'

Vue.component('button-counter', {
  data: function () {
    return {
      num: 0
    }
  },
  render(h) {
    var button = <button onClick={this.someFn}>{this.num}</button>
    return button
    // return h('button', {on: {click: this.someFn}}, this.num);
  },
  methods: {
    someFn() {
      this.num++
    }
  }
})

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello'
  },
  render(h) {
    return (
      <div>
        {this._c('button-counter')}
        <span>{this.msg}</span>
      </div>
    )
    // return h('div', {}, [
    //   this._c('button-counter'),
    //   h('span', {}, this.msg)
    // ]);
  },
})

    这里我们要借助@babel/plugin-transform-react-jsx实现jsx语法

    配置@babel/plugin-transform-react-jsx

    .babelrc

    {
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "compiler"
      }
    ]
  ]
}

    这里compiler是我们定义的用来处理jsx的函数

    实现compiler函数

    其实就是返回h('button', {on: {click: this.someFn}}, this.num)

    import Vue from './runtime/index'
import { h } from 'snabbdom'

export function compiler(tag, attrs) {
  let props = attrs || {}
  let children = []
  let options = {
    on: {}
  }
  for (const k in props) {
    if (k[0] === 'o' && k[1] === 'n') {
      options.on[k.slice(2).toLocaleLowerCase()] = props[k]
    }
  }

  for (let i = 2; i < arguments.length; i++) {
    let vnode = arguments[i]
    children.push(vnode)
  }
  return h(tag, options, children)
}

export default Vue

    就是这么简单!!!

    完结
    本篇文章由一文多发平台ArtiPub自动发布

    前端
    普通程序员
    4k 声望811 粉丝

    分享IT干货，内推大厂

    « 上一篇
    Go2Shell 无法使用的替代方案
    下一篇 »
    【图解】帮你理解作用域与setTimeout

    引用和评论

    推荐阅读
    头像
    webpack官网指南demo

    普通程序员赞 4阅读 2.8k评论 1

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    0 条评论
    得票最新