vue组件是如何解析及渲染的?

前言

本文将对vue组件如何解析以及渲染做一个讲解。

我们可以通过Vue.component注册全局组件,之后可以在模板中进行使用

<div id="app">
  <my-button></my-button>
</div>
<script>
 Vue.component("my-button", {
    template: "<button> 按钮组件</button>",
   });
let vm = new Vue({
	el:'#app'
});
</script>

全局组件解析原理

为了保证组件的隔离,每个组件通过extend方法产生一个新的类,去继承父类。并把用户通过Vue.component方法传入的 opts 合并到 vue.options.components,再vue初始化时合并Vue.options.components 和 vm.$options.components 。

1.Vue.component 方法

Vue.options._base = Vue; //可以通过\_base 找到 vue
Vue.options.components = {}; 

Vue.component = function (id, definition) {
  //每个组件产生一个新的类去继承父亲
  definition = this.options._base.extend(definition);

  console.log("1.给组件创造一个构造函数,基于Vue", definition);

  this.options.components[id] = definition;
 };

2.Vue.extend 方法

extend 方法就是产生一个继承于 Vue 的类,并且他身上应该有父类的所有功能。

import {mergeOptions} from '../util/index'
Vue.extend = function (definition) {
  const Vue = this;
  const Sub = function VueComponent(options) {
   this._init(options);
  };
  Sub.prototype = Object.create(Vue.prototype);
  Sub.prototype.constructor = Sub;
  Sub.options = mergeOptions(Vue.options, definition);
  return Sub;
 };

3.属性合并

合并Vue.options 和 Vue.component(definition)传入的 definition

strats.components = function (parentVal, childVal) {
 let options = Object.create(parentVal);
 if (childVal) {
  for (let key in childVal) {
   options[key] = childVal[key];
  }
 }
 return options;
};

4.初始化合并

合并Vue.options.components 和 vm.$options.components

 Vue.prototype._init = function (options) {
  const vm = this;
 ++ vm.$options = mergeOptions(vm.constructor.options, options);
  //...
  initState(vm);
  if (vm.$options.el) {
   //将数据挂载到这个模版上
   vm.$mount(vm.$options.el);
  }
 };

好哒,到这里我们就实现了全局组件的解析。

下面我们再来康康组件如何渲染的吧?

组件的渲染原理

在创建虚拟节点时我们要通过isReservedTag 判断当前这个标签是否是组件,普通标签的虚拟节点和组件的虚拟节点有所不同,如果 tag 是组件 应该渲染一个组件的 vnode。

export function isReservedTag(str) {
 let reservedTag = "a,div,span,p,img,button,ul,li";
 return reservedTag.includes(str);
}

1.创建组件虚拟节点

createComponent 创建组件的虚拟节点,通过data上有无hook来区分是否为组件

export function createElement(vm, tag, data = {}, ...children) {
  // 如果tag是组件 应该渲染一个组件的vnode
  if (isReservedTag(tag)) {
    return vnode(vm, tag, data, data.key, children, undefined);
  } else {
    const Ctor = vm.$options.components[tag]
    return createComponent(vm, tag, data, data.key, children, Ctor);
  }
}
// 创建组件的虚拟节点, 为了区分组件和元素 data.hook
function createComponent(vm, tag, data, key, children, Ctor) {
  // 组件的构造函数
  if(isObject(Ctor)){
    Ctor = vm.$options._base.extend(Ctor); // Vue.extend
  }
  data.hook = { // 等会渲染组件时 需要调用此初始化方法
    init(vnode){
      let vm = vnode.componentInstance = new Ctor({_isComponent:true}); // new Sub 会用此选项和组件的配置进行合并
      vm.$mount(); // 组件挂载完成后 会在 vnode.componentInstance.$el
    }
  }
  return vnode(vm,`vue-component-${tag}`,data,key,undefined,undefined,{Ctor,children})
}

2.创建组件的真实节点

typeof tag === "string",有可能是组件的虚拟节点,则调用createComponent。

export function patch(oldVnode,vnode){
  // 1.判断是更新还是要渲染
  if(!oldVnode){
    return createElm(vnode);
  }else{
    // ...
  }
}

function createElm(vnode) {
 let { tag, data, children, text, vm } = vnode;
 if (typeof tag === "string") {
  if (createComponent(vnode)) {
   //返回组件对应的真实节点
   return vnode.componentInstance.$el;
  }
  vnode.el = document.createElement(tag); // 虚拟节点会有一个el属性,对应真实节点
  children.forEach((child) => {
   vnode.el.appendChild(createElm(child));
  });
 } else {
  vnode.el = document.createTextNode(text);
 }
 return vnode.el;
}

createComponent 通过 data上是否有hook.init方法,判断是否组件虚拟节点

是的话则调用组件上 data.hook.init

创建组件实例,并赋值给vnode.componentInstance

vnode.componentInstance 有值说明对应组件的真实 dom 已经生成

function createComponent(vnode) {
  let i = vnode.data;
  if((i = i.hook) && (i = i.init)){
    i(vnode);
  }
  if(vnode.componentInstance){
    return true;
  }
}

