vue实例挂载的过程

最新推荐文章于 2024-07-25 15:19:10 发布
最新推荐文章于 2024-07-25 15:19:10 发布
阅读量996 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43343980/article/details/127275096
版权
到了created的时候，数据已经初始化完成，能够访问到data、props这些属性，但这时候并未完成dom的挂载，因此无法访问到dom元素。vue构建函数调用_init方法，但我们发现文本中并没有这个方法，但仔细看可以看到文件下定义了很多初始化方法。在调用beforeCreate之前，数据初始化并未完成，像data、props这些属性无法访问到。首先可以看到initMixin方法，发现该方法在vue原型上定义了_init方法。options是用户传递过来的配置项，如data、methods等常用的方法。
摘要由CSDN通过智能技术生成

1、分析
首先找到vue的构造函数
源码位置：src\core\instance\index.js
在这里插入图片描述

options是用户传递过来的配置项，如data、methods等常用的方法。

vue构建函数调用_init方法，但我们发现文本中并没有这个方法，但仔细看可以看到文件下定义了很多初始化方法。

在这里插入图片描述

首先可以看到initMixin方法，发现该方法在vue原型上定义了_init方法

源码位置：src\core\instance\init.js

在这里插入图片描述

在这里插入图片描述

在调用beforeCreate之前，数据初始化并未完成，像data、props这些属性无法访问到。

到了created的时候，数据已经初始化完成，能够访问到data、props这些属性，但这时候并未完成dom的挂载，因此无法访问到dom元素。

挂载方法是调用vm.$mount方法

initState方法是完成props/data

最低0.47元/天 解锁文章
Eden呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue源码：vue实例挂载篇
老司机的后备箱
06-28 2244
在new一个Vue对象的时候，内部究竟发生了什么？Vue的构造类只做了一件事情，就是调用_init函数进行初始化。 2._init，初始化 _init主要做了这两件事： initData 首先判断data是不是函数，如果是函数的话执行getData。getData做的事情很简单：，因为vue推荐我们把data定义为一个函数然后返回具体的data对象，因此getData只需执行一次data拿到返回值即可。 判断是否与props属性名冲突，然后将data挂载到vue实例中。这里是通过proxy对vue实例的g
vue实例的手动挂载
webblock的博客
12-09 840
vue通过Vue.extend与$mount方法来挂载vue的实例 Vue.extend是基础的vue的构造器，用来创建一个"子类"，参数是一个包含组件选项的一个对象 请看如下代码 <div id="mount-div"> </div> <script> const MyComponent = Vue.extent({ template:"<div>Hello:{{name}}</div>", data:function(){ .
vue实例挂载过程
黎小小的博客
08-18 751
以下仅为个人见解。
vue实例挂载过程中发生了什么？
weixin_42178670的博客
11-18 695
挂载过程指的是app.mount()过程，这个是个初始化过程，挂载过程完成了最重要的两件事：初始化和建立更新机制。
Vue实例挂载的过程
BradenHan的专栏
02-04 937
总的来说，Vue实例的挂载过程就是将模板编译成虚拟DOM，再将虚拟DOM渲染成真实DOM，并进行数据的响应式处理。初始化：在初始化阶段，Vue会进行一系列的初始化操作，包括合并配置项、初始化生命周期钩子、初始化事件系统、初始化响应式数据等。执行挂载函数：Vue会调用mount函数，将虚拟DOM渲染成真实DOM，并将其插入到页面中指定的挂载点上。数据响应式：在挂载完成后，Vue会对数据进行响应式处理。创建Vue实例：通过调用Vue构造函数，创建一个Vue实例，并传入配置对象。，这里只是分享，便于查漏补缺。
Vue 源码分析 —— 实例挂载流程
yan__shang的博客
03-02 1005
实例挂载基本流程 Vue 在选项合并完成之后，进行了一系列函数调用，这些函数包括了初始化事件中心、定义渲染函数等等。在 _init 方法的最后，会对象 el 选项进行判断，如果 el 选项存在，则会调用 $mount 方法挂载实例。 /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real se
Vue实例在挂载过程中会发生什么
qq_42816270的博客
04-09 617
Vue实例在挂载过程中会依次执行以下步骤： 初始化：Vue会初始化实例的生命周期、事件、数据观测、计算属性等等。 模板编译：Vue会对模板进行编译，将模板转化为渲染函数。 挂载：Vue将生成的渲染函数渲染成真实的DOM，并且将其挂载到页面上。 更新：一旦实例被挂载到页面上，当数据发生变化时，Vue会自动更新视图。
[vue] vue实例挂载的过程是什么？
歌谣的博客
03-03 657
[vue] vue实例挂载的过程是什么？ render, 没有则去编译 编译vdom 对实例进行watch 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
Vue实例化对象挂载到元素上的方法
wytccc的博客
11-25 817
① 值可以是CSS选择器（CSS选择器，不一定非要使用id，只要是选择器能匹配到对应的元素即可）先声明一个容器：这种方式可以在挂载之前做一些其他的操作。② 值也可以是元素节点。
Vue.extend实现挂载到实例上的方法
10-17
Vue.js 是一个流行的前端JavaScript框架，用于构建...通过结合插件机制，我们可以将这些自定义功能挂载到Vue实例上，使得它们在整个应用中可被轻松访问和使用。这不仅提升了开发效率，还增强了代码的灵活性和模块化。
深入解析Vue源码实例挂载与编译流程实现思路详解
11-27
在正文开始之前，先了解vue基于源码构建的两个版本，一个是 runtime only ，另一个是 runtime加compiler 的版本，两个版本的主要区别在于后者的源码包括了一个编译器。 什么是编译器，百度百科上面的解释是 简单讲，...
vue面试题说说你对vue、双向绑定、SPA（单页应用）、的v-show和v-if、Vue实例挂载的过程的理解?
10-26
面试官：Vue实例挂载的过程中发生了什么? 面试官：说说你对Vue生命周期的理解? 面试官：为什么Vue中的v-if和v-for不建议一起用? 面试官：SPA（单页应用）首屏加载速度慢怎么解决？? 面试官：为什么data属性是一个...
Vue实例简单方法介绍
08-31
上述代码创建了一个Vue实例，并随后使用`$mount`方法将其挂载到ID为`#box`的元素上。这样，即使在创建实例时没有指定`el`，也能实现与特定DOM元素的绑定。 此外，Vue实例还允许我们添加自定义选项。在实例化时，...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 371
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
m0_71835253的博客
07-25 480
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
VUE中的重点*
qq_61132537的博客
07-22 1085
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
通过不同方式在 Vue 3 中传递路由参数
最新发布
点点滴滴
07-25 555
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
vue zip文件下载请求封装与使用
Anlittlecat的博客
07-23 410
Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }这里把响应超时时间注释是文件下载接口返回需要较长时间。axios封装（重点是响应拦截）
如何在main.js上将vue实例挂载到页面上
07-14
要将Vue实例挂载到页面上，你需要在 `main.js` 文件中完成以下步骤： 首先，确保你已经引入Vue库。在 `main.js` 文件的开头，添加以下代码： ```javascript import Vue from 'vue'; ``` 接下来，创建一个新的Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值