全国咨询热线:18720358503

上海小程序如何开发_Vue源码根究之状态初始化

类别:企业动态 发布时间:2021-01-08 浏览人次:

Vue源码探究之状态初始化       这篇文章主要介绍了Vue源码探究之状态初始化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

继续随着核心类的初始化展开探索其他的模块,这一篇来研究一下Vue的状态初始化。这里的状态初始化指的就是在创建实例的时候,在配置对象里定义的属性、数据变量、方法等是如何进行初始处理的。由于随后的数据更新变动都交给观察系统来负责,所以在事先弄明白了数据绑定的原理之后,就只需要将目光集中在这一部分。

来仔细看看在核心类中首先执行的关于 state 部分的源码:

initState

// 定义并导出initState函数,接收参数vm
export function initState (vm: Component) {
 // 初始化实例的私有属性_watchers
 // 这就是在观察系统里会使用到的存储所有显式监视器的对象
 vm._watchers = []
 // 获取实例的配置对象
 const opts = vm.$options
 // 如果定义了pro凡科抠图,则初始化pro凡科抠图
 if (opts.pro凡科抠图) initPro凡科抠图(vm, opts.pro凡科抠图)
 // 如果定义了methods,则初始化methods
 if (opts.methods) initMethods(vm, opts.methods)
 // 如果定义了data,则初始化data
 if (opts.data) {
 initData(vm)
 } else {
 // 否则初始化实例的私有属性_data为空对象,并开启观察
 observe(vm._data = {}, true /* asRootData */)
 // puted,则初始化计算属性
 if (puted) initComputed(vm, puted)
 // 如果定义了watch并且不是nativeWatch,则初始化watch
 // nativeWatch是火狐浏览器下定义的对象的原型方法
 if (opts.watch opts.watch !== nativeWatch) {
 initWatch(vm, opts.watch)

这段代码非常直白,主要用来执行配置对象里定义的了状态的初始化。这里分别有 pro凡科抠图、puted、watch 五个配置对象,分别有各自的初始化方法。在仔细研究它们的具体实现之前,先来看一段将在各个初始化函数里用到的辅助函数。

// 定义共享属性定义描述符对象sharedPropertyDefinition
// 描述符对象的枚举和可配置属性都设置为true
// get、set方法设置为空函数
const sharedPropertyDefinition = {
 enumerable: true,
 configurable: true,
 get: noop,
 set: noop
// 定义并导出proxy函数,该函数用来为在目标对象上定义并代理属性
// 接收目标对象target,路径键名sourceKey,属性键名三个参数
export function proxy (target: Object, sourceKey: string, key: string) {
 // 设置属性描述符对象的get方法
 sharedPropertyDefinition.get = function proxyGetter () {
 return this[sourceKey][key]
 // 设置属性描述性对象的set犯法
 sharedPropertyDefinition.set = function proxySetter (val) {
 this[sourceKey][key] = val
 // 在目标对象上定义属性
 Object.defineProperty(target, key, sharedPropertyDefinition)

proxy 函数的定义非常重要,在下面要探究的各个初始化函数中它,它会将我们在配置对象中设置的属性全部定义到实例对象中,但是我们对这些属性的操作是通过各部分相应的代理属性上来执行的。get 和 set 方法的实现非常明白的表示出这一过程,然后再将属性定义到实例中。由这个函数作为基础,继续来看看其他五个状态的初始化函数的内容。

initPro凡科抠图

// 定义initPro凡科抠图函数,接收vm,pro凡科抠图Options两个参数
function initPro凡科抠图 (vm: Component, pro凡科抠图Options: Object) {
 // 赋值pro凡科抠图Data,pro凡科抠图Data是全局扩展传入的赋值对象
 // 在使用extend的时候会用到,实际开发里运用较少
 const pro凡科抠图Data = vm.$options.pro凡科抠图Data || {}
 // 定义实例的_pro凡科抠图私有属性,并赋值给pro凡科抠图
 const pro凡科抠图 = vm._pro凡科抠图 = {}
 // 缓存prop键,以便将来pro凡科抠图更新可以使用Array而不是动态对象键枚举进行迭代。
 // cache prop keys so that future pro凡科抠图 updates can iterate using Array
 // instead of dynamic object key enumeration.
 const keys = vm.$options._propKeys = []
 // 是否是根实例
 const isRoot = !vm.$parent
 // 对于非根实例,关闭观察标识
 // root instance pro凡科抠图 should be converted
 if (!isRoot) {
 toggleObserving(false)
 // 遍历pro凡科抠图配置对象
 for (const key in pro凡科抠图Options) {
 // 向缓存键值数组中添加键名
 keys.push(key)
 // 验证prop的值,validateProp执行对初始化定义的pro凡科抠图的类型检查和默认赋值
 // 如果有定义类型检查,布尔值没有默认值时会被赋予false,字符串默认undefined
 // 对pro凡科抠图Options的比较也是在使用extend扩展时才有意义
 // 具体实现可以参考 src/core/util/pro凡科抠图.js,没有难点这里不详细解释
 const value = validateProp(key, pro凡科抠图Options, pro凡科抠图Data, vm)
 // 非生产环境下进行检查和提示
 /* istanbul ignore else */
 if (process.env.NODE_ENV !== 'production') {
 // 进行键名的转换,将驼峰式转换成连字符式的键名
 const hyphenatedKey = hyphenate(key)
 // 对与保留变量名冲突的键名给予提示
 if (isReservedAttribute(hyphenatedKey) ||
 config.isReservedAttr(hyphenatedKey)) {
 warn(
 `"${hyphenatedKey}" is a reserved attribute and cannot be ponent prop.`,
 // 对属性建立观察,并在直接使用属性时给予警告
 defineReactive(pro凡科抠图, key, value, () = {
 if (vm.$parent !isUpdatingChildComponent) {
 warn(
 `Avoid mutating a prop directly since the value will be ` +
 `overwritten whenever ponent re-renders. ` +
 `Instead, use a puted property based on the prop's ` +
 `value. Prop being mutated: "${key}"`,
 } else {
 // 非生产环境下直接对属性进行存取器包装,建立依赖观察
 defineReactive(pro凡科抠图, key, value)
 // 使用Vue.extend()方法扩展属性时,已经对静态属性进行了代理
 // 这里只需要针对实例化时的属性执行代理操作
 // static pro凡科抠图 are already proxied ponent's prototype
 // during Vue.extend(). We only need to proxy pro凡科抠图 defined at
 // instantiation here.
 // 当实例上没有同名属性时,对属性进行代理操作
 // 将对键名的引用指向vm._pro凡科抠图对象中
 if (!(key in vm)) {
 proxy(vm, `_pro凡科抠图`, key)
 // 开启观察状态标识
 toggleObserving(true)

initPro凡科抠图 函数的最主要内容有两点,一是对定义的数据建立观察,二是对数据进行代理,这就是私有变量 _pro凡科抠图 的作用,之后获取和设置的变量都是作为 _pro凡科抠图 的属性被操作。

另外初始化 pro凡科抠图 的过程中有针对 extend 方法会使用到的 pro凡科抠图Data 属性的初始化。具体使用是在扩展对象时定义一些 pro凡科抠图,然后在创建实例的过程中传入 pro凡科抠图Data 配置对象,扩展对象里相应的pro凡科抠图属性会接收 pro凡科抠图Data 传入的值。与在父组件传入 pro凡科抠图 的值类似,只是这里要显式的通过 pro凡科抠图Data 配置对象来传入值。

initData

// 定义initData函数
function initData (vm: Component) {
 // 获取配置对象的data属性
 let data = vm.$options.data
 // 判断data是否是函数
 // 若是函数则将getData函数的返回赋值给data和实例私有属性_data
 // 否则直接将data赋值给实例_data属性,并在无data时赋值空对象
 data = vm._data = typeof data === 'function'
 getData(data, vm)
 : data || {}
 // 如果data不是对象则将data赋值为空对象
 // 进一步保证data是对象类型
 if (!isPlainObject(data)) {
 data = {}
 // 在非生产环境下给出警告提示
 process.env.NODE_ENV !== 'production' warn(
 'data functions should return an object:\n' +
 'v2/#data-Must-Be-a-Function',
 // 实例对象代理data
 // proxy data on instance
 // 获取所有data键值
 const keys = Object.keys(data)
 // 获取配置对象的pro凡科抠图
 const pro凡科抠图 = vm.$options.pro凡科抠图
 // 获取配置对象的methods
 const methods = vm.$options.methods
 // 遍历keys
 let i = keys.length
 while (i--) {
 const key = keys[i]
 // 非生产环境给出与methods定义的方法名冲突的警告
 if (process.env.NODE_ENV !== 'production') {
 if (methods hasOwn(methods, key)) {
 warn(
 `Method "${key}" has already been defined as a data property.`,
 // 检测是否与pro凡科抠图冲突
 if (pro凡科抠图 hasOwn(pro凡科抠图, key)) {
 // 非生产环境给出冲突警告
 process.env.NODE_ENV !== 'production' warn(
 `The data property "${key}" is already declared as a prop. ` +
 `Use prop default value instead.`,
 // 没有与pro凡科抠图冲突并且非保留字时,代理键名到实例的_data对象上
 } else if (!isReserved(key)) {
 proxy(vm, `_data`, key)
 // 观察数据
 // observe data
 observe(data, true /* asRootData */)
// 定义并导出getData函数,接受函数类型的data对象,和Vue实例对象
export function getData (data: Function, vm: Component): any {
 // pushTarget和popTarget是为了解决Vue依赖性检测的缺陷可能导致冗余依赖性的问题
 // 具体可参阅 vuejs/vue/issues/7573
 // 此操作会设置Dep.target为undefined,在初始化option时调用dep.depend()也不会建立依赖
 // #7573 调用数据getter时禁用dep集合
 // #7573 disable dep collection when invoking data getters
 pushTarget()
 // 尝试在vm上调用data函数并返回执行结果
 try {
 return data.call(vm, vm)
 } catch (e) {
 // 如果捕获到错误则处理错误,并返回空对象
 handleError(e, vm, `data()`)
 return {}
 } finally {
 popTarget()

与 pro凡科抠图 的处理类似,initData 函数的作用也是为了对数据建立观察的依赖关系,并且代理数据到私有变量 _data 上,另外包括了对 data 与其他配置对象属性的键名冲突的检测。

initComputed

// 设置computedWatcherOptions对象
putedWatcherOptions = { computed: true }
// 定义initComputed函数,接受实例vm,和computed对象
function initComputed (vm: Component, computed: Object) {
 // $flow-disable-line
 // putedWatchers属性,初始赋值空对象
 const watchers = vm._computedWatchers = Object.create(null)
 // puted属性在服务器渲染期间只能是getter
 // computed properties are just getters during SSR
 const isSSR = isServerRendering()
 // 遍历computed
 for (const puted) {
 // 获取用户定义的值
 const userDef = computed[key]
 // 如果用户定义的是函数则赋值给getter否则j将userDef.get方法赋值给getter
 const getter = typeof userDef === 'function' userDef : userDef.get
 // 非生产环境抛出缺少计算属性错误警告
 if (process.env.NODE_ENV !== 'production' getter == null) {
 warn(
 `Getter is puted property "${key}".`,
 // 非服务器渲染下
 if (!isSSR) {
 // 为计算属性创建内部监视器
 // create internal watcher puted property.
 watchers[key] = new Watcher(
 getter || noop,
 noop,
 computedWatcherOptions
 // 组件定义的内部计算属性已经在组件的原型上定义好了
 // 所以这里只要关注实例初始化时用户定义的计算属性
 // puted properties are already defined on the
 // component prototype. We only need puted properties defined
 // at instantiation here.
 // 键名非实例根属性时,定义计算属性,具体参照defineComputed函数
 if (!(key in vm)) {
 defineComputed(vm, key, userDef)
 // 非生产环境下,检测与data属性名的冲突并给出警告
 } else if (process.env.NODE_ENV !== 'production') {
 if (key in vm.$data) {
 warn(`puted property "${key}" is already defined in data.`, vm)
 } else if (vm.$options.pro凡科抠图 key in vm.$options.pro凡科抠图) {
 warn(`puted property "${key}" is already defined as a prop.`, vm)
// 定义并导出defineComputed哈数
// 接收实例target,计算属性键名key,计算属性值userDef参数
export function defineComputed (
 target: any,
 key: string,
 userDef: Object | Function
 // 在非服务器渲染下设置缓存
 const shouldCache = !isServerRendering()
 // 计算属性值是函数时
 if (typeof userDef === 'function') {
 // 设置计算属性的getter,setter为空函数
 sharedPropertyDefinition.get = shouldCache
 createComputedGetter(key)
 : userDef
 sharedPropertyDefinition.set = noop
 } else {
 // 当计算属性是对象时,设置计算属性的getter和setter
 sharedPropertyDefinition.get = userDef.get
 shouldCache userDef.cache !== false
 createComputedGetter(key)
 : userDef.get
 : noop
 sharedPropertyDefinition.set = userDef.set
 userDef.set
 : noop
 // 非生产环境下,如果没哟定义计算属性的setter
 // 想设置计算属性时给出警告
 if (process.env.NODE_ENV !== 'production' 
 sharedPropertyDefinition.set === noop) {
 sharedPropertyDefinition.set = function () {
 warn(
 `Computed property "${key}" was assigned to but it has no setter.`,
 this
 // 以重新设置的属性描述符为基础在实例对象上定义计算属性
 Object.defineProperty(target, key, sharedPropertyDefinition)
// 定义createComputedGetter,创建计算属性getter
// 目的是在非服务器渲染情况下建立计算属性的观察依赖,
// 并根据其依赖属性返回计算后的值
function createComputedGetter (key) {
 putedGetter () {
 const watcher = this._computedWatchers this._computedWatchers[key]
 if (watcher) {
 watcher.depend()
 return watcher.evaluate()

计算属性的初始化相对复杂一些,首先要对计算属性建立观察,然后再在实例上重新定义计算属性,并且执行属性代理。由于加入了服务器渲染的功能,在定义计算属性的时候对使用环境做判断,是非服务器渲染会影响到计算属性的定义,这是由于服务器渲染下使用框架时,计算属性是不提供 setter 的;另外也要根据用户定义的值是函数或者对象来对计算属性重新定义 getter 和 setter。从这段代码里可以看出一个非常重要的程序,即在获取计算属性的时候才去计算它的值,这正是懒加载的实现。

initMethods

// 定义initMethods方法,接受实例vm,配置属性methods
function initMethods (vm: Component, methods: Object) {
 // 获取实例的pro凡科抠图
 const pro凡科抠图 = vm.$options.pro凡科抠图
 // 遍历methods对象
 for (const key in methods) {
 // 非生产环境下给出警告
 if (process.env.NODE_ENV !== 'production') {
 // 未赋值方法警告
 if (methods[key] == null) {
 warn(
 `Method "${key}" has an undefined value ponent definition. ` +
 `Did you reference the function correctly `,
 // 与pro凡科抠图属性名冲突警告
 if (pro凡科抠图 hasOwn(pro凡科抠图, key)) {
 warn(
 `Method "${key}" has already been defined as a prop.`,
 // 与保留字冲突警告
 if ((key in vm) isReserved(key)) {
 warn(
 `Method "${key}" conflicts with an existing Vue instance method. ` +
 `ponent methods that start with _ or $.`
 // 在实例上定义方法,赋值为用户未定义函数或空函数
 vm[key] = methods[key] == null noop : bind(methods[key], vm)

initMethods 函数非常简单,除了一大段在非生产环境里报告检查冲突的代码,唯一的内容就是在实例上定义相应的方法并且把上下文绑定到实例对象上,这样即便不是使用箭头函数,在方法内也默认用 this 指代了实例对象。

initWatch

// 定义initWatch函数,接受实例vm和配置属性watch
function initWatch (vm: Component, watch: Object) {
 // 遍历watch
 for (const key in watch) {
 // 暂存属性的值
 const handler = watch[key]
 // 如果handler是数组
 if (Array.isArray(handler)) {
 // 遍历数组为每一个元素创建相应watcher
 for (let i = 0; i handler.length; i++) {
 createWatcher(vm, key, handler[i])
 } else {
 // 窦否则handler应该是函数,直接为key创建watcher
 createWatcher(vm, key, handler)
// 定义createWatcher函数
// 接受实例vm、表达式或函数expOrFn,处理器handler,可选的options
function createWatcher (
 vm: Component,
 expOrFn: string | Function,
 handler: any,
 options : Object
 // 如果handler是对象
 if (isPlainObject(handler)) {
 // 将handler赋值给options.
 options = handler
 // 重新赋值handler
 handler = handler.handler
 // 如果handler是字符串,在实例上寻找handler并赋值给handler
 if (typeof handler === 'string') {
 handler = vm[handler]
 // 创建观察并返回
 return vm.$watch(expOrFn, handler, options)

initWatcher 为传入的观察对象创建监视器,比较简单。值得注意的是参数的传入类型,观察对象 expOrFn 可以有两种方式,一种是字符串,一种是函数,在 Watcher 类中对此参数进行了检测,而在初始化的函数里不对它做任何处理。handler 对象也可以接受对象或字符串类型,在代码中对这两种传入方式做判断,最终找到handler引用的函数传入 $watch。

stateMixin

探索完了 initState 函数之后,继续来看看 state 混入的方法 stateMixin,在这个函数里会提供上面还未曾提到的 $watch 方法的具体实现:

// 定义并导出stateMixin函数,接收参数Vue
export function stateMixin (Vue: Class Component ) {
 // 使用 Object.defineProperty 方法直接声明定义对象时,flow会发生问题
 // 所以必须在此程序化定义对象
 // flow somehow has problems with directly declared definition object
 // when using Object.defineProperty, so we have to procedurally build up
 // the object here.
 // 定义dataDef对象
 const dataDef = {}
 // 定义dataDef的get方法,返回Vue实例私有属性_data
 dataDef.get = function () { return this._data }
 // 定义pro凡科抠图Def对象
 const pro凡科抠图Def = {}
 // 定义pro凡科抠图Def的get方法,返回Vue实例私有属性_pro凡科抠图
 pro凡科抠图Def.get = function () { return this._pro凡科抠图 }
 // 非生产环境下,定义dataDef和pro凡科抠图Def的set方法
 if (process.env.NODE_ENV !== 'production') {
 // dataDef的set方法接收Object类型的newData形参
 dataDef.set = function (newData: Object) {
 // 提示避免传入对象覆盖属性$data
 // 推荐使用嵌套的数据属性代替
 warn(
 'Avoid replacing instance root $data. ' +
 'Use nested data properties instead.',
 this
 // 设置pro凡科抠图Def的set方法为只读
 pro凡科抠图Def.set = function () {
 warn(`$pro凡科抠图 is readonly.`, this)
 // 定义Vue原型对象公共属性$data,并赋值为dataDef
 Object.defineProperty(Vue.prototype, '$data', dataDef)
 // 定义Vue原型对象公共属性$pro凡科抠图,并赋值为pro凡科抠图Def
 Object.defineProperty(Vue.prototype, '$pro凡科抠图', pro凡科抠图Def)
 // 定义Vue原型对象的$set方法,并赋值为从观察者导入的set函数
 Vue.prototype.$set = set
 // 定义Vue原型对象的$delete方法,并赋值为从观察者导入的del函数
 Vue.prototype.$delete = del
 // 定义Vue原型对象的$watch方法
 // 接收字符串或函数类型的expOrFn,从命名中可看出希望为表达式或函数
 // 接收任何类型的cb,这里希望为回调函数或者是一个对象
 // 接收对象类型的options
 // 要求返回函数类型
 Vue.prototype.$watch = function (
 expOrFn: string | Function,
 cb: any,
 options : Object
 ): Function {
 // 把实例赋值给vm变量,类型需为Component
 const vm: Component = this
 // 如果cb是纯粹的对象类型
 if (isPlainObject(cb)) {
 // 返回createWatcher函数
 return createWatcher(vm, expOrFn, cb, options)
 // 定义观察目标的options,大多数情况下为undefined
 options = options || {}
 // 定义options的user属性值为true,标识为用户定义
 options.user = true
 // 创建watcher实例
 const watcher = new Watcher(vm, expOrFn, cb, options)
 // 如果options的immediate为真
 if (options.immediate) {
 // 在vm上调用cb回调函数,并传入watcher.value作为参数
 cb.call(vm, watcher.value)
 // 返回unwatchFn函数
 return function unwatchFn () {
 // 执行watcher.teardown()方法清除观察
 watcher.teardown()

stateMixin执行的是关于状态观察的一系列方法的混入,主要是三个方面:

定义实例 $data 和 $pro凡科抠图 属性的存取器 定义实例的 $set、$delete 方法,具体实在定义在观察者模块中 定义实例的 $watch 方法

到这里,关于状态初始化的部分就探索完毕了,接下来要继续研究另一个与开发过程紧密关联的部分——虚拟节点和模板渲染。

状态初始化是与我们在开发的时候最息息相关的部分,在创建实例对象的配置对象中,我们设置了这些属性和方法,实例初始化的过程中对这些传入的配置进行了很多预先的处理,这就是状态初始化背后的逻辑。在探索到这一部分的时候才真正的感到,终于与平时的开发关联起来了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

上海小程序如何开发_Vue源码根究之状态初始化

Vue源代码研究之情况原始化 本文关键详细介绍了Vue源代码研究之情况原始化,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧再次伴随着...

2021-01-08
小程序开发:教你如何合理使用小程序砍价功能

微信小程序借助着手机微信有着很多的总流量通道,使越来越越大的店家添加了微信小程序。微信小程序的压价做为最经常应用的营销推广专用工具,店家们都想根据压价主题活动充足...

2021-01-08
无需微信小程序源码_实例说明JavaScript截取字符串

案例解读JavaScript提取标识符串 文章投稿:laozhang 在文中中小型编根据案例给大伙儿共享了JavaScript中怎样提取标识符串的方式,必须的小伙伴们参照一下。substring(start,stop)获取标...

2021-01-08
微信小程序涨粉_详解Vue This$Store总结

详细说明Vue This$Store小结 本文关键详细介绍了详细说明Vue This$Store小结,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧开发设计 VueThis$...

2021-01-08
预约微信小程序开发_JavaScript构建自己的模板小引

JavaScript搭建自身的模版小模块实例 本文关键详细介绍了JavaScript搭建自身的模版小模块,融合案例方式剖析了javascript自定模版模块的完成与应用方式,必须的朋友能够参照下文中案例...

2021-01-08
广州凡科互联网科技股份有限公司招聘后期制作

招聘人数:3职位信息【CG合成师方向】1、负责对三维渲染分层素材进行后期合成;2、负责抠像、画面修理及清理工作;【视频栏目包装师方向】1、负责游戏宣传视频、视频广告、片头...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信