调用init方法,创造组件的实例并该进行挂载

data.hook = {
  init(vnode){
    let child = vnode.componentInstance = new Ctor({});
    child.$mount(); // 组件的挂载
  }
}

小结

对组件进行 new 组件().$mount() => vm.$el

将组件的$el 插入到父容器中 (父组件)

就完成啦~

以上就是vue组件是如何解析及渲染的?的详细内容,更多关于vue 组件解析和渲染的资料请关注我们其它相关文章!

时间: 2021-01-12

Vue切换Tab动态渲染组件的操作

使用<component :is="组件名"></component> 结合Element-UI的导航菜单 : UI组件 el-menu-item里的index写对应的组件名 点击事件@select="handleSelect" <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal&quo

解析Vue.js中的组件

介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

vuex数据改变,组件中页面不渲染 相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新 这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe

解析vue路由异步组件和懒加载案例

最近研究了vue性能优化,涉及到vue异步组件和懒加载.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 案例: 首先是组件,创建四个组件分别命名为first.second.three和four:内容如下 first <template> <div>我是第一个页面</div> </template> second <template> <div>我是第二个页面

Vue强制组件重新渲染的方法讨论

有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

vue 使用高德地图vue-amap组件过程解析

这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: '

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组件间的通信pubsub-js实现步骤解析

本文介绍使用发布订阅的方式进行vue组件间的通信 我认为这种方式比较自由, 不存在组件间的关系问题 1. 首先安装pubsub-js npm install --save pubsub-js 2. 订阅方组件 import PubSub from 'pubsub-js' mounted(){ // 执行异常代码 // 订阅消息 PubSub.subscribe('deleteTodo',(msg,index)=>{ this.deleteTodo(index) // 调用deleteTodo方法

Vue 组件注册全解析

全局组件注册语法 components中的两个参数组件名称和组件内容 Vue.component(组件名称, { data: 组件数据, template:组件模板内容 }) 全局组件注册应用 组件创建: Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button&g

微信小程序动画组件使用解析,类似vue,且更强大

演示 演示1 演示2 演示3   一.功能描述 1.预设过渡 支持区分enter.leave 支持预设过渡的组合 特别强调:支持元素展开.闭合的过渡.name=='slide'或['slide'[,]],即可实现,无需外部传height 支持外部传类来过渡或动画 /* 预留过渡 */ /** *1.fade *2.移动:up,right,down,left四个方向 *3.scale缩放:默认是从0->1,还预设了一个从1->1.2的 *4.rotate旋转.顺时针旋转.角度用以上方向来指示.如

Vue组件生命周期运行原理解析

Vue实例有一个完整的生命周期,从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据. created ( 创建后 ) 实例已经创建完成之后被调用,在这一步,实例已完成以

VUE注册全局组件和局部组件过程解析

这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'

Vue中强制组件重新渲染的正确方法

有时候,依赖 vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

Vue实现图片轮播组件思路及实例解析

1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放 点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现 5.示例代码 结构html: <template> <

使用Vue制作图片轮播组件思路详解

之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也很多,在这里也给大家分享出来,如有疏漏,欢迎指正! 在制作这个组件之前,笔者google了不少关于轮播的文章,发现实现一个轮播的思路虽然各有不同,但是大的逻辑其实差不多,本文主要依据慕课网上焦点轮播图特效这节课,不过慕课网主要用原生JS写,而笔者则用Vue进行了重构,并且进行了一点修改.完成后的组件

利用Vue实现移动端图片轮播组件的方法实例

前言 轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户滑

值得分享的JavaScript实现图片轮播组件

本文实例为大家分享了JavaScript实现图片轮播组件的使用方法,供大家参考,具体内容如下 效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 点击查看demo 对HTML.CSS的要求: <div class="carousel-box"> <div class=&qu

JavaScript实现图片轮播组件代码示例

本文介绍了JavaScript实现图片轮播组件,废话不多说了直接看下面: 效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 对HTML.CSS的要求: <div class="carousel-box"> <div class="carousel"&g

Bootstrap图片轮播组件使用实例解析

使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间,图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小.  同时说一下,Carousel这个词的本义是回旋木马. 一.基本目标 在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明.  由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但是

Bootstrap图片轮播组件Carousel使用方法详解

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. 图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需

微信小程序图片轮播组件gallery slider使用方法详解

本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下 先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo

jquery无缝图片轮播组件封装

图片轮播在我们的前端开发中是非常常见的,下面是自己写的一个图片轮播组件,支持自动轮播,手动轮播,无缝衔接. dom结构 首先是dom结构,将所有内容放入一个大盒子,应用ul标签存放图片列表,圆点定位图片位置. <div id="box"> <ul id="banners"> <li class="banners-img"><img src="img/DSC_1913.JPG" />

Angular2利用组件与指令实现图片轮播组件

前言 如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的"生物"还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情. 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个"器官",功能是呈现图片,并感知用户的点击或手势来切换图片. 一.创建组件 结束上文