Vue2.4.2源码探究之渲染过程1之initMixin(Vue)

最新推荐文章于 2022-05-01 09:38:16 发布
最新推荐文章于 2022-05-01 09:38:16 发布
阅读量690 收藏
点赞数
分类专栏： JavaScript 文章标签： 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderMozart/article/details/77671757
版权

initMixin(Vue)从命名来看，是为Vue.prototype添加一个_init的属性（为了区分Vue给prototype添加的属性，通常都会添加下划线进行说明），也就是initMixin(Vue)开头做的事情：

这里写图片描述

传递的参数其实是Vue$3函数，也就是把函数看成了对象，本身initMixin(Vue)就是做了这么一件事情

coderMozart
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue原理】Mixins - 源码版
神仙朱的博客
07-06 795
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Mixins - 源码版 今天探索的是 mixins 的源码，mixins 根据不同的选项类型会做不同的处理 篇幅会有...
Vue源码探究之虚拟节点的实现
12-03
总之，Vue 源码中的 VNode 类是构建虚拟DOM树的基础，它的设计和实现确保了 Vue 能够高效地处理组件状态的变化，实现数据驱动视图的更新，同时支持异步加载和服务器端渲染等多种复杂场景。通过理解 VNode 的工作原理...
浅析Vue源码（二）—— initMixin(上)
weixin_34416754的博客
10-03 232
在上一篇文章《浅析Vue源码（一）-- 造物创世》中提到在定义了一个 Vue Class的时候会引入initMixin 来初始化一些功能，这篇文章就来讲讲initMixin到底初始化了哪些原理呢？ initMixin来源init.js let uid = 0 export function initMixin (Vue: Class<Component>) { Vue.prot...
浅析Vue源码（三）—— initMixin(下)
weixin_34023982的博客
10-03 132
这片文章主要是根据上一篇文章《浅析Vue源码（三）—— initMixin(上)》去解读 initMixin后续的执行过程，上篇我们已经可以看到，接下来主要会发生这几个操作过程： initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') initInjections(vm) initState(vm) ...
Vue2.x 源码 - 初始化：initMixin(Vue)
weixin_43299180的博客
10-25 1163
上一篇：Vue2.x 源码学习准备 这篇主要看一下 initMixin 这个混入以及涉及到的 initProxy(vm)、initInjections(vm)、initProvide(vm) 方法； 准备工作 我们在使用 Vue 时是通过 new Vue（）来进行初始化的，那么这个 Vue 从哪里来的呢？ 1、在 main.js 引入的 Vue 是在入口文件 src/platforms/web/entry-runtimes.js 里面暴露出来的； 2、入口文件里面的 Vue 是从 src/platfo.
vue源码解析之initMixin
青阳的博客
06-08 273
initLifecycle(vm);// 初始化组件数据， initEvents(vm); initRender(vm); callHook(vm,'beforeCreate'); initInjections(vm);//resolveinjectionsbeforedata/props initState(vm); initProvide(vm);//resolveprovideafterdata/...
Vue源码探究之状态初始化
01-19
继续随着核心类的初始化展开探索其他的模块，这一篇来研究一下Vue的状态初始化。这里的状态初始化指的就是在创建实例的时候，在配置对象里定义的属性、数据变量、方法等是如何进行初始处理的。由于随后的数据更新...
基于Vue和SpringBoot的毕业设计过程管理系统设计源码
最新发布
04-17
本项目是基于Vue和SpringBoot开发的毕业设计过程管理系统设计源码，主要使用Java进行开发。项目共包含536个文件，其中Java源代码文件235个，Vue组件文件89个，CSS样式文件81个，XML配置文件33个，XLSX文件20个，...
VUE源码解析-2- initMixin()
卡卡西：一个擅长拷贝的前端程序员
11-15 510
写在前面的话： 因为源码中包含很多校验或者补丁的方法，这些代码暂时不考虑，以后的文章中只分析主干流程核心代码。 上一篇我们找到的 Vue 的构造函数所在文件/src/core/instance/index.js, 我们看到这个文件代码非常简单，先是定义vue的构造函数，里边除去校验，只剩下 调用 this._init(options)（_inint来自下边的 initMixin）。接着是5个方法。他们的作用分别是： 这篇我们主要分析 Vue的 initMixin 方法。 init...
【Vue】Vue源码第三步——初始化（initMixin）
及时行乐
12-12 557
为了帮助更好理解，本人做了一个思维导图，大家可以搭配思维导图享用。 Vue初始化源码——思维导图 Vue创建实例 vue-dev\src\core\instance\index.js import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './rende...
Vue源码学习之初始化模块init.js解析
11-26
我们看到了VUE分了很多模块（initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()），通过使用Mixin模式，都是使用了JavaScript原型继承的原理，在Vue的原型上面增加属性和方法。我们继续跟着this._init(options)走，这个一点击进去就知道了是进入了init.js文件是在initMixin函数里面给Vue原型添加的_init方法。首先来从宏观看看这个init文件，可以看出主要是导出了两个函数：initMixin和resolveConstructorOptions，具体作用我们一步步来讨论。咋的
Vue.mixin 源码深入理解
SK_study的博客
05-01 346
一. 了解 Vue.mixin 介绍：该 API 就是为了给组件提供一些可复用的属性，以此来扩展组件的功能。 二. 实际应用 在了解它实现原理之前，我们先来看下它的实际应用。 假如我们需要给所有组件都添加一个 token 属性，并且在 beforeCreate 中执行某些相同的操作，我们可以执行如下操作，这样一来所有组件中都默认拥有这些属性和方法。（下边实例为全局注册，局部注册比较容易理解，可自己查看文档） Vue.mixin({ data(){ return {
Vue源码分析--Vue.mixin
Lawliet_Hero的博客
12-28 138
Vue源码分析–Vue.mixin 看源码，就是将mixin对象合并到this.options上 export function initMixin (Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { // 注意：这里的this.options不是指vm.$options, 而是Vue.options // 初始为 Vue.options = // {filters: {}, directives: {}, compon
从源码看 Vue 中的 Mixin
weixin_34363171的博客
05-19 86
最近在做项目的时候碰到了一个奇怪的问题，通过 Vue.mixin 方法注入到 Vue 实例的一个方法不起作用了，后来经过仔细排查发现这个实例自己实现了一个同名方法，导致了 Vue.mixin 注入方法的失效。后来查阅资料发现 Vue.mixin 注入到实例的 methods 方法会被实例中的同名方法替换，而不会依次执行。于是我就有了查看源码的想法，进而诞生了这篇文章～ 本文所用源码版本为 2....
vue初始化开始--学习1--initMixin
qq_43505774的博客
09-14 275
initMixin(Vue); stateMixin(Vue); eventsMixin(Vue); lifecycleMixin(Vue); renderMixin(Vue); i nitMixin函数初始化 var uid$3 = 0; Vue.prototype._init 加入这个初始化函数 使用场景 所有组件初始都会使用 var vm = this; // a uid vm._uid = uid$3++; 每一个组件执行这个函数都会加入一个 uid表示是第几个组件 var s..
Vue.mixin 源码
qt的博客
12-30 126
/* @flow */ import { mergeOptions } from '../util/index' export function initMixin (Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { // mergeOptions 的作用是将 mixin的所有成员拷贝到options // this 就是vue构造函数，全局的vue this.options = mergeOptions(thi
vue源码解析：vue全局方法之Vue.mixin实现原理
lee前端技术站
07-17 655
提到vue全局方法mixin，可能我们比较陌生，因为在平时的开发中也不建议我们去使用他。但是我们还是有必要了解一下其实现的原理。 Vue.mixin( mixin ) 参数： {Object} mixin 作用： 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。 原理：src/core/global-api/mixin.js Vue.mixin = function (mixin: Object) {
VUE源码分析之mixin全局方法
liubangbo的专栏
10-21 422
官网有以下解释： 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。 其实就相当于注册了一些全局数据和方法，在注册混入之后的Vue实例中都可以使用。我们还是通过一个例子看看： ​ ​ <!DOCTYPE html> <html> <head> <m...
研究vue2.0源码（1）initMixin——core
qq_43305958的博客
04-26 336
研究vue2.0源码（1）initMixin——core 为什么研究源码 事情是这样…本来只是一个前端菜鸡（虽然现在也是一个前端大菜鸡（可以菜但是必须得大对不对:)）），然后有幸去年参加了一个大项目，就是那种全国性大大项目啊哈哈哈哈，也不用点名点姓说是哪个项目了，就是很大的全国性的，然后触发了程序员的被动技能——工作半年，实际工作时间一年。。。（天天加班） 然后吧，每天晚上也没有啥事，就闲来无事的时候脑子一抽（也是恋爱不好谈了，王者荣耀不好玩了）想看vue2.0的源码，（这时候内心就一个想法，你在凝视
Vue.js全家桶深度解析：源码剖析与实战指南
"Vue.js全家桶实战教程，包括Vue.js源码解析、组件化开发与项目最佳实践" Vue.js，作为一款轻量级的JavaScript框架，因其简单易学、高效灵活的特点，深受开发者喜爱。它结合了Angular.js的数据绑定和React.js的组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值