Vue 实例挂载的实现（六）

最新推荐文章于 2023-06-30 10:08:02 发布
最新推荐文章于 2023-06-30 10:08:02 发布
阅读量212 收藏
点赞数
文章标签： javascript 前端 webpack ViewUI
原文链接：http://www.cnblogs.com/bobo1/p/11351722.html
版权

Vue 中我们是通过 $mount 实例方法去挂载 vm 的，$mount 方法在多个文件中都有定义，如 src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js。因为 $mount 这个方法的实现是和平台、构建方式都相关的。接下来我们重点分析带 compiler 版本的 $mount 实现，因为抛开 webpack 的 vue-loader，我们在纯前端浏览器环境分析 Vue 的工作原理，有助于我们对原理理解的深入。

compiler 版本的 $mount 实现非常有意思，先来看一下 src/platform/web/entry-runtime-with-compiler.js 文件中定义：

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && query(el) /* istanbul ignore if */ if (el === document.body || el === document.documentElement) { process.env.NODE_ENV !== 'production' && warn( `Do not mount Vue to <html> or <body> - mount to normal elements instead.` ) return this } const options = this.$options // resolve template/el and convert to render function if (!options.render) { let template = options.template if (template) { if (typeof template === 'string') { if (template.charAt(0) === '#') { template = idToTemplate(template) /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && !template) { warn( `Template element not found or is empty: ${options.template}`, this ) } } } else if (template.nodeType) { template = template.innerHTML } else { if (process.env.NODE_ENV !== 'production') { warn('invalid template option:' + template, this) } return this } } else if (el) { template = getOuterHTML(el) } if (template) { /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile') } const { render, staticRenderFns } = compileToFunctions(template, { shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this) options.render = render options.staticRenderFns = staticRenderFns /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { mark('compile end') measure(`vue ${this._name} compile`, 'compile', 'compile end') } } } return mount.call(this

转载于:https://www.cnblogs.com/bobo1/p/11351722.html

