手写Vue内置组件component的实现示例

目录
  • 前言
  • 内置组件component的使用
  • component组件的原理分析
  • 虚拟DOM与原生DOM
  • render函数的使用
  • 尝试手写实现component
  • 总结

最近在复习Vue的源码,今天带大家手写实现一下Vue内置组件component,比较简单,最近面试有被问到。

前言

Vue大家都很熟悉,除了原生的组件,其自己也封装了一下内置组件,比如componenttransitionkeep-alive等等。

component算是用的比较多的了,当我们遇到需要根据不同条件显示不同组件的时候,一般都是用component来实现。当然你也可以v-if,v-else-if,v-else,就显的比较笨了。

大家如果没用过,可以先自己尝试一下这个component组件。最主要的就是它有一个is属性,你给is赋予什么组件名,它就渲染什么组件。

内置组件component的使用

我写一个小demo演示一下。
先随意的写三个组件,ABC

组件内容就是aaaabbbbcccc,方便我们辨认当然渲染的是哪个组件。

然后集体引入,挂载。

视图内容大概这样写,需求就是,准备三个按钮,点击哪个按钮就显示哪个组件。

    <div>
      <button @click="changeComp('A')">显示A</button>
      <button @click="changeComp('B')">显示B</button>
      <button @click="changeComp('C')">显示C</button>
    </div>
    <component :is="compList"></component>

compList提前声明好,默认是A组件。

  data() {
    return {
      compList: 'A'
    };
  },

changeComp函数内容如下:

  methods: {
    changeComp(comp) {
      this.compList = comp;
    },
  }

OK,这就完事了,大家可以自己试一下,是可以完成既定的需求的。

component组件的原理分析

我们今天的任务是,了解内置组件component的原理,并手写实现一个。

那么component的实现原理是怎么样的呢,这个就需要牵扯一块比较大的知识链了,也是Vue的核心内容。关于Vue虚拟DOM以及模板编译的部分内容。

简单来说,Vue内部实现了一个虚拟DOM来妥善解决原生DOM的性能问题。

虚拟DOM与原生DOM

比如我们当前需要插入1000DOM节点,如果是原生DOM来做的话,就是扎扎实实的,一个个操作,改变DOMDOM需要被改变1000次,这对于性能是极大的损耗,造成很多的问题。

虚拟DOM的原理就是,先在框架内部用对象模拟一下原生DOM的形态,记录你这1000次的DOM操作,最后将DOM被操作1000次后的形态赋给原生DOM。这样就能极大的优化大量DOM操作带来的负面影响。

然后再来思考一下,我们平时写的.vue文件,其实跟原生写法是有区别的,无论是HTMLJS还是CSS,在编写阶段有做了些许的改动,这样做有助于提高我们的编写效率。但是浏览器是只认原生的HTMLCSSJS的,所以我们编写的组件内容,其实只是一个template模板,需要进行编译转换为原生的DOM才能渲染到浏览器上。

componet组件其实就是内部做了这个事情,将你传入的组件, 先转换为虚拟DOM,然后渲染为真实DOM,展示到视图上。

render函数的使用

这里面就涉及到一个知识点了,关于render函数的使用,具体的内容大家可以去Vue文档详细了解一下render函数。可能大家日常开发用的比较少,涉及一些偏底层的东西时才会遇到。

我这里只介绍render函数做的事情。
它的形态大概是这个样式。

render(h) {
    // return h('A');
    return h('div', '6666');
},

render函数接收一个参数,比如叫它hh也是一个函数,它的作用就是将传入的内容构建为虚拟DOM,这个传入的内容支持原生的写法,也支持Vue组件。

比如我代码里给出的,h('div', '6666')h函数就会生成一个div组件,文本内容是666。被注释掉的,就是传入Vue中自己的写的组件名字为A,同样支持。

但是h函数仅仅只是将传入的内容,生成虚拟DOM,不是真实的原生DOM,然后将它return出去,render函数才会将这个虚拟DOM渲染成为真实DOM

上述关于render函数的内容不知道大家是否理解,可以去Vue官方文档里,详细看一下,然后自己写写demo体验一下,render函数算是Vue进阶中比较重要的内容了。

所以,话说回来,知道了render函数这个东西,我们就能够比较好的实现component这个内置组件了。component组件会接收一个属性isis的值就是我们要渲染的组件。component组件的内容其实就是进行了 Vue组件 => 虚拟DOM => 真实DOM,渲染视图,其实就通过render函数实现就可以。

尝试手写实现component

话不多说,我们试一下。

因为组件内容比较少,所以我们直接使用Vue.component来编写组件内容。

Vue.component("myComponent", {
  props: ["is"],
  render(h) {
    return h(this.is);
  },
});

