延续系列的主题，本文将继续尝试立足于相关模块的单元测试解读和适度源码分析，主要考察 Vue 3.x Composition API 中的 provide() 和 inject() 两个方法；希望能在结合阅读文档的基础上..._provided 内部对象 和原有的 Options API 中的 provide/inject 属性达到统一处理的效果 inject() 只能在 setup() 或 functional component...中使用 在用例 test 3、test 4 中，顺带可以看出，直接从 vue 实例上访问 Ref 值是不用 .value 的；其基本实现如下： // src/setup.ts function asVmProperty...'foo' 未在 provide() 中注册过的时侯，不应报错 2.2 调用关系 2.3 部分归纳 Vue 3.x 中的 provide/inject 是围绕 vue 实例上的 provides 属性进行的...currentInstance.provides = Object.create(parentProvides) } provides[key as string] = value } } 而这个 provides 根源上的初始值定义在
$options上面定义了data ,初始化data, 代理data中的属性到vue实例,支持通过 this.dataKey 的方式访问定义的属性 if (opts.data) { initData...$options 上面定义了 data ,初始化 data, 代理 data 中的属性到 vue 实例，支持通过 this.dataKey 的方式访问定义的属性。...$.` ) } } /** * 将 methods 中的所有方法赋值到 vue 实例上 ,支持通过 this.methodsKey 的方式访问定义的方法...⭐ 将 methods 中的所有方法赋值到 vue 实例上 , 支持通过 this.methodsKey 的方式访问定义的方法。...,将该 computed 属性添加到 Vue 实例 vm 上，并使用 sharedPropertyDefinition 作为设置项。
目录--Vue.js的引入Vue的实例化Vue数据处理（未完成）。。。Vue的实例化由上一章我们了解了Vue类的定义，本章主要分析用户实例化Vue类之后，Vue.js框架内部做了具体的工作。...所以我们先看看Vue的构造函数里面定义了什么方法。...src/core/instance/init.js这个文件的initMixin方法定义了vue实例方法_init。 Vue.prototype._init = function (options?...vm上，并将this指向vm // 对于Computed，在将其设置为vm的响应式属性之外，还需要定义watcher，用于收集依赖 // watch属性，也是将其设置为watcher实例，收集依赖...上的$mount方法到变量mount上const mount = Vue.prototype.
_init 方法，该方法是在 initMixin 中定义的 this._init(options) } // 定义 Vue.prototype...._init 方法 initMixin(Vue) // 原型上的方法：$data, $props, $set, $delete, $watch stateMixin(Vue) // 定义事件相关的方法.../util/index' let uid = 0 // initMixin 把_init 方法挂载在 Vue 原型 供 Vue 实例调用 /** * 定义 Vue.prototype.... 对象中定义的属性不能和props对象中的属性重复，props优先级>methods的优先级 // 将methods中的配置赋值到vue实例上，支持通过this.methodsKey的方式访问方法...中的属性代理到vue实例上，支持通过this.key的方式访问 // 响应式 /** * 做了三件事 * 1.判重处理，data对象上的属性不能和 props，methods 对象上的属性相同
下文是关于Vue3全局Api的内容，大家如果有更好的理解和想法，可以在评论区留言，每条我都会回复~ 全局API 全局API是直接在Vue上挂载方法，在Vue中，全局API一共有13个。...的版本号; createApp 官方定义：返回一个提供应用上下文的应用实例。...顾名思义，CreateApp 作为 vue 的启动函数，返回一个应用实例，每个 Vue 应用程序都首先使用以下函数创建一个新的应用程序实例，应用程序实例公开的大多数方法都返回相同的实例，可以链式调用。...接口或从属性验证对象中自动推断； // 用法示例1： import { defineComponent } from 'vue' const MyComponent = defineComponent...// 现在，在 Vue 3 中，由于函数式组件被定义为纯函数，因此异步组件的定义需要通过将其包裹在新的 defineAsyncComponent 助手方法中来显式地定义： import { defineAsyncComponent
目录--Vue.js的引入Vue的实例化Vue.js的引入这一章将会分析用户在引入Vue.js后，Vue框架做的初始化工作：创建Vue这个类，并往Vue类上添加类属性&类方法和实例属性&实例方法。...Vue的原型链上添加$mount方法，并重写该方法2）platforms/web/runtime/index.js引入 core/index.js 得到Vue类往Vue类的config属性上添加mustUseProp...类添加实例方法__patch__，$mount3）core/index.js引入core/instance/index.js得到Vue类为Vue类添加添加全局API设置Vue实例属性$isServer，..._init = function（）{}initMixin(Vue)// 通过Object.defineProperty方法，添加vue的实例属性$data，$props，主要跟数据相关// 添加Vue...)// install platform patch function// Vue实例上的__patch__方法Vue.prototype.
实例创建之后，通过 vm.data 访问原始数据对象，组件实例也代理了 data 对象所有属性，因此你访问 vm.a 相当于访问 vm.data.a。...以 _ 或 开头的 property 不会被组件实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.data....注意，如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。...可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为组件实例。...值也可以是方法名，或者包含选项的对象。组件实例将会在实例化时调用 watch()，参阅 watch，了解更多关于 deep、immediate 和 flush 选项的信息。
下文是关于Vue3全局Api的内容，大家如果有更好的理解和想法，可以在评论区留言，每条我都会回复~ 全局API 全局API是直接在Vue上挂载方法，在Vue中，全局API一共有13个。...的版本号; createApp 官方定义：返回一个提供应用上下文的应用实例。...顾名思义，CreateApp 作为 vue 的启动函数，返回一个应用实例，每个 Vue 应用程序都首先使用以下函数创建一个新的应用程序实例，应用程序实例公开的大多数方法都返回相同的实例，可以链式调用。...// 现在，在 Vue 3 中，由于函数式组件被定义为纯函数，因此异步组件的定义需要通过将其包裹在新的 defineAsyncComponent 助手方法中来显式地定义： import { defineAsyncComponent...注意： defineAsyncComponent不能使用在Vue Router上！
这种处理方式比较官方的说法叫"选项自定义策略处理"。 选项自定义策略处理 在讲选择自定义策略处理之前先说说vm.$option实例属性，它是用于当前 Vue 实例的初始化选项。..._init(options); } 在创建Vue实例的时候你传递进来的自定义选项对象会传递给this._init这个方法。 Vue.prototype....options 所拥有的属性就是调用mergeField函数传递进来的key。 举个栗子： 你在创建Vue的根实例，并且传递了一个自定义选项对象。...语句把child对象上可枚举的属性名作为参数传递给mergeField。...原因是Vue想给用户自定义选项自由度，也能添加策略函数。 举个栗子： 你在创建Vue的根实例，并且传递了一个自定义选项对象。
：通过扩展Vue实例的方法创建组件 Vue.component：注册组件 先来看看Vue.extend源码，解释参考中文注释： Vue.extend = function (extendOptions.../'super'静态属性指向Vue函数 Sub['super'] = Super; // start-----------------拷贝Vue静态方法 // allow further..._init(options) }，通过原型链继承Vue原型上的属性和方法，再讲Vue的静态函数赋值给该构造函数。...' } } }); 注册局部组件的特点就是在创建Vue实例的时候，定义components属性，该属性是一个简单对象，key值为组件名称，value可以是具体的组件函数...(def); } } } } 在创建Vue实例过程中，经过guardComponents()函数处理之后，能够保证该Vue实例中的components属性
，此做法更利于维护 initMixin(Vue); // 定义原型方法_init stateMixin(Vue) //定义 $set $get $delete $watch 等 eventsMixin...(Vue) // 定义 _render 返回虚拟dom export default Vue; initMixin函数里面定义了原型方法_init，_init调用了initState(vm)等方法，...判断方法和属性是否重名，以及是否有保留属性 没有问题就通过 proxy() 把 data 里的每一个属性都代理到当前实例上，就可以通过 this.xx 访问了 最后再调用 observe 监听整个 data...shallow && observe(val) // data = {a: {b: 3}, c: [1, 2]} 属性值如果是对象或数组会返回Observer实例 // 截持对象属性的 getter...定义响应式对象的缺点 监听嵌套层级过深的对象会影响性能 对象新增或者删除的属性无法被set 监听到 只有对象本身存在的属性修改才会被劫持，所以Vue设计了$set和$delete方法，更新数据的同时手动触发通知依赖
_init(options);}// _init方法是挂载在Vue原型的方法，每一个new 实例可以调用， 由initMixin方法挂载// 将不同的操作拆分成不同的模块，导入后对Vue类做一些处理，此做法更利于维护...initMixin(Vue); // 定义原型方法_initstateMixin(Vue) //定义 $set $get $delete $watch 等eventsMixin(Vue) // 定义事件...判断方法和属性是否重名，以及是否有保留属性没有问题就通过 proxy() 把 data 里的每一个属性都代理到当前实例上，就可以通过 this.xx 访问了最后再调用 observe 监听整个 data...shallow && observe(val) // data = {a: {b: 3}, c: [1, 2]} 属性值如果是对象或数组会返回Observer实例 // 截持对象属性的 getter...定义响应式对象的缺点监听嵌套层级过深的对象会影响性能对象新增或者删除的属性无法被set 监听到 只有对象本身存在的属性修改才会被劫持，所以Vue设计了$set和$delete方法，更新数据的同时手动触发通知依赖如果用其来监听数组的话
Vue 中我们是通过 mount 实例方法去挂载 vm 的，mount 方法在多个文件中都有定义，如 src/platform/web/entry-runtime-with-compiler.js、src...这里我们要牢记，在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 render 方法，无论我们是用单文件 .vue 方式开发组件，还是写了 el 或者 template 属性，最终都会转换成...最后，调用原先原型上的 mount 方法挂载。...原先原型上的 $mount 方法在 src/platform/web/runtime/index.js 中定义，之所以这么设计完全是为了复用，因为它是可以被 runtime only 版本的 Vue 直接使用的...$vnode 表示 Vue 实例的父虚拟 Node，所以它为 Null 则表示当前是根 Vue 的实例。
计算属性是基于数据的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，也就是说只要计算属性依赖的数据还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数，当然如果不希望使用缓存可以使用方法属性并返回值即可...描述 computed计算属性可以定义两种方式的参数，{ [key: string]: Function | { get: Function, set: Function } }，计算属性直接定义在Vue...实例中，所有getter和setter的this上下文自动地绑定为Vue实例，此外如果为一个计算属性使用了箭头函数，则this不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数来访问，计算属性的结果会被缓存...中完成双向绑定是通过Object.defineProperty()实现的，Vue的双向数据绑定，简单点来说分为以下三个部分： Observer: 这里的主要工作是递归地监听对象上的所有属性，在属性值改变的时候...} } } } defineComputed传入了三个参数，vm实例、计算属性的key以及userDef计算属性的定义，属性描述符sharedPropertyDefinition在初始化定义之后经过
$options.el) } 如果有el属性，则调用vm.$mount方法挂载vm,挂载的目标是把模板渲染到最终的DOM。继续追踪vm....// 缓存了原型上的$mount const mount = Vue.prototype.$mount // 重新定义该方法 Vue.prototype....无论是用单文件.vue方法开发组件，还是写了el或者template属性，都会转换成render方法。这个过程是个Vue的在线编译的过程，它是调用compileToFunctions方法实现的。...mount方法，在src/platform/web/runtime/index.js中定义： // public mount method Vue.prototype....$vnode 表示Vue实例的父虚拟Node,所以则表示当前是根Vue的实例 if (vm.$vnode == null) { vm.
_props属性，新增了一个props引用，指向了_props属性；第三步给当前实例增加了_propKeys属性，新增了一个keys的引用，指向了_propKeys属性；第四步判断了是否需要进行监听；遍历...normalizeProps函数处理后的对象propsOptions；存储key校验props格式为当前key定义响应式的属性：defineReactive把当前key的访问方式提高到实例上面：proxy...属性,声明引用watchers；获取是否是服务端渲染-isSSR；遍历computed；获取用户定义的内容-userDef根据用户定义的内容来获取当前属性key的getter函数为当前key增加Watcher...set函数为空函数userDef不为函数时，get函数为createComputedGetter或者createGetterInvoker生成的函数；调用Object.defineProperty为当前实例添加定义属性...watch是Vue原型上的方法，主流程篇简单提了一下，流程图上面看到$watch是在statesMixin函数里面给Vue挂载到原型对象上的。
这个文件夹定义了以下几个方法: setActiveInstance设置激活的实例,这里的实例指的是我们写的vue组件或页面。 initLifecycle 初始化生命周期。...lifecycleMixin 在Vue实例的原型上混入生命周期方法。 mountComponent 挂载组件。 updateChildComponent 更新子组件。...初始化生命周期这个方法，其实只是在实例上申明了几个私有属性，用作申明周期的标识。...lifecycleMixin生命周期混入方法。 这个方法在vue的原型上添加了_update，forceupdate,destroy三个方法。 Vue.prototype....这个放个直接判断实例上是否存在_watcher属性，如果存在_watcher属性，则直接调用watcher的update方法。 Vue.prototype.
); // 定义 _render 返回虚拟dom首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法源码位置：src\core\instance\init.jsVue.prototype...) 适用 父子组件通信ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例$parent / $children：访问访问父组件的属性或方法 /...访问子组件的属性或方法EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信...$root 访问根组件中的属性或方法作用：访问根组件中的属性或方法注意：是根组件，不是父组件。...ref： 这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。
判断 methods 中的每一项是不是已经在 new Vue实例 vm 上存在，而且是方法名是保留的 _ $ （在JS中一般指内部变量标识）开头，如果是警告。...详细举例见此链接 3.6 文中出现的一些函数，最后统一解释下 3.6.1 hasOwn 是否是对象本身拥有的属性 调试模式下，按alt键，把鼠标移到方法名上，可以看到函数定义的地方。点击可以跳转。...解答文章开头提问： 通过this直接访问到methods里面的函数的原因是：因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。...通过 this 直接访问到 data 里面的数据的原因是：data里的属性最终会存储到new Vue的实例（vm）上的 _data对象中，访问 this.xxx，是访问Object.defineProperty...调试后，你可能会发现：原来 Vue 源码，也没有想象中的那么难，也能看懂一部分。 启发：我们工作使用常用的技术和框架或库时，保持好奇心，多思考内部原理。能够做到知其然，知其所以然。就能远超很多人。
/util/index'// Vue构造函数必须使用new关键字实例化, 否则会抛出一个警告, 实例化Vue的时候会调用_init方法初始化// 这里options也是.vue文件中暴露出的对象function...Vue.util = { warn, extend, mergeOptions, defineReactive } //定义全局属性 Vue.set = set Vue.delete..._base = Vue extend(Vue.options.components, builtInComponents) //定义全局方法 initUse(Vue) // Vue.use initMixin.../util/index'// Vue构造函数必须使用new关键字实例化, 否则会抛出一个警告, 实例化Vue的时候会调用_init方法初始化// 这里options也是.vue文件中暴露出的对象function...的原型上挂了一个_init方法，也就是说，我们执行new Vue(options)的时候就会执行这个方法,并且我们传过去的options可以通过vm.
领取专属 10元无门槛券
手把手带您无忧上云
