监听vuex数据(vue监听表单数据是否发生变化)

图片授权基于 www.pixabay.com 相关协议

自从上次发完文章《如何调试 Vue 源码》后,关于 Vue 的文章就基本断更了,我想再梳理一下源码里面的东西。

我们先来找一下 Vue 是在哪里声明的,就是先从源头找起,然后再看我们定义的 data 是在哪里执行监听的。
从入口文件开始找,入口文件在哪里,咱们先从 package.json 里面找,看到了\\”dev\\”方法:
\\\"dev\\\": \\\"rollup -w -c scripts/config.js --environment TARGET:web-full-dev\\\"
执行了模块打包器,并且还执行了 scripts/config.js 文件,去查看文件。
到了 config.js 页面,不知道页面是做什么用的,就要在「上下文环境」里找,之前我们看 package.json 文件里,带了一个参数 TARGET:web-full-dev。而这个页面有用到这个参数,发现在 build 对象里面有这个 key 值,输出了这些:
{  entry: resolve(\\\'web/entry-runtime-with-compiler.js\\\'),  dest: resolve(\\\'dist/vue.js\\\'),  format: \\\'umd\\\',  env: \\\'development\\\',  alias: { he: \\\'./entity-decoder\\\' },  banner}
entry 这个是入口,只要你接触过 webpack 或者 gulp 之类的打包工具,你就能看出来「entry」是入口文件配置。配置项里,发现它调用了 resolve 方法,在当前页面搜索,resolve 这个方法上面定义过。
而且方法里面的 aliases 是 require 进来的常量,我们转到 alias 文件去看,它定义了 web 的路径:
web: resolve(\\\'src/platforms/web\\\')
这样就很明显了,我们可以在根目录 src/platforms/web 里面去找我们的文件 entry-runtime-with-compiler.js ,上面提到的这两个文件结合着看。
来到这个页面,我们看到了熟悉的 Vue 字样(大写的 V )。发现,Vue 这个常量也是通过其他页面导入进来的,于是我们来三连查:
    import Vue from \\\'./runtime/index\\\'//继续查找文件的源头import Vue from \\\'core/index\\\'//继续查找文件的源头import Vue from \\\'./instance/index\\\'
    哦,到了这一步,就算找到源头了。
    import { initMixin } from \\\'./init\\\'import { stateMixin } from \\\'./state\\\'import { renderMixin } from \\\'./render\\\'import { eventsMixin } from \\\'./events\\\'import { lifecycleMixin } from \\\'./lifecycle\\\'import { warn } from \\\'../util/index\\\'
    function Vue (options) { if (process.env.NODE_ENV !== \\\'production\\\' && !(this instanceof Vue) ) { warn(\\\'Vue is a constructor and should be called with the `new` keyword\\\') } this._init(options)}initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)
    export default Vue
    并且我们可以打 debugger 了,可以单步调试了。
    initMixin(Vue)
    我们看到页面先是执行了 initMixin(Vue),我们去页面查看一下:
    Vue.prototype._init = function (options?: Object) {}
    执行 initMixin 函数在原型挂载了 _init 方法,_init 方法就是我们定义Vue函数里面调用的方法:
    this._init(options)
    这个 options 就是我们在声明Vue的定义的参数:
    new Vue({  el:\\\"#demo\\\",  data(){    return{      message:\\\"I\\\'m a message.\\\"    }  }})
    可在调试状态下看到:

    这个 options 就是我们在声明 Vue 时,定义的参数。
    随后呢,在_init 函数里面还执行了:
    initLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, \\\'beforeCreate\\\')initInjections(vm) // resolve injections before data/propsinitState(vm)initProvide(vm) // resolve provide after data/propscallHook(vm, \\\'created\\\')
    这个时候执行了两个钩子「beforeCreate」「created」。
    不过在这两个勾子函数之间还执行了「initState」方法,此方法里面执行「initData」初始化了数据,并且用「observe」进行了监听,执行代理函数「proxy」其实就是执行「Object.defineProperty」。
    到这一步我们在外面定义 data 里面的数据就已经完成了监听。不过,到目前为止,我们连「created」这个勾子函数还没走到呢哦 …

    推荐阅读

    什么是 HTTPS 协议?
    HTML 页面的渲染流程

    HTTP 协议的请求头和响应头


    原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34581.html

    Like (0)
    小道研究的头像小道研究
    Previous 2024年4月10日
    Next 2024年4月10日

    相关推荐

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注