Vue
文章平均质量分 54
月丶基拉
这个作者很懒,什么都没留下…
展开
-
Vue源码分析--vm.$watch()
Vue源码分析–vm.$watch()vm.$watch()核心是调用Watcher,如果你对Watcher的使用不熟悉的话,建议先看我的这篇文章 Vue另类解读–基于数据劫持的双向绑定Observer/Watcher/Depvm.$watch( expOrFn, callback, [options] )expOrFnVue.prototype.$watch = function ( expOrFn: string | Function, cb: any, options?: Ob原创 2021-01-05 15:49:44 · 252 阅读 · 0 评论 -
Vue另类解读--基于数据劫持的双向绑定Observer/Watcher/Dep
Vue另类解读--基于数据劫持的双向绑定直接解读类比Observer(教官)Dep(小本子)Watcher(作战指挥官)基于数据劫持的双向绑定,想必很多人都能理解清楚,这里就不多做描述了。只是在读Vue的基于数据劫持的双向绑定相关源码时感觉特别绕。这里记录下我对 Observer,Watcher,Dep这三者作用与关系之间的思考。以下我是站在源码的角度进行分析的,希望能帮读源码的朋友理清思路。直接解读首先摊开所有的关键点:这里的watcher与this.watch没有关系,反倒是this.com原创 2021-01-02 00:59:44 · 431 阅读 · 1 评论 -
Vue源码分析--vm.$nextTick()
Vue源码分析–vm.$nextTick()Vue暴露出去的vm.$nextTick()方法,就是内部的nextTick()方法,这个方法也为watcher.update()提供了异步更新的方式。即通过Watcher监控的属性或vm._update()方法,当其中的子元素变更时,会用nextTick方法把其回调推入队列。并去重被重复推入的watcher。然后等待下次事件循环时,按watcher.id从小到大依次执行更新Vue.prototype.$nextTick = function (fn: Fu原创 2021-01-04 21:57:22 · 148 阅读 · 0 评论 -
Vue源码分析--vm.$forceUpdate()
Vue源码分析--vm.$forceUpdate1. vm._watcher是啥?是怎么来的?2. vm._watcher.update() 又是啥方法?首先直接上源码,这里有两个关注点Vue.prototype.$forceUpdate = function () { const vm: Component = this // 1. vm._watcher是啥?是怎么来的? if (vm._watcher) { // 2. vm._watcher.update() 又是啥方原创 2021-01-04 21:10:19 · 966 阅读 · 0 评论 -
Vue源码分析--vm.$mount()
Vue源码分析–vm.$mount(el)将Vue对象挂载到指定页面元素上,下面是一些使用时的注意点new Vue(options)时会根据模板生成一个vnode对象,再以vnode生成一个Element对象new Vue(options)时,如果存在options.el,则会用生成的Element对象替换掉页面上的el如果不存在options.el,则需手动挂载 vm.$mount(el)如果已挂载el,则无法挂载其他el如果new Vue(options)时不存在模板,则会以手动挂载对象原创 2021-01-04 18:59:07 · 566 阅读 · 2 评论 -
Vue源码分析--Vue.component
Vue源码分析–Vue.component我将非 Vue.component 的部分去掉了export function initAssetRegisters (Vue: GlobalAPI) { Vue.component = function ( id: string, definition: Function | Object ): Function | Object | void { if (!definition) { // 如果 definitio原创 2020-12-30 16:01:24 · 587 阅读 · 1 评论 -
Vue源码分析--Vue.mixin
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原创 2020-12-28 14:53:25 · 138 阅读 · 0 评论 -
Vue源码分析--Vue.use
VUE源码分析–Vue.use直接上源码吧export function initUse (Vue: GlobalAPI) { // 绑定静态方法 Vue.use(plugin: Function | Object) Vue.use = function (plugin: Function | Object) { // 每次绑定的插件都要保存到this._installedPlugins 数组中,避免重复绑定 const installedPlugins = (this._ins原创 2020-12-28 11:55:05 · 90 阅读 · 0 评论