其实核心代码就上面这几行,组件名字是myComponentprops的作用就是指定组件要接收的参数is。然后编写一下render函数,因为是渲染Vue组件,所以直接return h(this.is)就可以。

将这段代码写在JS里,然后就可以使用了。记得要import Vue from 'vue'来引入Vue,因为我们是通过Vue.component来编写组件的。

下面我们试一试,这个myComponent是否有用。

    <div>
      <button @click="changeComp('A')">显示A</button>
      <button @click="changeComp('B')">显示B</button>
      <button @click="changeComp('C')">显示C</button>
    </div>
    <component :is="compList"></component>
    <my-component :is="compList"></my-component>

实际操作后可以发现,我们自己写的myComponentVue内置的component效果是一模一样的,大家自己也可以试一下。

完整代码:

<template>
  <div>
    <div>
      <button @click="changeComp('A')">显示A</button>
      <button @click="changeComp('B')">显示B</button>
      <button @click="changeComp('C')">显示C</button>
    </div>
    <component :is="compList"></component>
    <my-component :is="compList"></my-component>
  </div>
</template>

<script>
import Vue from "vue";
import A from "../components/A.vue";
import B from "../components/B.vue";
import C from "../components/C.vue";

Vue.component("myComponent", {
  props: ["is"],
  render(h) {
    return h(this.is);
  },
});
export default {
  components: {
    A,
    B,
    C,
  },
  data() {
    return {
      compList: 'A'
    };
  },
  methods: {
    changeComp(comp) {
      this.compList = comp;
    },
  },
};
</script>

<style scoped>

</style>

总结

今天的内容是带着大家手写实现Vue的内置组件component,在尝试实现某一个东西的时候,就需要先思考它的作用以及内部原理。手写component的过程比较简单,但是涉及到了很多Vue的原理性知识点,比如虚拟DOM、render函数、模板编译等。

到此这篇关于手写Vue内置组件component的实现示例的文章就介绍到这了,更多相关Vue内置组件component内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue内置组件component--通过is属性动态渲染组件操作

    我就废话不多说了,大家看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com

  • 手写Vue内置组件component的实现示例

    目录 前言 内置组件component的使用 component组件的原理分析 虚拟DOM与原生DOM render函数的使用 尝试手写实现component 总结 最近在复习Vue的源码,今天带大家手写实现一下Vue内置组件component,比较简单,最近面试有被问到. 前言 Vue大家都很熟悉,除了原生的组件,其自己也封装了一下内置组件,比如component,transition,keep-alive等等. component算是用的比较多的了,当我们遇到需要根据不同条件显示不同组件的时

  • vue 内置组件 component 的用法示例详解

    目录 component is 内置组件切换方法一: component is 内置组件切换方法二: component is 内置组件切换方法一: component组件(单独拿出一个组件来专门进行切换使用) 使用is来绑定你的组件:如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 <template>

  • Vue 内置组件keep-alive的使用示例

    目录 一.keep-alive 用法 使用示例: 1.缓存所有页面: 2.根据条件缓存部分页面 3.结合vue-router,缓存部分页面 二.keep-alive 生命周期 1. activated 2. deactivated keep-alive 是Vue内置的组件之一, 主要用于保留组件状态或避免重新渲染. 作用    在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验. 一.keep-alive 用法 < keep-alive> 包裹动态组件

  • vue内置组件keep-alive事件动态缓存实例

    在App.vue文件中配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 在路由中配置 { path: '/backstage', component: res

  • LRU算法在Vue内置组件keep-alive中的使用

    vue的keep-alive内置组件的使用也是使用了改算法,源码如下: export default { name: "keep-alive", // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中 abstract: true, props: { // 被缓存组件 include: patternTypes, // 不被缓存组件 exclude: patternTypes, // 指定缓存大小 max: [String, Numb

  • vue内置组件transition简单原理图文详解(小结)

    基本概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 简单用法 用 v-if/v-show 控制显示隐藏,使用transition 组件控制其变化过程 一个页面子组件 router-view 的消失隐藏,使用transi

  • 浅谈Vue内置component组件的应用场景

    官方的说明 渲染一个"元组件"为动态组件.依 is 的值,来决定哪个组件被渲染. <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> 具体可以官网文档中的 动态组件 内置的组件component 场景 这里通过一个业务场景来阐述vue内置component组件的应用. 如图所示,这里展示经典注册页面,注册分为邮箱注册

  • Vue动态组件与内置组件浅析讲解

    目录 一.动态组件 二.内置组件 一.动态组件 在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便. 我们通过一点简单的实例代码可以加深了解: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>组件之间

  • vue 自定义 select内置组件

    1.整合了第三方 jQuery 插件 (select2) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js/select2/select2.min.css" /> <style> html, body

随机推荐