Vue2 API-源码解析

is今夕

已于 2023-05-21 21:52:17 修改

阅读量687

点赞数

分类专栏：前端 # vue 文章标签：前端

于 2023-04-11 17:31:46 首次发布

本文链接：https://blog.csdn.net/the_love_story/article/details/129179935

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

Vue.extend(option)

delimiters

functional

Vue.component(id, Function | Object)

Vue.directive( id, [definition] )

Vue.filter( id, function)

Vue.nextTick()

Vue.set()

Vue.delete(target, index/key)

Vue.compile(template)

Vue.observable(object)

provide/inject

extends、mixins

Vue.extend(option)

作用：返回一个vue子组件的构造函数

参数：创建vue实例的参数

<template>
  <div id="home">
    <div>home</div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: "",
  mounted() {
    // 创建子组件构造函数 VueComponent
    var VueComponentFun = Vue.extend({
      template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
      data: function () {
        return {
          firstName: "Walter",
          lastName: "White",
          alias: "Heisenberg",
        };
      },
    });
    // 挂载到一个元素上。
    new VueComponentFun().$mount("#home");
  },
};
</script>

home节点被替换掉，渲染结果如下

源码：

调用Vue.prototype._init()进行数据初始化 - created周期
继承Vue函数挂载的全局API extend、mixin、use、component, directive, filter

    Vue.extend = function (extendOptions) {
        extendOptions = extendOptions || {};
        var Super = this;
        ......
        //创建子类（子组件构造函数），先调用父类的方法进行初始化
        var Sub = function VueComponent(options) {
            this._init(options);
        };
        //创建子类的原型对象
        Sub.prototype = Object.create(Super.prototype);
        Sub.prototype.constructor = Sub;

        Sub.options = mergeOptions(Super.options, extendOptions);
        Sub['super'] = Super;
        //对props属性做set、get拦截
        if (Sub.options.props) {
            initProps(Sub);
        }
        if (Sub.options.computed) {
            initComputed(Sub);
        }

        Sub.extend = Super.extend;
        Sub.mixin = Super.mixin;
        Sub.use = Super.use;
        //赋值生命周期
        ASSET_TYPES.forEach(function (type) {
            Sub[type] = Super[type];
        });
        ......

        return Sub;
    };

delimiters

作用：分隔符，定义模板字符串的变量标识

上面的代码可改为

template: "<p @click='add'>{firstName} {lastName} aka {num}</p>",
delimiters: ['{', '}'],

functional

作用：函数组件，没有响应式数据，也没有实例（this），使用functional:true生命，使用render生成Dom

优点： 1.使用render 函数返回虚拟节点使它们渲染的代价更小；2.不需要实例化

Vue.component('custom-component', Vue.extend({
  functional: true,
  props: {
    params: String,
  },
  render: function (h, context) {
    let props = context.props
    return h('div', { class: 'custom' }, [
      h('div', {
        domProps: {
          innerText: props.params,
        },
        class: ['custom_button'],
        on: {
          click: () => {
            console.log("click")
          },
        },
      })
    ])
  }
}))

Vue.component(id, Function | Object)

作用：注册或获取全局组件

有下面两种方法生成组件

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

Vue.directive( id, [definition] )

作用：添加自定义指令，可以在绑定的元素未插入到Dom内时，判断Dom是否存在

参数：指令名称、函数

回调参数：

el：指令绑定到的元素

binding：指令接收的参数

value：指令绑定的对象
oldValue：指令绑定的对象修改之前的值
expression：字符串形式的指令表达式

Vue.directive('focus', {
  // 指令与元素成功绑定时调用
  bind: function (el, binding) {
  },
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
  },
  // 命令所绑定的dom及数据有变化时，
  update: function (el, binding) {
  },
  // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
  componentUpdated: function (el, binding) {
  },
  // 指令与元素解绑时调用
  unbind: function (el, binding) {
  }
})

 <div  v-focus="{name:a}"></div>

Vue.filter( id, function)

作用：过滤器

参数：被处理的值、接受的其他传参(多个)

