您现在的位置是:网站首页>前端技术>HTML5教程HTML5教程

什么是组件?带你深入理解Vue.js组件!

神夜2022-03-03 10:08:36HTML5教程1814人已围观文章来源:PHP中文网

简介什么是组件?本篇文章带大家深入理解一下Vue中的组件,聊聊组件的渲染、组件的拓展,希望对大家有所帮助!

什么是组件?本篇文章带大家深入理解一下Vue中的组件,聊聊组件的渲染、组件的拓展,希望对大家有所帮助!

Vue.js组件的本质及相应的渲染实现

引言

如果你正在使用Vue.js,那么我想你一定对Vue单文件组件(SFC)不陌生,它是Vue.js框架提供的一种文件格式,在绝大多数应用场景中都是Vue.js官方推荐的项目组织形式,本文就让我们以单文件组件为源去回溯一下组件的本质。【相关推荐:vuejs视频教程

什么是组件

在Vue.js中,单文件组件可以认为是对Vue.js组件的进一步封装,它杂糅了HTMLJavaScript以及CSS三种元素的特点,以<template><script><style>三大块将与一个组件相关的视图、逻辑以及样式整合到了一个基本的特殊文件单位之中,下面是一个单文件组件的示例:

1.png

你可能不知道,其实在Vue.js内部,上述单文件组件会经由@vue/compiler-sfc编译为标准的JavaScript和CSS,编译后的JavaScript文件可能如下(个人推测,如错,烦请指正):

2.png

这个函数的返回值是不是很熟悉?这就是一个虚拟DOM对象,在这里你就可以称这个函数为组件!(如果你对虚拟DOM还不熟悉,请参阅我的这篇笔记-为什么Vue.js中要采用虚拟DOM

对,这就是组件,组件的实质其实就是对一组DOM元素的封装。现在,让我们自己定义一个组件来熟悉巩固一下:

3.png

综上,我们可以定义一个函数来代表组件,而函数的返回值就代表组件要渲染的内容。

组件的渲染

从上文可以看到,组件的返回值就是虚拟DOM对象,它代表着组件想要渲染的内容。那么在Vue.js中组件是如何渲染的呢?(如果你对Vue.js中虚拟DOM的渲染原理还不甚了解,可以参阅一下我这篇笔记-浅析Vue.js的运行时编译

为了更加直观地描述,我们先用一个虚拟DOM对象中的tag标签来储存组件函数:

4.png

你可能对这种描述不是太熟悉,因为以前接触到的虚拟DOM可能都是用tag属性值来描述HTML标签,其实,只要得到渲染器的支持,tag: MyComponent是完全符合语法的。此时,负责把虚拟DOM渲染为真实DOM的渲染器代码实现原理如下:

5.png

组件的拓展

还记得组件的实质是什么吗?组件的实质就是对一组DOM元素的封装!那么问题来了,在上文中一直都是用一个函数来自定义组件,但是组件的表示方式只能是函数吗?不不不,当然不是,你完全可以使用一个JavaScript对象来自定义组件,如下:

6.png

在这个MyComponent对象中,属性render函数的返回值是一个虚拟DOM对象,代表着此组件的渲染内容。相应的,为了能够正常使用对象组件渲染DOM,需要对上述举例的渲染器做相应的修改适配,修改如下:

7.png

在上述代码中,vnode.tag就是表达组件的对象。其实在Vue.js中也有使用对象结构来表达的组件,即有状态组件。

声明

  • 本文属于读书笔记一类,是作者在拜读 霍春阳 大佬的新作《Vue.js设计与实现》途中,以书中内容为蓝本,辅以个人微末的道行“填写”完成,推荐购书阅读,定有收获
  • 欢迎大佬斧正

原文地址:https://juejin.cn/post/7068956595169787918

作者:将焕

(学习视频分享:vuejs教程web前端

以上就是什么是组件?带你深入理解Vue.js组件!的详细内容,更多请关注php中文网其它相关文章!

php中文网直播班

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:511条
  • 微信公众号:扫描二维码,关注我们