vue
文章平均质量分 53
RT_wqt
这个作者很懒,什么都没留下…
展开
-
Vue生命周期相关实例方法源码分析(三)
vm.$mount // public mount method Vue.prototype.$mount = function ( el, hydrating ) { el = el && inBrowser ? query(el) : undefined; return mountComponent(this, el, hydrating) };var inBrowser = typeof window !== 'undefined';原创 2021-02-25 13:49:26 · 108 阅读 · 0 评论 -
Vue生命周期相关实例方法源码分析(二)
vm.$nextTick这个API的作用是将当前任务的回调压到下一次事件循环的队列中去。 function nextTick (cb, ctx) { var _resolve; callbacks.push(function () { if (cb) { try { cb.call(ctx); } catch (e) { handleError(e, ctx, 'nextTick');原创 2021-02-23 19:40:40 · 190 阅读 · 0 评论 -
Vue生命周期相关实例方法源码分析(一)
vm.$forceUpdate这个api的作用是使vue实例重新渲染。 Vue.prototype.$forceUpdate = function () { var vm = this; if (vm._watcher) { vm._watcher.update(); } };以上代码,先拿到vue实例自身。如果vue实例对应的那个watcher存在的话,就调用其更新API。(Vue2.0开始采用中等粒度的设计思路,将一个组件映射到一原创 2021-02-17 23:24:01 · 144 阅读 · 1 评论 -
Vue响应式原理部分源码分析(一)
首先基于我的理解分析Dep构造函数 /** * Remove an item from an array. */ function remove (arr, item) { if (arr.length) { var index = arr.indexOf(item); if (index > -1) { return arr.splice(index, 1) } } }以上是Dep的原型方法中remo原创 2021-02-14 22:48:19 · 219 阅读 · 1 评论 -
vue事件相关实例方法源码分析
vm.$on—vue实例注册事件的apiVue.prototype.$on = function (event, fn) { var vm = this; if (Array.isArray(event)) { for (var i = 0, l = event.length; i < l; i++) { vm.$on(event[i], fn); } } else { (vm._events[原创 2021-02-10 01:52:48 · 127 阅读 · 0 评论 -
Vue全局API(Vue.extend)源码分析
Vue.extend官方源码:Vue.extend = function (extendOptions) { extendOptions = extendOptions || {}; var Super = this; var SuperId = Super.cid; var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}); if (cachedCtors[Super原创 2020-12-19 15:50:37 · 166 阅读 · 1 评论 -
Vue计算属性computed和methods的区别
1.计算属性设计的初衷是为了减轻模板上的业务负担。当数据链上出现复杂的衍生数据时,我们更期望以一种简单易维护的方式去使用它。它使代码结构更加清晰。2.计算属性是依赖于响应式数据的,当响应式数据变化时,计算属性才会被重新计算,并且结果会被缓存,直到响应式数据再次变化。相比于使用methods函数求值,显得更加高效。看如下一段程序:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g原创 2020-08-26 19:26:04 · 150 阅读 · 0 评论