自己实现一个vue插件第一步

通过rollup打包vue.js插件,上一篇文章讲解了怎么通过rollup打包一个js库

vue是mvvm结构，

M (model)：模型对象：指的是构成界面内容的相关数据
V(view): view: 视图对象：指的是给用户或者开发者展示数据的界面
VM(viewmodel): 视图模型对象：是view与model之间的桥梁

Vue.js的核心ViewModel

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。


<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
  <title>
  vue-rollup打包项目第一步
  </title>
</head>

<body>
   <div id="app">
     Vue
   </div>
    <script language="JavaScript" type="text/javascript"  src="../dist/vue.js" ></script>
    <script>
      let vm=new Vue({
        el:'#app',
        data:{}
      })
    </script>
</body>

</html>

初始化vue

初始化init,采用文件模块化实现，针对initMixin的混入

打包后

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Vue = factory());
})(this, (function () { 'use strict';
  function initMixin(Vue) {
    Vue.prototype._init = function (option) {
      this.$option = option;
    };
  }
  function Vue(option) {
    this._init(option);
  }
  console.log(initMixin);
  initMixin(Vue);
  return Vue;

}));

根据data，进行监听

首先判断data是否是一个函数，是的话，执行函数，再根据data判断是否是对象，data必须是一个对象，否则return

再根据data，进行监听

先写一个简易版的监听，只监听了data的第一层

utils/index.js


export const isFunction = function(obj) {      
  return Object.prototype.toString.call(obj) === '[object Function]' 
 }
 export const isObject=function(obj){
   return Object.prototype.toString.call(obj) == '[object Object]' 
 }

observe/index


import {isObject} from '../utils/index'
export default function observe(data){
if(!isObject(data)){
return
}
return new Observe(data)
}
function Observe(data){
Object.keys(data).forEach(key=>{
  console.log(data,key,data[key])
  defineReactive(data,key,data[key])
})
}
function defineReactive(data,key,value){
  let newValue=undefined
  Object.defineProperty(data,key,{
    enumerable: true,
    configurable: true,
    get(){
      return newValue||value
    },
    set(value){
      observe(value)
      newValue=value
      return value
    }
  })
}

将其写成一个class

import {isObject} from '../utils/index'
 class Observe{
  constructor(data){
    this.walk(data)
  }
  walk(data){
    Object.keys(data).forEach(key=>{
      defineReactive(data,key,data[key])
    })
  }
}
function defineReactive(data,key,value){
  Object.defineProperty(data,key,{
    get (){
      return value
    },
    set(newVlaue){
      observe(newVlaue)
      value= newVlaue
    }
  })
}
export default function observe(data){
  if(!isObject(data)){
  return
  }
  new Observe(data)
}

即初版针对data的监听就好了

自己实现一个vue插件第一步

Vue.js的核心ViewModel

根据data，进行监听

猜你喜欢