Рукописный исходный код Vue2.0 (7) - Принцип микширования

Vue.js
Рукописный исходный код Vue2.0 (7) - Принцип микширования

предисловие

В этой статье в основном написан исходный код Vue2.0 от руки.Принцип смешивания Mixin

В предыдущей статье мы в основном представили VueПринцип алгоритма сравненияЯдром является использование алгоритма diff для оптимизации рендеринга.Эта статья в основном включает в себя Mixin, который является очень важным API в Vue.Он играет важную роль в объединении параметров при инициализации Vue.

Для людей:

1. Хотите иметь глубокое понимание исходного кода vue для лучшего ежедневного развития бизнеса

2. Хотите владеть исходным кодом vue framework в резюме (больше не боитесь вопросов интервьюера о серийных убийцах, ха-ха)

3. Учащиеся, у которых нет времени смотреть официальный исходный код или им трудно понять с первого взгляда исходный код

текст

Vue.mixin({
  created() {
    console.log("我是全局混入");
  },
});

// Vue实例化
let vm = new Vue({
  el: "#app",
  data() {
    return {
      a: { a: { a: { b: 456 } } },
      aa: 1,
      bb: 2,
    };
  },
  created() {
    console.log("我是自己的");
  },
  template: `<div id="a">hello 这是我自己写的Vue{{name}}
          </div>`,
});

Когда мы хотим повторно использовать кусок логики бизнес-кода во Vue, мы часто используем метод смешивания, но все ли вы знаете порядок смешивания в принципе смешивания и стратегию слияния разных вариантов?

1. Определите глобальную функцию Mixin

// src/global-api/mixin.js

import {mergeOptions} from '../util/index'
export default function initMixin(Vue){
  Vue.mixin = function (mixin) {
    //   合并对象
      this.options=mergeOptions(this.options,mixin)
  };
}
};

Создайте новую папку global-api и определите mixin как глобальный метод Vue.Основной метод заключается в использовании mergeOptions для смешивания входящих параметров с вашими собственными параметрами.

// src/index.js
import { initMixin } from "./init.js";
// Vue就是一个构造函数 通过new关键字进行实例化
function Vue(options) {
  // 这里开始进行Vue初始化工作
  this._init(options);
}
// 此做法有利于代码分割
initMixin(Vue);
export default Vue;

Затем введите метод initMixin в файл входа Vue.

2. метод слияния опций

// src/util/index.js
// 定义生命周期
export const LIFECYCLE_HOOKS = [
  "beforeCreate",
  "created",
  "beforeMount",
  "mounted",
  "beforeUpdate",
  "updated",
  "beforeDestroy",
  "destroyed",
];

// 合并策略
const strats = {};

//生命周期合并策略
function mergeHook(parentVal, childVal) {
  // 如果有儿子
  if (childVal) {
    if (parentVal) {
      // 合并成一个数组
      return parentVal.concat(childVal);
    } else {
      // 包装成一个数组
      return [childVal];
    }
  } else {
    return parentVal;
  }
}

// 为生命周期添加合并策略
LIFECYCLE_HOOKS.forEach((hook) => {
  strats[hook] = mergeHook;
});

// mixin核心方法
export function mergeOptions(parent, child) {
  const options = {};
  // 遍历父亲
  for (let k in parent) {
    mergeFiled(k);
  }
  // 父亲没有 儿子有
  for (let k in child) {
    if (!parent.hasOwnProperty(k)) {
      mergeFiled(k);
    }
  }

  //真正合并字段方法
  function mergeFiled(k) {
    if (strats[k]) {
      options[k] = strats[k](parent[k], child[k]);
    } else {
      // 默认策略
      options[k] = child[k] ? child[k] : parent[k];
    }
  }
  return options;
}

Давайте сначала сосредоточимся на методе mergeOptions, который в основном предназначен для пересечения атрибутов отца и сына для слияния.Если объединенные параметры имеют свою собственную стратегию слияния, тогда используется соответствующая стратегия слияния.

Давайте посмотрим на стратегию слияния нашего жизненного цикла здесь: mergeHook, очевидно, смешивает все жизненные циклы в массив и вызывает их по очереди.

3. Вызов жизненного цикла

// src/lifecycle.js

export function callHook(vm, hook) {
  // 依次执行生命周期对应的方法
  const handlers = vm.$options[hook];
  if (handlers) {
    for (let i = 0; i < handlers.length; i++) {
      handlers[i].call(vm); //生命周期里面的this指向当前实例
    }
  }
}

Вызовите жизненный цикл выше $options по очереди, перейдя

// src/init.js

Vue.prototype._init = function (options) {
  const vm = this;
  // 这里的this代表调用_init方法的对象(实例对象)
  //  this.$options就是用户new Vue的时候传入的属性和全局的Vue.options合并之后的结果

  vm.$options = mergeOptions(vm.constructor.options, options);
  callHook(vm, "beforeCreate"); //初始化数据之前
  // 初始化状态
  initState(vm);
  callHook(vm, "created"); //初始化数据之后
  // 如果有el属性 进行模板渲染
  if (vm.$options.el) {
    vm.$mount(vm.$options.el);
  }
};

Когда init инициализирован, вызовите mergeOptions для слияния параметров, а затем используйте callHook для выполнения связанных методов, переданных пользователем, где необходимо вызвать жизненный цикл.

// src/lifecycle.js
export function mountComponent(vm, el) {
  vm.$el = el;
  // 引入watcher的概念 这里注册一个渲染watcher 执行vm._update(vm._render())方法渲染视图
  callHook(vm, "beforeMount"); //初始渲染之前
  let updateComponent = () => {
    vm._update(vm._render());
  };
  new Watcher(
    vm,
    updateComponent,
    () => {
      callHook(vm, "beforeUpdate"); //更新之前
    },
    true
  );
  callHook(vm, "mounted"); //渲染完成之后
}

Вызов соответствующего жизненного цикла callHook в методе mountComponent

4. Смешанное интеллект-картирование

Vue2.0源码-mixin原理.png

резюме

До сих пор прототип микширования Vue был написан от руки.По сути, ядром является слияние объектов и стратегия слияния различных вариантов.В настоящее время он только демонстрирует стратегию слияния жизненного цикла.Что касается компонентов, мы поговорим о стратегии слияния компонентов. Вы можете посмотреть на карту ума. Напишите основной код самостоятельно.

Наконец, если вы найдете эту статью полезной, помнитеКак СанлианБольшое спасибо!

Ссылка на сериал (будет обновлена ​​позже)

Группа передовых рыболовных технологий Brother Shark

Приветствую всех на технических биржахСвязь

Категории