//main.js
Vue.filter('capitalize', function (value, a) {
  // 被处理的值、参数...
  if (!value) return "";
  return value + a;
})

//home.vue
<template>
  <div id="home">
    <!-- 大括号绑定，页面显示11 -->
    <div>{{ a | capitalize(10) }}</div> 
    <!-- v-bind绑定 -->
    <A :pd="b | capitalize"></A>
  </div>
</template>

<script>
import A from "./A.vue";
export default {
  name: "",
  components: {
    A,
  },
  data() {
    return {
      a: 1,
    };
  },
};
</script>

源码：['component', 'directive', 'filter'] 直接返回回调函数

function initAssetRegisters(Vue) {
    ASSET_TYPES.forEach(function (type) {
        // @ts-expect-error function is not exact same type
        Vue[type] = function (id, definition) {
            if (!definition) {
                return this.options[type + 's'][id];
            }
            else {
                ......
                if (type === 'component' && isPlainObject(definition)) {
                    // @ts-expect-error
                    definition.name = definition.name || id;
                    // this.options._base = Vue构造函数,就是直接调用Vue.extend
                    definition = this.options._base.extend(definition);
                }
                if (type === 'directive' && isFunction(definition)) {
                    definition = { bind: definition, update: definition };
                }
                // 给当前实例this添加{id: definition}
                this.options[type + 's'][id] = definition;
                return definition;
            }
        };
    });
}

Vue.nextTick()

作用：在 DOM 更新循环结束之后执行延迟回调，vue修改数据时不能及时反映到页面上，需要一轮事务处理，才能获取到页面上修改过的值

参数：callback()、this

用法：

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

注：使用第二种方法时，需要在支持Promise的环境中（IE不支持）

源码：

如果浏览器支持Promise，则使用Promise.resolve()返回一个Promise 对象（微任务），因为微任务会等待主线程的同步任务执行完毕，再执行微任务队列。微任务队列就是下列callbacks数组，这里面会放入回调函数，如果一次同步任务中有多个nextTick，则callback中会有多个回调函数。这些回调函数会在then()回调中执行。

var p_1 = Promise.resolve();
    timerFunc = function () {
        p_1.then(flushCallbacks);

        if (isIOS)
            setTimeout(noop);
    };

function nextTick(cb, ctx) {
    // cb: 回调函数  ctx: this指向
    var _resolve;
    // 回调函数放入数组，如果短时间内多次调用nextTick，则数组中有多个回调函数
    callbacks.push(function () {
        if (cb) {
            try {
                cb.call(ctx);
            }
            catch (e) {
                handleError(e, ctx, 'nextTick');
            }
        }
        else if (_resolve) {
            _resolve(ctx);
        }
    });
    // 执行回调函数; 
    if (!pending) {
        pending = true;
        timerFunc();
    }
    // 支持.then写法
    if (!cb && typeof Promise !== 'undefined') {
        return new Promise(function (resolve) {
            _resolve = resolve;
        });
    }
}

var timerFunc; 
// 实现nextTick用了两种方法，Promise.then or MutationObserver
if (typeof Promise !== 'undefined' && isNative(Promise)) {
    // 浏览器支持Promise的情况，使用Promise
    // 创建微任务，微任务会等到主线程的代码执行完毕，再执行，所以p_1.then实现了nextTick的功能
    var p_1 = Promise.resolve();
    timerFunc = function () {
        p_1.then(flushCallbacks);

        if (isIOS)
            setTimeout(noop);
    };
    isUsingMicroTask = true;
}
else if (!isIE &&
    typeof MutationObserver !== 'undefined' &&
    (isNative(MutationObserver) ||
        // PhantomJS and iOS 7.x
        MutationObserver.toString() === '[object MutationObserverConstructor]')) {
    // Use MutationObserver where native Promise is not available,
    // e.g. PhantomJS, iOS7, Android 4.4
    var counter_1 = 1;
    var observer = new MutationObserver(flushCallbacks);
    var textNode_1 = document.createTextNode(String(counter_1));
    observer.observe(textNode_1, {
        characterData: true
    });
    timerFunc = function () {
        counter_1 = (counter_1 + 1) % 2;
        textNode_1.data = String(counter_1);
    };
    isUsingMicroTask = true;
}
else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = function () {
        setImmediate(flushCallbacks);
    };
}
else {
    timerFunc = function () {
        setTimeout(flushCallbacks, 0);
    };
}

