国外英语写作网站,网站后台 刷新,wordpress更新超时,wordpress访问403让我们继续this._init()的初始化之旅#xff0c;接下来又会执行这样的三个初始化方法#xff1a;initInjections(vm)
initState(vm)
initProvide(vm)5. initInjections(vm): 主要作用是初始化inject#xff0c;可以访问到对应的依赖。inject和provide这里需要简单的提一下接下来又会执行这样的三个初始化方法initInjections(vm)
initState(vm)
initProvide(vm)5. initInjections(vm): 主要作用是初始化inject可以访问到对应的依赖。inject和provide这里需要简单的提一下这是vue2.2版本添加的一对需要一起使用的API它允许父级组件向它之后的所有子孙组件提供依赖让子孙组件无论嵌套多深都可以访问到很cool有木有~provide提供一个对象或是返回一个对象的函数。inject是一个字符串数组或对象。这一对API在vue官网有给出两条食用提示provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。大概是因为会让组件数据层级关系变的混乱的缘故但在开发组件库时会很好使。provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而如果你传入了一个可监听的对象那么其对象的属性还是可响应的。有个小技巧这里可以将根组件data内定义的属性提供给子孙组件这样在不借助vuex的情况下就可以实现简单的全局状态管理还是很cool的~app.vue 根组件export default {provide() {return {app: this}},data() {return {info: hello world!}}
}child.vue 子孙组件export default {inject: [app],methods: {handleClick() {this.app.info hello vue!}}
}一但触发handleClick事件之后无论嵌套多深的子孙组件只要是使用了inject注入this.app.info变量的地方都会被响应这就完成了简易的vuex。更多的示例大家可以去vue的官网翻阅这里就不码字了现在我们来分析下这么cool的功能它究竟是怎么实现的~虽然inject和provide是成对使用的但是二者在内部是分开初始化的。从上面三个初始化方法就能看出先初始化inject然后初始化props/data状态相关最后初始化provide。这样做的目的是可以在props/data中使用inject内所注入的内容。我们首先来看一下初始化inject时的方法定义export function initInjections(vm) {const result resolveInject(vm.$options.inject, vm) // 找结果...
}vm.$options.inject为之前合并后得到的用户自定义的inject然后使用resolveInject方法找到我们想要的结果,我们看下resolveInject方法的定义export function resolveInject (inject, vm) {if (inject) {const result Object.create(null)const keys Object.keys(inject) //省略Symbol情况for (let i 0; i keys.length; i) {const key keys[i]const provideKey inject[key].fromlet source vmwhile (source) {if (source._provided hasOwn(source._provided, provideKey)) { //hasOwn为是否有result[key] source._provided[provideKey]break}source source.$parent}... vue2.5后新增设置inject默认参数相关逻辑}return result}
}首先定义一个result返回找到的结果。接下来使用双循环查找外层的for循环会遍历inject的每一项然后再内层使用while循环自底向上的查找inject该项的父级是否有提供对应的依赖。Ps:这里可能有人会有疑问之前inject的定义明明是数组这里怎么可以通过Object.keys取值这是因为上一章再做options合并时也会对参数进行格式化如props的格式定义为数组也会被转为对象格式inject被定义时是这样的定义时
{inject: [app]
}格式化后
{inject: {app: {from: app}}
}书接上文source就是当前的实例而source._provided内保存的就是当前provide提供的值。首先从当前实例查找接着将它的父组件实例赋值给source在它的父组件查找。找到后使用break跳出循环将搜索的结果赋值给result接着查找下一个。Ps:可能有人又会有疑问这个时候是先初始化的inject再初始化的provide怎么访问父级的provide了它根本就没初始化阿这个时候我们就要再思考下了因为vue是组件式的首先就会初始化父组件然后才是初始化子组件所以这个时候是有source._provided属性的。找到了想到的结果之后我们补全之前initInjections的定义export function initInjections(vm) {const result resolveInject(vm.$options.inject, vm)if(result) { // 如果有结果toggleObserving(false) // 刻意为之不被响应式Object.keys(result).forEach(key {...defineReactive(vm, key, result[key])})toggleObserving(true)}
}如果有搜索结果首先会调用toggleObserving(false)具体实现不用理会只用知道这个方法的作用是设置一个标志位将决定defineReactive()方法是否将它的第三个参数设置为响应式数据也就是决定result[key]这个值是否会被设置为响应式数据这里的参数为false只是在vm下挂载key对应普通的值不过这样就可以在当前实例使用this访问到inject内对应的依赖项了设置完毕之后再调用toggleObserving(true)改变标志位让defineReactive()可以设置第三个参数为响应式数据defineReactive是响应式原理很重要的方法这里了解即可也就是它该有的样子。以上就是inject实现的相关原理一句话来说就是首先遍历每一项然后挨个遍历每一项父级是否有依赖。6. initState(vm): 初始化会被使用到的状态状态包括propsmethodsdatacomputedwatch五个选项。首先看下initState(vm)方法的定义export function initState(vm) {...const opts vm.$optionsif(opts.props) initProps(vm, opts.props)if(opts.methods) initMethods(vm, opts.methods)if(opts.data) initData(vm)...if(opts.computed) initComputed(vm, opts.computed)if(opts.watch opts.watch ! nativeWatch) {initWatch(vm, opts.watch)}
}现在这里的话只会介绍前面三类状态的初始化做了什么也就是propsmethodsdata因为computed和watch会涉及到响应式相关的watcher这里先略过。接下来我们依次有请这三位的初始化方法登场6.1 initProps (vm, propsOptions)主要作用是检测子组件接受的值是否符合规则以及让对应的值可以用this直接访问。function initProps(vm, propsOptions) { // 第二个参数为验证规则const propsData vm.$options.propsData || {} // props具体的值const props vm._props {} // 存放propsconst isRoot !vm.$parent // 是否是根节点if (!isRoot) {toggleObserving(false)}for (const key in propsOptions) {const value validateProp(key, propsOptions, propsData, vm)defineReactive(props, key, value)if (!(key in vm)) {proxy(vm, _props, key)}}toggleObserving(true)
}我们知道props是作为父组件向子组件通信的重要方式而initProps内的第二个参数propsOptions就是当前实例也就是通信角色里的子组件它所定义的接受参数的规则。子组件的props规则是可以使用数组形式的定义的不过再经过合并options之后会被格式化为对象的形式定义时
{props: [name, age]
}格式化后
{name: {type: null},age: {type: null}
}所以在定义props规则时直接使用对象格式吧这也是更好的书写规范。知道了规则之后接下来需要知道父组件传递给子组件具体的值它以对象的格式被放在vm.$options.propsData内这也是合并options时得到的。接下来在实例下定义了一个空对象vm._props它的作用是将符合规格的值挂载到它下面。isRoot的作用是判断当前组件是否是根组件如果不是就不将props的转为响应式数据。接下来遍历格式化后的props验证规则通过validateProp方法验证规则并得到相应的值将得到的值挂载到vm._props下。这个时候就可以通过this._props访问到props内定义的值了props: [name],
methods: {handleClick() {console.log(this._props.name)}
}不过直接访问内部的私有变量这种方式并不友好所以vue内部做了一层代理将对this.name的访问转而为对this._props.name的访问。这里的proxy需要介绍下因为之后的data也会使用到看下它的定义格式化了一下
export function proxy(target, sourceKey, key) {Object.defineProperty(target, key, {enumerable: true,configurable: true,get: function () {return this[sourceKey][key]},set: function () {this[sourceKey][key] val}})
}其实很简单只是定义一个对象值的get方法读取时让其返回另外的一个值这里就完成了props的初始化。6.2 initMethods (vm, methods)主要作用是将methods内的方法挂载到this下。function initMethods(vm, methods) {const props vm.$options.propsfor(const key in methods) {if(methods[key] null) { // methods[key] null || methods[key] undefined 的简写warn(只定义了key而没有相应的value)}if(props hasOwn(props, key)) {warn(方法名和props的key重名了)}if((key in vm) isReserved(key)) {warn(方法名已经存在而且以_或$开头)}vm[key] methods[key] null? noop // 空函数: bind(methods[key], vm) // 相当于methods[key].bind(vm)}
}methods的初始化相较而言就简单了很多。不过它也有很多边界情况如只定义了key而没有方法具体的实现、key和props重名了、key已经存在且命名不规范以_或$开头至于为什么不行我们第一章的时候有说明了。最后将methods内的方法挂载到this下就完成了methods的初始化。6.3 initData (vm)主要作用是初始化data还是老套路挂载到this下。有个重要的点之所以data内的数据是响应式的是在这里初始化的这个大家得有个印象~。function initData (vm: Component) {let data vm.$options.datadata vm._data typeof data function? getData(data, vm) // 通过data.call(vm, vm)得到返回的对象: data || {}if (!isPlainObject(data)) { // 如果不是一个对象格式data {}warn(data得是一个对象)}const keys Object.keys(data)const props vm.$options.props // 得到propsconst methods vm.$options.methods // 得到methodslet i keys.lengthwhile (i--) {const key keys[i]if (methods hasOwn(methods, key)) {warn(和methods内的方法重名了)}if (props hasOwn(props, key)) {warn(和props内的key重名了)} else if (!isReserved(key)) { // key不能以_或$开头proxy(vm, _data, key)}}observe(data, true)
}首先通过vm.$options.data得到用户定义的data如果是function格式就执行它并返回执行之后的结果否则返回data或{}将结果赋值给vm._data这个私有属性。和props一样的套路最后用来做一层代理如果得到的结果不是对象格式就是报错了。然后遍历data内的每一项不能和methods以及props内的key重名然后使用proxy做一层代理。注意最后会执行一个方法observe(data, true)它的作用了是递归的让data内的每一项数据都变成响应式的。其实不难发现它们仨主要做的事情差不多首先不要相互之间有重名然后可以被this直接访问到。7. initProvide(vm): 主要作用是初始化provide为子组件提供依赖。provide选项应该是一个对象或是函数所以对它取值即可就像取data内的值类似看下它的定义export function initProvide (vm) {const provide vm.$options.provideif (provide) {vm._provided typeof provide function? provide.call(vm): provide}
}首先通过vm.$options.provide取得用户定义的provide选项如果是一个function类型就执行一下得到返回后的结果将其赋值给了vm._provided私有属性所以子组件在初始化inject时就可以访问到父组件提供的依赖了如果不是function类型就直接返回定义的provide。8. callHook(vm, created): 执行用户定义的created钩子函数有mixin混入的也一并执行。终于我们越过了created钩子函数还是分别用一句话来介绍它们主要都干了什么事initInjections(vm)让子组件inject的项可以访问到正确的值initState(vm)将组件定义的状态挂载到this下。initProvide(vm)初始化父组件提供的provide依赖。created执行组件的created钩子函数初始化的阶段算是告一段落了接下来我们会进入组件的挂载阶段。按照惯例我们还是以一道vue容易被问道的面试题作为本章的结束吧~面试官微笑而又不失礼貌的问道请问methods内的方法可以使用箭头函数么会造成什么样的结果 怼回去是不可以使用箭头函数的因为箭头函数的this是定义时就绑定的。在vue的内部methods内每个方法的上下文是当前的vm组件实例methods[key].bind(vm)而如果使用使用箭头函数函数的上下文就变成了父级的上下文也就是undefined了结果就是通过undefined访问任何变量都会报错。 顺手点个赞或关注呗找起来也方便~胡成你可能会用的上的一个vue功能组件库持续完善中...zhuanlan.zhihu.com
