The first step to implement a vue plug-in by yourself

Package the vue.js plug-in through rollup, the previous article explained how to package a js library through rollup

rollup packaging project_qq_27449993's blog-CSDN blog

Vue is an mvvm structure,

M (model): model object: refers to the relevant data that constitutes the content of the interface
V(view): view: view object: refers to the interface that displays data to users or developers
VM(viewmodel): view model object: a bridge between view and model

The core ViewModel of Vue.js

ViewModel is the core of Vue.js, it is a Vue instance. The Vue instance acts on an HTML element, which can be the body element of HTML, or an element with an id specified.


<!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>

Initialize vue

Initialize init, using file modularization, for mixing initMixin

after packing

(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;

}));

According to data, monitor

First judge whether data is a function, if yes, execute the function, and then judge whether it is an object according to data, data must be an object, otherwise return

Then according to the data, monitor

First write a simple version of the monitor, only the first layer of data is monitored

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
    }
  })
}

write it as a 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)
}

That is, the first version of the monitoring for data is fine.