Vue.set()

作用：向具有响应式的对象中添加property，且新的property具有响应式。在创建的过程中对该属性进行依赖收集

<template>
  <div id="home">
    <div id="customComA">{{ obj }}</div>
    <div id="customComB">{{ arr }}</div>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "",
  data() {
    return {
      obj: { name: "zz" },
      arr: [1, 2]
    };
  },
  mounted() {
    // 无效
     this.obj.age = 15
     this.arr[1] = 10

    // Vue.set
    Vue.set(this.obj, 'age', 15)
    Vue.set(this.obj, 1, 10)
  },
};
</script>

源码实现：

对Array对象进行修改，对元素进行响应式化
对Object类型进行赋值，对赋值的新元素进行响应式

function set(target, key, val) {
    // obj|arr , key|index
    if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) {
        warn$2("Cannot set reactive property on undefined, null, or primitive value: ".concat(target));
    }
    if (isReadonly(target)) {
        process.env.NODE_ENV !== 'production' && warn$2("Set operation on key \"".concat(key, "\" failed: target is readonly."));
        return;
    }
    var ob = target.__ob__;
    // 对Array对象进行修改，对元素进行响应式化
    if (isArray(target) && isValidArrayIndex(key)) {
        target.length = Math.max(target.length, key);
        target.splice(key, 1, val);
        // when mocking for SSR, array methods are not hijacked
        if (ob && !ob.shallow && ob.mock) {
            observe(val, false, true);
        }
        return val;
    }
    // object修改属性值
    if (key in target && !(key in Object.prototype)) {
        console.log("obj")
        target[key] = val;
        return val;
    }
    if (target._isVue || (ob && ob.vmCount)) {
        process.env.NODE_ENV !== 'production' &&
            warn$2('Avoid adding reactive properties to a Vue instance or its root $data ' +
                'at runtime - declare it upfront in the data option.');
        return val;
    }
    // 对空值的赋值不做其他处理
    if (!ob) {
        target[key] = val;
        return val;
    }
    // object对象新增属性值
    defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock);
    if (process.env.NODE_ENV !== 'production') {
        ob.dep.notify({
            type: "add" /* TriggerOpTypes.ADD */,
            target: target,
            key: key,
            newValue: val,
            oldValue: undefined
        });
    }
    else {
        ob.dep.notify();
    }
    return val;
}

Vue.delete(target, index/key)

作用：删除属性，并触发有关dom的改变

对于Array，使用 target.splice(key, 1);

对于Object，使用 delete target[key]; 并触发监听器ob.dep.notify()

源码：

function del(target, key) {
    if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target))) {
        warn$2("Cannot delete reactive property on undefined, null, or primitive value: ".concat(target));
    }
    // 数组类型的直接操作
    if (isArray(target) && isValidArrayIndex(key)) {
        target.splice(key, 1);
        return;
    }
    var ob = target.__ob__;
    
    ......

    if (!hasOwn(target, key)) {
        return;
    }
    // Object类型
    delete target[key];
    if (!ob) {
        return;
    }
    // 通知删除的该元素关联的依赖
    if (process.env.NODE_ENV !== 'production') {
        ob.dep.notify({
            type: "delete" /* TriggerOpTypes.DELETE */,
            target: target,
            key: key
        });
    }
    else {
        ob.dep.notify();
    }
}

Vue.compile(template)

作用：将一个模板字符串编译成 render 函数（VNode）

//把解析的模板渲染，挂载到.home节点上
let res = Vue.compile("<div class='wrapper'>{{ msg }}</div>");
new Vue({
  data: {
    msg: "hello",
  },
  render: res.render,
  // staticRenderFns: res.staticRenderFns,
}).$mount(".home");

源码：

var _a = createCompiler(baseOptions)

