1. 速盾网络首页
  2. 网站运维

监听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

    赞 (0)
    小道研究的头像小道研究
    0 0
    上一篇 2024年4月10日
    下一篇 2024年4月10日

    相关推荐

    发表回复

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