weixin_30542079
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue源码：vue实例挂载篇
老司机的后备箱
06-28 2232
在new一个Vue对象的时候，内部究竟发生了什么？Vue的构造类只做了一件事情，就是调用_init函数进行初始化。 2._init，初始化 _init主要做了这两件事： initData 首先判断data是不是函数，如果是函数的话执行getData。getData做的事情很简单：，因为vue推荐我们把data定义为一个函数然后返回具体的data对象，因此getData只需执行一次data拿到返回值即可。 判断是否与props属性名冲突，然后将data挂载到vue实例中。这里是通过proxy对vue实例的g
Vue 实例挂载方法($mount)的实现
热门推荐
未思
03-30 1万+
在 Vue 的 _init 方法中已经回调了beforeCreate 和created这两个生命周期钩子，在此之后就进行了实例的挂载 if (vm.$options.el) { // 挂载实例 vm.$mount(vm.$options.el); } 在挂载函数中，将要进行 beforeMount 和 mounted 的回调。 在不同的平台下对于 $mount 函数...
Vue实例挂载的过程
zz130428的博客
06-30 1096
我们都听过知其然知其所以然这句话那么不知道是否思考过new Vue()这个过程中究竟做了些什么？过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等首先找到vue的构造函数源码位置：src\core\instance\index.js是用户传递过来的配置项，如等常用的方法vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法。
【Vue 源码解析】Vue实例挂载过程
酷奇的博客
03-18 650
源码位置：node_modules/vue/src/core/instance/index.js（ps：找不到可以在node_modules目录下搜索，因为懒惰后边就不写node_modules/vue这两级目录了）源码位置：/src/platforms/web/entry-runtime-with-compiler.js。方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法。源码位置：src\platforms\web\runtime\index.js。
Vue实例挂载的实现
qq_44997147的博客
05-05 563
问题：src/core/instance/init.js的$mount是从哪来的？ 关键词：$mount、el、render、template 逻辑：mountComponent会完成整个渲染工作，最核心的2个方法：vm._render和vm._update。 Vue实例挂载的实现 也就是执行vm.$mount方法做了那些事情？ 以 Runtime + Compiler 版的 vue.js 为例，所以入口文件为src/platforms/web/entry-runtime-with-compiler.js
多个VUE实例的挂载案件
tearstar的博客
03-03 1411
多个VUE实例的挂载案件多个VUE实例的挂载案件在同一JS文件中，包含情况同一JSP,分散情况不同页面的JS包含情况下 多个VUE实例的挂载案件 在同一JS文件中，包含情况 1.在同一JS文件中，包含情况下取最高VUE 补充： 同一JSP,分散情况 分散情况下，各自的操作都可以实现 不同页面的JS包含情况下 在不同页面的JS包含情况下，被包含下的数据可以传递，但是函数却不能使用。（不知原因） ...
Vue.extend实现挂载到实例上的方法
10-17
Vue.js 是一个流行的前端JavaScript框架，用于构建...通过结合插件机制，我们可以将这些自定义功能挂载到Vue实例上，使得它们在整个应用中可被轻松访问和使用。这不仅提升了开发效率，还增强了代码的灵活性和模块化。
深入解析Vue源码实例挂载与编译流程实现思路详解
10-17
本文将深入解析Vue源码中的实例挂载与编译流程，帮助开发者更好地理解和优化应用性能。 首先，Vue.js 提供了两种版本：runtime-only 和 runtime+compiler。runtime-only 版本不包含编译器，因此无法直接处理模板，...
Vue实例简单方法介绍
08-31
上述代码创建了一个Vue实例，并随后使用`$mount`方法将其挂载到ID为`#box`的元素上。这样，即使在创建实例时没有指定`el`，也能实现与特定DOM元素的绑定。 此外，Vue实例还允许我们添加自定义选项。在实例化时，...
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实例挂载的实现
weixin_44100002的博客
09-14 184
nodeType 用法：document.body.nodeType; 定义：nodeType 属性返回以数字值返回指定节点的节点类型。 如果节点是元素节点，则 nodeType 属性将返回 1。 如果节点是属性节点，则 nodeType 属性将返回 2。 appendChild 用法：document.getElementById(“myList”).appendChild(newListItem); 定义: appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 Array.prot
vue的源码学习之五——3.数据驱动（Vue 实例挂载的实现）
路在脚下，幸福在手中，莫贪！！！！！
12-12 603
介绍         版本：2.5.17。        我们使用vue-vli创建基于Runtime+Compiler的vue脚手架。        学习文档：https://ustbhuangyi.github.io/vue-analysis/data-driven/mounted.html 挂载到DOM         src/core/instance/init.js...
VUE基础-实例挂载
weixin_33724059的博客
09-08 1280
vue实例 实例创建：new方法 实例的调用：实例对象.$+(实例中的属性或者方法) el 确定实例挂载的地方（DOM对象） var data = { a: 1 } var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 vm 实例 console.log(...
vue2.x源码解析五——数据驱动--3.Vue 实例挂载的实现
小毛驴的博客
07-02 564
1.挂载到DOM 在上一节中我们知道，在Vue初始化的最后是挂载到DOM上的。 src/core/instance/init.js ： 在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM if (vm.$options.el) { vm.$mount(vm.$options.el) } ...
Vue之Vue实例创建整体流程
玉案轩窗的博客
09-03 7830
前言 上篇文章是Vue初始化加载的过程，主要的处理是对Vue实例方法以及静态方法的定义。 本篇是分析调用Vue构造函数的过程，实际上是主要分析大致流程、props、methods、data。 具体逻辑 使用Vue构造函数创建Vue实例，具体的处理逻辑如下图： 从上图中可以看出，Vue实例的具体处理是定义相关的内部属性包括props、data、methods、computed都会在创建...
Vue.extend挂载到实例上
charming的博客
11-05 4073
主要是做个笔记 根据官网的说法，Vue.extend：是使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 官网的用法是： &lt;div id="mount-point"&gt;&lt;/div&gt; // 创建构造器 var Profile = Vue.extend({ template: '&lt;p&gt;{{firstName}} {{lastName}...
面试官：vue实例挂载的过程
write_bug_job的博客
04-20 258
new Vue的时候调用会调用_init方法 定义$set、$get、$delete、$watch等方法 定义$on、$off、$emit、$off等事件 定义_update、$forceUpdate、$destroy生命周期 调用$mount进行页面的挂载 挂载的时候主要是通过mountComponent方法 定义updateComponent更新函数 执行render生成虚拟DOM _update将虚拟DOM生成真实DOM结构，...
vue+app实例_为多个实例扩展Vue App
编程故事的地方
09-20 423
vue+app实例 我们经常在构建应用程序时进行工作，其中单个应用程序可以通过几次更改扩展到多个实例。 当您为多个国家/地区构建应用程序时，一个很好的例子就是。 TLDR； 不同的国家可能有不同的要求，即不同的部分或不同的表单域，但基本应用程序（即公共部分）应保持不变。 当应用程序已经构建并且在应用程序生命周期的后期阶段，需要扩展到多个国家/地区时，这甚至变得具有挑战性。 人们在市场中遵...
Vue源码分析-实例挂载的实现
frontendchen的博客
02-18 172
这里选用的是runtime and compile版本的vue，首先用mount变量缓存起来Vue的原型上挂载的$mount方法，然后又重新定义了$mount方法。这个$mount方法其实是在引入的./runtime/index文件中定义的，为什么要重新定义一遍，因为runtime only 版本是没有这个逻辑的，实际上是给runtime only版本用的 当在初始化执行vm.$mount(vm.$options.el)挂载的时候，实际上调用的重写后的$mount函数，这个函数首先对el参数做了一个处理.
如何在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、付费专栏及课程。

余额充值