执行createCompiler函数，即createCompilerCreator函数，即执行 createCompiler函数，同时对baseCompile、compile函数进行缓存；

Vue.compile = compileToFunctions;
Vue.compile("<div class='wrapper'>{{ msg }}</div>");

1.执行createCompileToFunctionFn(compile)，即compileToFunctions函数，判断缓存中是否有该模板的编译结果，如果有，取出返回；没有则执行compile函数，之后把获取到的编译结果res.render转化为函数形式，编译结果res写入缓存

2.执行compile函数，先执行baseCompile编译模板template，再在编译结果compiled上添加errors、tips（与options有关，没传入，暂不考虑）

3.执行baseCompile函数，把template模板字符串处理成ast(树状数据结构，未注入真实数据),调用generate把ast转化为render渲染函数字符串形式，返回{ast， render，staticRenderFns）

部分简略源码：

function createCompileToFunctionFn(compile) {
     // compile, 一开始就被缓存的参数
    var cache = Object.create(null);  //对解析的模板进行缓存
    return function compileToFunctions(template, options, vm) {
        /**
         * template: <div class='wrapper'><div>{{ msg }}</div></div>
         * option未传
         */
        console.log("1----compileToFunctions")
        ......
        var key = template;
        if (cache[key]) {
            return cache[key];
        }
        // compile
        var compiled = compile(template, options);
        ......
        var res = {};
        var fnGenErrors = [];
        res.render = createFunction(compiled.render, fnGenErrors);
        res.staticRenderFns = compiled.staticRenderFns.map(function (code) {
            return createFunction(code, fnGenErrors);
        });
        ......
        return (cache[key] = res);
    };
}

function createCompilerCreator(baseCompile) {
    // baseCompile, 一开始就被缓存的参数
    return function createCompiler(baseOptions) {
        // 先调用createCompiler，什么都不执行，只返回return {compile, compileToFunctions}
        function compile(template, options) {
            console.log("2----compile")
            var finalOptions = Object.create(baseOptions);
            ......
            var compiled = baseCompile(template.trim(), finalOptions);
            if (process.env.NODE_ENV !== 'production') {
                detectErrors(compiled.ast, warn);
            }
            compiled.errors = errors;
            compiled.tips = tips;
            return compiled;
        }
        return {
            compile: compile,
            compileToFunctions: createCompileToFunctionFn(compile)
        };
    };
}

var createCompiler = createCompilerCreator(
    function baseCompile(template, options) {
        console.log("3----baseCompile")
        var ast = parse(template.trim(), options);  // 把template字符串处理成树状数据结构，未注入真实数据
        var code = generate(ast, options); // code: {render, staticRenderFns}
        return {
            ast: ast,
            render: code.render, // render函数
            staticRenderFns: code.staticRenderFns
        };
});
//入口
var _a = createCompiler(baseOptions), compileToFunctions = _a.compileToFunctions;
Vue.compile = compileToFunctions;

Vue.observable(object)

作用：让一个对象可响应，返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器

1.使用计算属性

<template>
  <div id="home">
    <!-- 点击可改变obj、arr, 并能响应页面 -->
    <div @click="changeObj">obj: {{ obj  }}</div>
    <div @click="changeArr">arr: {{ arr  }}</div>
  </div>
</template>

<script>
import Vue from "vue";
// 需要使用computed做中介，供页面使用
const state = Vue.observable({ arr: [1,2,3], obj: {name: 'haha', age: 10} });
console.log("state: ", state); //响应式数据

export default {
  name: "",
  data() {
    return {
    };
  },
  computed: {
    obj(){
      return state.obj
    },
    arr(){
      return state.arr
    }
  },
  methods: {
    changeObj(){
      state.obj.age++
    },
    changeArr(){
      state.arr.push(10)
    },
    pushRouter(){
      this.$router.push("/b")
    }
  },
};
</script>

2.把该步骤单独封装为文件，使用计算属性，可作为跨组件状态存储器使用

// store.js
import Vue from "vue";
const state = Vue.observable({ arr: [1,2,3], obj: {name: 'haha', age: 10} });
export default state

//A页面
<template>
   <div>arr: {{ arr }}</div>
</template>

<script>
import state from "@/store/replaceStore.js";
export default {
  computed: {
    arr() {
      return state.arr;
    },
  },
};
</script>

源码：

function initGlobalAPI(Vue) {
  ......
  Vue.observable = function (obj) {
      observe(obj);
      return obj;
  };
  ......
}

function observe(value, shallow, ssrMockReactivity) {
  // 已经有响应式对象，直接retuen响应式对象
  if (value && hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      return value.__ob__;
  }
  ......
  return new Observer(value, shallow, ssrMockReactivity);
}

function Observer(value, shallow, mock) {
  if (shallow === void 0) { shallow = false; }
  if (mock === void 0) { mock = false; }
  this.value = value;
  this.shallow = shallow;
  this.mock = mock;
  this.dep = mock ? mockDep : new Dep();
  this.vmCount = 0;
  // 给value添加属性{__ob__: Observer对象}, 表示该数据value已经被响应式
  def(value, '__ob__', this);
  if (isArray(value)) {
      if (!mock) {
          if (hasProto) {
              value.__proto__ = arrayMethods;
          }
          else {
              // 对数组进行拦截 
              for (var i = 0, l = arrayKeys.length; i < l; i++) {
                  var key = arrayKeys[i];
                  def(value, key, arrayMethods[key]);
              }
          }
      }
      if (!shallow) {
          this.observeArray(value);
      }
  }
  else {
     // 对每个属性进行响应式  
      var keys = Object.keys(value);
      for (var i = 0; i < keys.length; i++) {
          var key = keys[i];
          defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock);
      }
  }
}

