随笔分类 -  Vue源码

给对象添加函数的方法
摘要：function initMixin$1 (Vue) { Vue.mixin = function (mixin) { this.options = mergeOptions(this.options, mixin); return this }; } 可以传入Vue对象，然后需要调用的时候可以进行 阅读全文
posted @ 2020-06-12 12:41 TTtttt5 阅读(457) 评论(0) 推荐(0)
为什么vue创建不用class而是用函数
摘要：源码中vue入口 function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } this._ini 阅读全文
posted @ 2020-06-12 11:46 TTtttt5 阅读(841) 评论(0) 推荐(0)
vue源码之路径别名的技巧转换
摘要：//以web/entry-runtime.js为例子，base就是web，然后到aliases里去找里面刚好有web,就取到这个路径，再和剩余的/entry-runtime.js拼接，最终经过Rollup的构建打包，最终在dist目录下生成vue.runtime.common.js const al 阅读全文
posted @ 2020-06-12 10:22 TTtttt5 阅读(188) 评论(0) 推荐(0)
学习process.argv和filter与some配合方法
摘要：// filter builds via command line arg if (process.argv[2]) { //就是获取参数。process.argv[2] 就是获取参数是一个字符串，然后用split() 方法用于把一个字符串分割成字符串数组。 const filters = proc 阅读全文
posted @ 2020-06-12 09:47 TTtttt5 阅读(283) 评论(0) 推荐(0)
vue生命周期函数源码
摘要：callHook 函数的逻辑很简单，根据传入的字符串 hook，去拿到 vm.$options[hook] 对应的回调函数数组，然后遍历执行，执行的时候把 vm 作为函数执行的上下文。 各个阶段的生命周期的函数也被合并到 vm.$options 里，并且是一个数组。因此 callhook 函数的功能 阅读全文
posted @ 2020-05-11 15:03 TTtttt5 阅读(224) 评论(0) 推荐(0)
vue 合并配置mixin
摘要：new Vue 的过程通常有 2 种场景，一种是外部我们的代码主动调用 new Vue(options) 的方式实例化一个 Vue 对象；另一种是组件过程中内部通过 new Vue(options) 实例化子组件。 无论哪种场景，都会执行实例的 _init(options) 方法，它首先会执行一个  阅读全文
posted @ 2020-05-11 07:53 TTtttt5 阅读(323) 评论(0) 推荐(0)
组件createComponent
摘要：如果是一个普通的 html 标签，像上一章的例子那样是一个普通的 div，则会实例化一个普通 VNode 节点，否则通过 createComponent 方法创建一个组件 VNode。 3 个关键逻辑：构造子类构造函数，安装组件钩子函数和实例化 vnode。createComponent 后返回的是 阅读全文
posted @ 2020-05-10 21:01 TTtttt5 阅读(648) 评论(0) 推荐(0)
vnode之update 还是没太懂
摘要：Vue 的 _update 是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；这分析首次渲染部分，数据更新部分会在之后分析响应式原理的时候涉及。 _update 方法的作用是把 VNode 渲染成真实的 DOM，它的定义在 src/core/instance/li 阅读全文
posted @ 2020-05-10 15:10 TTtttt5 阅读(473) 评论(0) 推荐(0)
vnodec创建之标签
摘要：var SIMPLE_NORMALIZE = 1; var ALWAYS_NORMALIZE = 2; // wrapper function for providing a more flexible interface // without getting yelled at by flow c 阅读全文
posted @ 2020-05-10 11:26 TTtttt5 阅读(290) 评论(0) 推荐(0)
2.4 ----vue render源码
摘要：vm._render 最终是通过执行 createElement 方法并返回的是 vnode Vue.prototype._render = function () { var vm = this; var ref = vm.$options; var render = ref.render; va 阅读全文
posted @ 2020-05-09 16:11 TTtttt5 阅读(171) 评论(0) 推荐(0)
vue $mount挂载实例方法
摘要：源码如下： var mount = Vue.prototype.$mount; Vue.prototype.$mount = function ( el, hydrating ) { el = el && query(el); //query是看el是字符串还是组件，如果是字符串就去document 阅读全文
posted @ 2020-05-09 15:18 TTtttt5 阅读(1315) 评论(0) 推荐(0)
为什么props定义的数据不能和data同名
摘要：vue源码给出答案因为 const keys = Object.keys(data) vue会先去遍历data，然后去判断method和props是否有同名的，最终都会挂载到vm实例上 >proxy(data,“_data”,key) 所以其实this.key this._data.key targ 阅读全文
posted @ 2020-05-09 10:44 TTtttt5 阅读(1692) 评论(0) 推荐(0)
Runtime Only VS Runtime+Compil
摘要：通常我们利⽤ vue-cli 去初始化我们的 Vue.js 项⽬的时候会询问我们⽤ Runtime Only 版本的还是Runtime+Compiler 版本。 下⾯我们来对⽐这两个版本。 Runtime Only我们在使⽤ Runtime Only 版本的 Vue.js 的时候， 通常需要借助如 阅读全文
posted @ 2020-03-25 21:34 TTtttt5 阅读(154) 评论(0) 推荐(0)