A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 绮罗 中级黑马   /  2020-1-16 16:42  /  1395 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 绮罗 于 2020-1-16 16:44 编辑

VUE是个构造函数使用VUE的时候我们需要new一下,故追本寻源,在 ./instance/index  文件中找到定义VUE构造函数的代码
// 从五个文件导入五个方法(不包括 warn)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'// 定义 Vue 构造函数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)}// 将 Vue 作为参数传递给导入的五个方法initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)// 导出 Vueexport default Vue复制代码可以看出使用率安全模式提醒你使用new操作符来调用VUE,接着将VUE作为参数,传递给了五个引入的方法,最后导出VUE。
那么这五个方法又做了什么?
initMixinexport function initMixin (Vue: Class<Component>) {  Vue.prototype._init = function (options?: Object) {    // ... _init 方法的函数体,此处省略  }}复制代码原来是在VUE的原型上添加了_init方法,这个方法应该是内部初始化的一个方法,在上面我们看到过这个方法。
也就是说当我们调用new VUE()的时候会执行this._init(options)
stateMixinconst dataDef = {}  dataDef.get = function () { return this._data }  const propsDef = {}  propsDef.get = function () { return this._props }  if (process.env.NODE_ENV !== 'production') {    dataDef.set = function (newData: Object) {      warn(        'Avoid replacing instance root $data. ' +        'Use nested data properties instead.',        this      )    }    propsDef.set = function () {      warn(`$props is readonly.`, this)    }  }  Object.defineProperty(Vue.prototype, '$data', dataDef)  Object.defineProperty(Vue.prototype, '$props', propsDef)复制代码最后面两句很熟悉,使用Object.definePropety在Vue.prototype上定义了两个属性,分别是$data和$props,这两个属性的定义分别写在了dataDef和propsDef这两个对象上 ,仔细看上面的代码,首先分别是get,可以可以看到$data属性实际上代理的是_data这个属性,而$props代理的是_props这个实力属性,然后有一个生产环境的判断,如果不是生产环境的话,就为$data和$props这两个属性设置了set,实际上就是想提醒一下你:别想修改我,也就是说$data和$props是两个只读的属性。(又get到新的知识点,开心不

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马