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

监听vuex数据（vue监听表单数据是否发生变化）

相关推荐

【网络安全】漏洞挖掘之Spring Cloud注入漏洞（spring cloud 坑）

看通义千问Qwen1.5 72b的胡说八道（通篇胡说八道）

魔兽世界经典服务器：图文并茂的BWL策略指南结合文字理解。读几遍你就明白了。

2024年最流行的励志句子

发表回复