Vue render函数,mixins混入

render函数:Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
注意：templete的优先级高于render函数
使用场景:依赖props中的值,动态的渲染组件
①:render函数的参数是createElement函数,createElement函数的返回值是一个虚拟dom.即Vnode也就是我们要渲染的节点

②createElement函数有三个参数:
Ⅰ:第一个参数:必须,{ String | Object | Funtion} 是要渲染的html标签
Ⅱ:第二个参数:可选,{ Object } html标签的各种属性
Ⅲ:可选,{ String | Array } 子虚拟节点(Vnode),当前Html标签的子元素

渲染过程:
Ⅰ:独立创建(模板字符串)
包含模板编译器,HTML字符串 -> render函数 -> Vnode -> 真是Dom节点
Ⅱ:运行时构建:
包含模板编译器,render函数 -> Vnode -> 真是Dom节点
template示例:

<template>
  <div class="head" :style="{background:'#f00'}">
      <h2>我是主标题</h2>
      <p>我是副标题</p>
  </div>
</template>

模板效果:

模板效果.png

render示例:

<script>
export default {
  name: "Head",
  data() {
    return {};
  },
  render(createElement) {
    let _el = createElement(
      "div",
      {
        class: "head",
        style: { background: "#f00" },
      },
      [createElement("h2", "我是主标题"), createElement("p", "我是副标题")]
    );
    console.log(_el);
    return _el;
  },
  props: {},
};
</script>

<style lang="less" scoped>
.head {
  height: 100px;
  width: 100%;
}
</style>

打印的_el值:

VNode.png

render效果:

render效果.png

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
mixins详解

Vue.extend返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑，其实它就像构造函数，构造函数中会事先定义好一些属性，new出来的对象也就默认有构造函数中的属性，同理Vue.extend也是如此

Vue.extend详解
extend,mixins和extends的区别:
extend：扩展组件的构造器，当我们调用vue.component('a', {...})时自动调用
mixins：接收对象数组（可理解为多继承），可以混入多个mixin，
extends：接收的是对象或函数（可理解为单继承），extends只能继承一个