【Vue原理】Component - 源码版 之 挂载组件DOM

最新推荐文章于 2023-01-30 15:05:55 发布
最新推荐文章于 2023-01-30 15:05:55 发布
阅读量618 收藏 1
点赞数 1
分类专栏： Vue原理 文章标签： vue javascript 前端 前端开发 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27460969/article/details/95169344
版权

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Component - 源码版 之 挂载组件DOM

由这篇文章 从模板到DOM的简要流程

我们知道，在生成 VNode 之后，下一步就是根据 VNode 生成DOM然后挂载了

在本文开始之前你可以先看 Component - 白话版 先整体了解下component

现在开始我们的正文

上一篇文章 Component - 创建组件VNode ，我们已经说到了 【页面模板解析成 VNode 树】的步骤

那今天就就到了 【页面VNode生成DOM挂载】 了

等等，今天说的不是 Component 挂载DOM 吗？跟页面Vnode 有什么关系？？是啊

最低0.47元/天 解锁文章
神仙朱
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue挂载到dom上会发生什么
12-11
vue 挂载到dom 元素后发生了什么 前一篇文章分析了new vue() 初始化时所执行的操作，主要包括调用vue._init 执行一系列的初始化，包括生命周期，事件系统，beforeCreate和Created hook，在在这里发生，重点分析了 initState，即对我们常用到的data props computed 等等进行的初始化，最后，执行$mount 对dom进行了挂载，本篇文章将对挂载后所发生的事情进行进一步阐述， Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean
vue3中script setup获取动态组件component的Dom
weixin_47908090的博客
07-12 3068
vue3中script setup获取动态组件component的Dom
vue-动态组件
程小博衍的博客
01-30 1260
vue-动态组件;性能；
Vue源码解析(四)-components组件
weixin_34256074的博客
11-14 547
组件初始化渲染 本文以局部组件的注册方式介绍组件的初始化渲染，demo如下 new Vue({ el: '#app', template: `<div> <div>father component!</div> <my-component></my-c...
Vue 技术栈 带你探究 vue-router 源码 手写vue-router
01-08
Vue 技术栈的探索深度离不开对核心组件的掌握，其中`vue-router`作为前端路由管理的核心库，是实现单页应用（SPA）导航的重要工具。本文将带你深入探究`vue-router`的源码，同时手写实现部分关键功能，以此来提升你...
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
10-17
在Vue开发中，组件的创建和使用是非常关键的部分。组件不仅可以提高代码的可重用性，还能帮助我们构建复杂的用户界面。在本文中，我们将探讨一个可能不那么常见的Vue技巧，即如何开发一个可以通过全局方法调用的组件...
vue-source-code:vue源码阅读-vue source code
03-24
Vue的单文件组件（Single File Component，SFC）模式将模板、脚本和样式集成在一个文件中，提高了代码组织的清晰度。 四、指令系统 Vue提供了丰富的内置指令，如v-if、v-for、v-bind、v-on等，它们简化了DOM操作。...
详解Jest结合Vue-test-utils使用的初步实践
12-09
Vue-test-utils 是Vue官方提供的一个库，专门用于简化Vue组件的测试，它提供了丰富的API来操作和检查Vue实例，如挂载组件、模拟事件、查找元素等。而Jest是一个流行的JavaScript测试框架，以其全面的功能、简洁的...
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
在Vue.js中，`this.$refs` 是一个非常重要的特性，它允许开发者访问Vue实例挂载的DOM元素或子组件实例。然而，在某些情况下，尝试通过`this.$refs`获取DOM或组件时可能会遇到错误。本文将深入探讨这个问题及其解决...
在vue组件中style scoped中遇到的坑
weixin_30558305的博客
05-24 634
　　在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件，同样的，如果子...
vue+element-ui使用babel-plugin-component按需加载组件及自定义主题对应的scss样式
weixin_34248023的博客
07-09 4846
作者的挖坑之旅 作者本人在工作之余喜欢自己写一些东西玩玩， 虽然不是资深程序员， 不过也还是能够完成前端页面+后端接口+服务端部署的整个流程了。 如果不愿意看分析过程，可以直接拉到最后看结果。 开始入坑 首先前端页面使用了Vue作为前端开发框架，我相信点这个标题进来看文章的都用过这个框架的吧。。。 首先肯定是要引入element这个ui组件库，但...
vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
热门推荐
鸭绒的博客
09-19 4万+
使用props进行父子组件通信时产生错误：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “currentIndex” 产生错误的原因：在子组件中，你试图修改父组.
vue2.x源码解析六——组件化--2.createComponent虚拟DOM组件
小毛驴的博客
07-04 832
1.说明 我们以Vue-cli 初始化的代码为例，来分析一下 Vue 组件初始化的一个过程。 import Vue from 'vue' import App from './App.vue' var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h =&amp;amp;amp;amp;amp;amp;gt; h(App) }) 和我们上一章相...
Vue中component标签解决项目组件化の思路
小青蛙的博客
10-19 9189
一、 啰嗦几句 在vue项目组件化的过程中，遇到了一些问题，什么问题呢？就是在做一个多功能，多可用，多兼容的大组件的时候，发现在这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽然说每段功能块都有批注，但是体积还是比较庞大，最近有些需求，需要将页面上的一大块筛选功能剥离开，形成单独的组件，统一数据渲染，统一组件管理，且这些功能无论是样式，或者是从结构来说，差异性都很大，所以考...
Vue DOM挂载
小王的技术库
06-17 1495
接下来我们就来探究是如何将该页面进行渲染的。在研究之前，我们必须了解构造函数。但是在执行函数前，当我们的时候，该框架做了这样的几个初始化： 其实上面的函数是在我们导入时，该框架本身做的一些初始化，这和我们执行构造函数时内部的初始化不一样。这些函数主要是在我们使用前，向构造函数的原型上添加一些函数。而当我们执行构造函数时，也会在内部进行一些初始化，例如响应式的完成和数据代理。所以我们需要区分这两种初始化。然后我们就可以执行构造函数了。当我们执行构造函数的时候，本质上其实就是执行方法。 这个是在函数中声明的。函
componentOptions配置选项的作用和用法
weixin_33748818的博客
03-15 6833
componentOptions 可以通过vnode.componentOptions来访问，用来挂载部分组件选项来使用的。包括 { Ctor, tag, propsData, listeners，children } 。非组件的componentOptions为空。 // 源码中体现代码如下： // return a placeholder vnode const name = Ctor...
vue拿到某个节点的属性_vue实现将某个dom元素或组件挂载到根节点
weixin_42515063的博客
01-14 2278
在写手机端的时候经常用到tab，tab切换一般都是transition滑动的，如果此时我们用position:fixed定位会发现，元素定位并不是我们想象中的相对浏览器定位，这是因为fixed定位会被拥有transition属性的元素影响。为了结果这个问题，我们需要将元素变成相对于浏览器定位，这个时候我们就要将这个需要定位的dom元素挂载到根节点下，实现方式如下1.vue2.0的实现方式1.1 将...
vue基础之挂载DOM元素
qq_41720578的博客
04-10 1563
目前我了解的方式有两种，以直接用ID挂载例如： <div id="app"><div> var vm=new Vue({ el:"#app", }) 第二种就是用css选择器， <div></div> var vm=new Vue({ el:document.querySelector("div"), }) 一个组件只能挂载一个元素，切记不能用css选择器挂在数组在一个组件上。 错误例子: <div></
vue2组件挂载到dom上
最新发布
05-30
在Vue2中，我们可以通过以下步骤将组件...在上面的代码中，我们将Vue实例挂载到id为“app”的DOM元素上，并将my-component组件添加到该元素中。当Vue实例被挂载到DOM元素上时，Vue会自动渲染组件并将其显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值