provide/inject

作用：祖孙组件通信

provide：返回一个对象，或者一个返回对象的函数

inject：注入的字段名，可重命名

//返回一个对象
//父组件
provide: {
    msg: 'haha', //--非响应式
    name: this.name, //--简单类型，非响应式
    arr: this.arr, //--Array、Object类型，响应式
},
//子组件
inject: ["name"],

//返回一个函数
//父组件
provide: {
    name: () => this.subName, //--简单类型，响应式
},
//子组件
<template>
   <div>name: {{ name() }}</div>
</template>
inject: ["name"],

v-once

模板只渲染一次，不会根据数据的变化而重新渲染模板

vue内部自定义组件，可以设置过渡效果

参数：

name，会根据name自动生成六个类名，表示不同的过渡阶段

extends、mixins

作用：扩展另一个组件，与minxins原理类似

extends会比mixins先执行。执行顺序：extends > mixins > 组件

<template>
  <div id="home">
    <div>firstName: {{ firstName }}</div>
  </div>
</template>

<script>
export default {
  name: "",
  extends: {
    data: function () {
      return {
        firstName: "Walter"
      };
    },
    mounted() {
      // console.log("mounted: ", this);
    },
  },
};
</script>

源码：使用深搜的方法,把extends、mixin的对象扁平化到组件一级

function mergeOptions(parent, child, vm) {
    if (process.env.NODE_ENV !== 'production') {
        checkComponents(child);
    }
    if (isFunction(child)) {
        // @ts-expect-error
        child = child.options;
    }
    normalizeProps(child, vm);
    normalizeInject(child, vm);
    normalizeDirectives$1(child);

    if (!child._base) {
        if (child.extends) {
            parent = mergeOptions(parent, child.extends, vm);
        }
        if (child.mixins) {
            for (var i = 0, l = child.mixins.length; i < l; i++) {
                parent = mergeOptions(parent, child.mixins[i], vm);
            }
        }
    }
    var options = {};
    var key;
    // 映射parent的key到一级
    for (key in parent) {
        mergeField(key);
    }
     // 映射child的key（parent没有的）到一级
    for (key in child) {
        if (!hasOwn(parent, key)) {
            mergeField(key);
        }
    }
    function mergeField(key) {
        var strat = strats[key] || defaultStrat;
        options[key] = strat(parent[key], child[key], vm, key);
    }
    // 把扁平化的数据返回
    return options;
}