Socket
Socket
Sign inDemoInstall

@vue/composition-api

Package Overview
Dependencies
Maintainers
16
Versions
106
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vue/composition-api - npm Package Compare versions

Comparing version 0.6.7 to 1.0.0-beta.1

dist/vue-composition-api.common.js
dist/vue-composition-api.common.prod.js
dist/vue-composition-api.esm.js
dist/vue-composition-api.prod.js
index.js

18

CHANGELOG.md

@@ -0,1 +1,19 @@

<a name="1.0.0-beta.1"></a>
# [1.0.0-beta.1](https://github.com/vuejs/composition-api/compare/v0.6.7...v1.0.0-beta.1) (2020-06-30)
### Bug Fixes
* **unwrapRef:** copy __ob__ and make toRaw work in props ([#409](https://github.com/vuejs/composition-api/issues/409)) ([5f23886](https://github.com/vuejs/composition-api/commit/5f23886)), closes [#392](https://github.com/vuejs/composition-api/issues/392)
* nextTick await ([#414](https://github.com/vuejs/composition-api/issues/414)) ([85ffede](https://github.com/vuejs/composition-api/commit/85ffede))
* **type:** accept undefined return for setup() ([#417](https://github.com/vuejs/composition-api/issues/417)) ([64b16ff](https://github.com/vuejs/composition-api/commit/64b16ff))
### Features
* add createApp ([#415](https://github.com/vuejs/composition-api/issues/415)) ([391a0d9](https://github.com/vuejs/composition-api/commit/391a0d9))
* Vue version warning in dev mode ([#408](https://github.com/vuejs/composition-api/issues/408)) ([0840aa8](https://github.com/vuejs/composition-api/commit/0840aa8))
<a name="0.6.7"></a>

@@ -2,0 +20,0 @@ ## [0.6.7](https://github.com/vuejs/composition-api/compare/v0.6.6...v0.6.7) (2020-06-24)

22

dist/index.d.ts

@@ -1,2 +0,3 @@

import Vue$1, { VueConstructor, ComponentOptions, VNode } from 'vue';
import Vue$1, { VueConstructor, ComponentOptions, VNode, CreateElement } from 'vue';
import { VueConstructor as VueConstructor$1 } from 'vue/types/umd';

@@ -102,3 +103,3 @@ declare type Data = {

}
declare type SetupFunction<Props, RawBindings> = (this: void, props: Props, ctx: SetupContext) => RawBindings | (() => VNode | null);
declare type SetupFunction<Props, RawBindings = {}> = (this: void, props: Props, ctx: SetupContext) => RawBindings | (() => VNode | null) | void;
interface ComponentOptionsBase<Props, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}> extends Omit<ComponentOptions<Vue, D, M, C, Props>, 'data' | 'computed' | 'method' | 'setup' | 'props'> {

@@ -137,11 +138,20 @@ data?: (this: Props, vm: Props) => D;

declare function defineComponent<Props, RawBindings = Data, D = Data, C extends ComputedOptions = {}, M extends MethodOptions = {}, PropsOptions extends ComponentPropsOptions = ComponentPropsOptions>(options: HasDefined<Props> extends true ? ComponentOptionsWithProps<PropsOptions, RawBindings, D, C, M, Props> : ComponentOptionsWithProps<PropsOptions, RawBindings, D, C, M>): VueProxy<PropsOptions, RawBindings, D, C, M>;
declare const createComponent: typeof defineComponent;
interface App {
config: VueConstructor$1['config'];
use: VueConstructor$1['use'];
mixin: VueConstructor$1['mixin'];
component: VueConstructor$1['component'];
directive: VueConstructor$1['directive'];
mount: Vue$1['$mount'];
unmount: Vue$1['$destroy'];
}
declare function createApp(rootComponent: any, rootProps?: any): App;
declare type NextTick = Vue$1['$nextTick'];
declare const nextTick: NextTick;
declare type CreateElement = Vue$1['$createElement'];
declare const createElement: CreateElement;
declare function getCurrentVM(): ComponentInstance | null;
declare function getCurrentInstance(): ComponentInstance | null;

@@ -312,2 +322,2 @@ interface Option<T> {

export default VueCompositionAPI;
export { ComponentRenderProxy, ComputedRef, FlushMode, InjectionKey, PropOptions, PropType, Ref, SetupContext, UnwrapRef, VueWatcher, WatchCallback, WatchEffect, WatchOptions, WatchOptionsBase, WatchSource, WatchStopHandle, WritableComputedRef, computed, createComponent, createElement, defineComponent, getCurrentVM as getCurrentInstance, inject, isReactive, isRef, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onServerPrefetch, onUnmounted, onUpdated, provide, reactive, ref, set, shallowReactive, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect };
export { ComponentRenderProxy, ComputedRef, FlushMode, InjectionKey, PropOptions, PropType, Ref, SetupContext, UnwrapRef, VueWatcher, WatchCallback, WatchEffect, WatchOptions, WatchOptionsBase, WatchSource, WatchStopHandle, WritableComputedRef, computed, createApp, defineComponent, getCurrentInstance, createElement as h, inject, isReactive, isRef, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onServerPrefetch, onUnmounted, onUpdated, provide, reactive, ref, set, shallowReactive, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect };

2763

dist/vue-composition-api.js

@@ -1,1389 +0,1434 @@

'use strict';
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
(global = global || self, factory(global.VueCompositionAPI = {}, global.Vue));
}(this, (function (exports, Vue) { 'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var toString = function (x) { return Object.prototype.toString.call(x); };
function isNative(Ctor) {
return typeof Ctor === 'function' && /native code/.test(Ctor.toString());
}
var hasSymbol = typeof Symbol !== 'undefined' &&
isNative(Symbol) &&
typeof Reflect !== 'undefined' &&
isNative(Reflect.ownKeys);
var noopFn = function (_) { return _; };
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noopFn,
set: noopFn,
};
function proxy(target, key, _a) {
var get = _a.get, set = _a.set;
sharedPropertyDefinition.get = get || noopFn;
sharedPropertyDefinition.set = set || noopFn;
Object.defineProperty(target, key, sharedPropertyDefinition);
}
function def(obj, key, val, enumerable) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true,
});
}
function hasOwn(obj, key) {
return Object.hasOwnProperty.call(obj, key);
}
function assert(condition, msg) {
if (!condition)
throw new Error("[vue-composition-api] " + msg);
}
function isArray(x) {
return Array.isArray(x);
}
function isPlainObject(x) {
return toString(x) === '[object Object]';
}
function isFunction(x) {
return typeof x === 'function';
}
function warn(msg, vm) {
Vue.util.warn(msg, vm);
}
function logError(err, vm, info) {
{
warn("Error in " + info + ": \"" + err.toString() + "\"", vm);
}
if (typeof window !== 'undefined' && typeof console !== 'undefined') {
console.error(err);
}
else {
throw err;
}
}
var Vue = _interopDefault(require('vue'));
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
var toString = function (x) { return Object.prototype.toString.call(x); };
function isNative(Ctor) {
return typeof Ctor === 'function' && /native code/.test(Ctor.toString());
}
var hasSymbol = typeof Symbol !== 'undefined' &&
isNative(Symbol) &&
typeof Reflect !== 'undefined' &&
isNative(Reflect.ownKeys);
var noopFn = function (_) { return _; };
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noopFn,
set: noopFn,
};
function proxy(target, key, _a) {
var get = _a.get, set = _a.set;
sharedPropertyDefinition.get = get || noopFn;
sharedPropertyDefinition.set = set || noopFn;
Object.defineProperty(target, key, sharedPropertyDefinition);
}
function def(obj, key, val, enumerable) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true,
});
}
function hasOwn(obj, key) {
return Object.hasOwnProperty.call(obj, key);
}
function assert(condition, msg) {
if (!condition)
throw new Error("[vue-composition-api] " + msg);
}
function isArray(x) {
return Array.isArray(x);
}
function isPlainObject(x) {
return toString(x) === '[object Object]';
}
function isFunction(x) {
return typeof x === 'function';
}
function warn(msg, vm) {
Vue.util.warn(msg, vm);
}
function logError(err, vm, info) {
{
warn("Error in " + info + ": \"" + err.toString() + "\"", vm);
}
if (typeof window !== 'undefined' && typeof console !== 'undefined') {
console.error(err);
}
else {
throw err;
}
}
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
var currentVue = null;
var currentVM = null;
function getCurrentVue() {
{
assert(currentVue, "must call Vue.use(VueCompositionAPI) before using any function.");
}
return currentVue;
}
function setCurrentVue(vue) {
currentVue = vue;
}
function getCurrentInstance() {
return currentVM;
}
function setCurrentVM(vm) {
currentVM = vm;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function currentVMInFn(hook) {
var vm = getCurrentInstance();
if ( !vm) {
warn(hook + " is called when there is no active component instance to be " +
"associated with. " +
"Lifecycle injection APIs can only be used during execution of setup().");
}
return vm;
}
function defineComponentInstance(Ctor, options) {
if (options === void 0) { options = {}; }
var silent = Ctor.config.silent;
Ctor.config.silent = true;
var vm = new Ctor(options);
Ctor.config.silent = silent;
return vm;
}
function isComponentInstance(obj) {
return currentVue && obj instanceof currentVue;
}
function createSlotProxy(vm, slotName) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (!vm.$scopedSlots[slotName]) {
return warn("slots." + slotName + "() got called outside of the \"render()\" scope", vm);
}
return vm.$scopedSlots[slotName].apply(vm, args);
};
}
function resolveSlots(slots, normalSlots) {
var res;
if (!slots) {
res = {};
}
else if (slots._normalized) {
// fast path 1: child component re-render only, parent did not change
return slots._normalized;
}
else {
res = {};
for (var key in slots) {
if (slots[key] && key[0] !== '$') {
res[key] = true;
}
}
}
// expose normal slots on scopedSlots
for (var key in normalSlots) {
if (!(key in res)) {
res[key] = true;
}
}
return res;
}
var currentVue = null;
var currentVM = null;
function getCurrentVue() {
{
assert(currentVue, "must call Vue.use(plugin) before using any function.");
}
return currentVue;
}
function setCurrentVue(vue) {
currentVue = vue;
}
function getCurrentVM() {
return currentVM;
}
function setCurrentVM(vm) {
currentVM = vm;
}
function createSymbol(name) {
return hasSymbol ? Symbol.for(name) : name;
}
var WatcherPreFlushQueueKey = createSymbol('vfa.key.preFlushQueue');
var WatcherPostFlushQueueKey = createSymbol('vfa.key.postFlushQueue');
var AccessControlIdentifierKey = createSymbol('vfa.key.accessControlIdentifier');
var ReactiveIdentifierKey = createSymbol('vfa.key.reactiveIdentifier');
var RawIdentifierKey = createSymbol('vfa.key.rawIdentifierKey');
// must be a string, symbol key is ignored in reactive
var RefKey = 'vfa.key.refKey';
function currentVMInFn(hook) {
var vm = getCurrentVM();
if ( !vm) {
warn(hook + " is called when there is no active component instance to be " +
"associated with. " +
"Lifecycle injection APIs can only be used during execution of setup().");
}
return vm;
}
function defineComponentInstance(Ctor, options) {
if (options === void 0) { options = {}; }
var silent = Ctor.config.silent;
Ctor.config.silent = true;
var vm = new Ctor(options);
Ctor.config.silent = silent;
return vm;
}
function isComponentInstance(obj) {
return currentVue && obj instanceof currentVue;
}
function createSlotProxy(vm, slotName) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (!vm.$scopedSlots[slotName]) {
return warn("slots." + slotName + "() got called outside of the \"render()\" scope", vm);
}
return vm.$scopedSlots[slotName].apply(vm, args);
};
}
function resolveSlots(slots, normalSlots) {
var res;
if (!slots) {
res = {};
}
else if (slots._normalized) {
// fast path 1: child component re-render only, parent did not change
return slots._normalized;
}
else {
res = {};
for (var key in slots) {
if (slots[key] && key[0] !== '$') {
res[key] = true;
}
}
}
// expose normal slots on scopedSlots
for (var key in normalSlots) {
if (!(key in res)) {
res[key] = true;
}
}
return res;
}
var RefImpl = /** @class */ (function () {
function RefImpl(_a) {
var get = _a.get, set = _a.set;
proxy(this, 'value', {
get: get,
set: set,
});
}
return RefImpl;
}());
function createRef(options) {
// seal the ref, this could prevent ref from being observed
// It's safe to seal the ref, since we really shouldn't extend it.
// related issues: #79
return Object.seal(new RefImpl(options));
}
function ref(raw) {
var _a;
if (isRef(raw)) {
return raw;
}
var value = reactive((_a = {}, _a[RefKey] = raw, _a));
return createRef({
get: function () { return value[RefKey]; },
set: function (v) { return (value[RefKey] = v); },
});
}
function isRef(value) {
return value instanceof RefImpl;
}
function unref(ref) {
return isRef(ref) ? ref.value : ref;
}
function toRefs(obj) {
if (!isPlainObject(obj))
return obj;
if ( !isReactive(obj)) {
warn("toRefs() expects a reactive object but received a plain one.");
}
var ret = {};
for (var key in obj) {
ret[key] = toRef(obj, key);
}
return ret;
}
function toRef(object, key) {
var v = object[key];
if (isRef(v))
return v;
return createRef({
get: function () { return object[key]; },
set: function (v) { return (object[key] = v); },
});
}
function shallowRef(raw) {
var _a;
if (isRef(raw)) {
return raw;
}
var value = shallowReactive((_a = {}, _a[RefKey] = raw, _a));
return createRef({
get: function () { return value[RefKey]; },
set: function (v) { return (value[RefKey] = v); },
});
}
function triggerRef(value) {
if (!isRef(value))
return;
value.value = value.value;
}
function createSymbol(name) {
return hasSymbol ? Symbol.for(name) : name;
}
var WatcherPreFlushQueueKey = createSymbol('vfa.key.preFlushQueue');
var WatcherPostFlushQueueKey = createSymbol('vfa.key.postFlushQueue');
var AccessControlIdentifierKey = createSymbol('vfa.key.accessControlIdentifier');
var ReactiveIdentifierKey = createSymbol('vfa.key.reactiveIdentifier');
var RawIdentifierKey = createSymbol('vfa.key.rawIdentifierKey');
// must be a string, symbol key is ignored in reactive
var RefKey = 'vfa.key.refKey';
var AccessControlIdentifier = {};
var ReactiveIdentifier = {};
var RawIdentifier = {};
function isRaw(obj) {
return (hasOwn(obj, RawIdentifierKey) && obj[RawIdentifierKey] === RawIdentifier);
}
function isReactive(obj) {
return (Object.isExtensible(obj) &&
hasOwn(obj, ReactiveIdentifierKey) &&
obj[ReactiveIdentifierKey] === ReactiveIdentifier);
}
/**
* Proxing property access of target.
* We can do unwrapping and other things here.
*/
function setupAccessControl(target) {
if (!isPlainObject(target) ||
isRaw(target) ||
Array.isArray(target) ||
isRef(target) ||
isComponentInstance(target)) {
return;
}
if (hasOwn(target, AccessControlIdentifierKey) &&
target[AccessControlIdentifierKey] === AccessControlIdentifier) {
return;
}
if (Object.isExtensible(target)) {
def(target, AccessControlIdentifierKey, AccessControlIdentifier);
}
var keys = Object.keys(target);
for (var i = 0; i < keys.length; i++) {
defineAccessControl(target, keys[i]);
}
}
/**
* Auto unwrapping when access property
*/
function defineAccessControl(target, key, val) {
if (key === '__ob__')
return;
var getter;
var setter;
var property = Object.getOwnPropertyDescriptor(target, key);
if (property) {
if (property.configurable === false) {
return;
}
getter = property.get;
setter = property.set;
if ((!getter || setter) /* not only have getter */ &&
arguments.length === 2) {
val = target[key];
}
}
setupAccessControl(val);
Object.defineProperty(target, key, {
enumerable: true,
configurable: true,
get: function getterHandler() {
var value = getter ? getter.call(target) : val;
// if the key is equal to RefKey, skip the unwrap logic
if (key !== RefKey && isRef(value)) {
return value.value;
}
else {
return value;
}
},
set: function setterHandler(newVal) {
if (getter && !setter)
return;
var value = getter ? getter.call(target) : val;
// If the key is equal to RefKey, skip the unwrap logic
// If and only if "value" is ref and "newVal" is not a ref,
// the assignment should be proxied to "value" ref.
if (key !== RefKey && isRef(value) && !isRef(newVal)) {
value.value = newVal;
}
else if (setter) {
setter.call(target, newVal);
}
else {
val = newVal;
}
setupAccessControl(newVal);
},
});
}
function observe(obj) {
var Vue = getCurrentVue();
var observed;
if (Vue.observable) {
observed = Vue.observable(obj);
}
else {
var vm = defineComponentInstance(Vue, {
data: {
$$state: obj,
},
});
observed = vm._data.$$state;
}
return observed;
}
function shallowReactive(obj) {
var e_1, _a;
if ( !obj) {
warn('"shallowReactive()" is called without provide an "object".');
// @ts-ignore
return;
}
if (!isPlainObject(obj) ||
isReactive(obj) ||
isRaw(obj) ||
!Object.isExtensible(obj)) {
return obj;
}
var observed = observe({});
markReactive(observed, true);
setupAccessControl(observed);
var ob = observed.__ob__;
var _loop_1 = function (key) {
var val = obj[key];
var getter;
var setter;
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property) {
if (property.configurable === false) {
return "continue";
}
getter = property.get;
setter = property.set;
if ((!getter || setter) /* not only have getter */ &&
arguments_1.length === 2) {
val = obj[key];
}
}
// setupAccessControl(val);
Object.defineProperty(observed, key, {
enumerable: true,
configurable: true,
get: function getterHandler() {
var value = getter ? getter.call(obj) : val;
ob.dep.depend();
return value;
},
set: function setterHandler(newVal) {
if (getter && !setter)
return;
if (setter) {
setter.call(obj, newVal);
}
else {
val = newVal;
}
ob.dep.notify();
},
});
};
var arguments_1 = arguments;
try {
for (var _b = __values(Object.keys(obj)), _c = _b.next(); !_c.done; _c = _b.next()) {
var key = _c.value;
_loop_1(key);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return observed;
}
function markReactive(target, shallow) {
if (shallow === void 0) { shallow = false; }
if (!isPlainObject(target) ||
isRaw(target) ||
Array.isArray(target) ||
isRef(target) ||
isComponentInstance(target)) {
return;
}
if (hasOwn(target, ReactiveIdentifierKey) &&
target[ReactiveIdentifierKey] === ReactiveIdentifier) {
return;
}
if (Object.isExtensible(target)) {
def(target, ReactiveIdentifierKey, ReactiveIdentifier);
}
if (shallow) {
return;
}
var keys = Object.keys(target);
for (var i = 0; i < keys.length; i++) {
markReactive(target[keys[i]]);
}
}
/**
* Make obj reactivity
*/
function reactive(obj) {
if ( !obj) {
warn('"reactive()" is called without provide an "object".');
// @ts-ignore
return;
}
if (!isPlainObject(obj) ||
isReactive(obj) ||
isRaw(obj) ||
!Object.isExtensible(obj)) {
return obj;
}
var observed = observe(obj);
// def(obj, ReactiveIdentifierKey, ReactiveIdentifier);
markReactive(obj);
setupAccessControl(observed);
return observed;
}
/**
* Make sure obj can't be a reactive
*/
function markRaw(obj) {
if (!isPlainObject(obj) || !Object.isExtensible(obj)) {
return obj;
}
// set the vue observable flag at obj
def(obj, '__ob__', observe({}).__ob__);
// mark as Raw
def(obj, RawIdentifierKey, RawIdentifier);
return obj;
}
function toRaw(observed) {
if (isRaw(observe) || !Object.isExtensible(observed)) {
return observed;
}
return observed.__ob__.value || observed;
}
var RefImpl = /** @class */ (function () {
function RefImpl(_a) {
var get = _a.get, set = _a.set;
proxy(this, 'value', {
get: get,
set: set,
});
}
return RefImpl;
}());
function createRef(options) {
// seal the ref, this could prevent ref from being observed
// It's safe to seal the ref, since we really shouldn't extend it.
// related issues: #79
return Object.seal(new RefImpl(options));
}
function ref(raw) {
var _a;
if (isRef(raw)) {
return raw;
}
var value = reactive((_a = {}, _a[RefKey] = raw, _a));
return createRef({
get: function () { return value[RefKey]; },
set: function (v) { return (value[RefKey] = v); },
});
}
function isRef(value) {
return value instanceof RefImpl;
}
function unref(ref) {
return isRef(ref) ? ref.value : ref;
}
function toRefs(obj) {
if (!isPlainObject(obj))
return obj;
if ( !isReactive(obj)) {
warn("toRefs() expects a reactive object but received a plain one.");
}
var ret = {};
for (var key in obj) {
ret[key] = toRef(obj, key);
}
return ret;
}
function toRef(object, key) {
var v = object[key];
if (isRef(v))
return v;
return createRef({
get: function () { return object[key]; },
set: function (v) { return (object[key] = v); },
});
}
function shallowRef(raw) {
var _a;
if (isRef(raw)) {
return raw;
}
var value = shallowReactive((_a = {}, _a[RefKey] = raw, _a));
return createRef({
get: function () { return value[RefKey]; },
set: function (v) { return (value[RefKey] = v); },
});
}
function triggerRef(value) {
if (!isRef(value))
return;
value.value = value.value;
}
function isUndef(v) {
return v === undefined || v === null;
}
function isPrimitive(value) {
return (typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean');
}
function isValidArrayIndex(val) {
var n = parseFloat(String(val));
return n >= 0 && Math.floor(n) === n && isFinite(val);
}
/**
* Set a property on an object. Adds the new property, triggers change
* notification and intercept it's subsequent access if the property doesn't
* already exist.
*/
function set(target, key, val) {
var Vue = getCurrentVue();
var _a = Vue.util, warn = _a.warn, defineReactive = _a.defineReactive;
if ( (isUndef(target) || isPrimitive(target))) {
warn("Cannot set reactive property on undefined, null, or primitive value: " + target);
}
if (isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key);
target.splice(key, 1, val);
return val;
}
if (key in target && !(key in Object.prototype)) {
target[key] = val;
return val;
}
var ob = target.__ob__;
if (target._isVue || (ob && ob.vmCount)) {
warn('Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.');
return val;
}
if (!ob) {
target[key] = val;
return val;
}
defineReactive(ob.value, key, val);
// IMPORTANT: define access control before trigger watcher
defineAccessControl(target, key, val);
markReactive(ob.value[key]);
ob.dep.notify();
return val;
}
var AccessControlIdentifier = {};
var ReactiveIdentifier = {};
var RawIdentifier = {};
function isRaw(obj) {
return (hasOwn(obj, RawIdentifierKey) && obj[RawIdentifierKey] === RawIdentifier);
}
function isReactive(obj) {
return (Object.isExtensible(obj) &&
hasOwn(obj, ReactiveIdentifierKey) &&
obj[ReactiveIdentifierKey] === ReactiveIdentifier);
}
/**
* Proxing property access of target.
* We can do unwrapping and other things here.
*/
function setupAccessControl(target) {
if (!isPlainObject(target) ||
isRaw(target) ||
Array.isArray(target) ||
isRef(target) ||
isComponentInstance(target)) {
return;
}
if (hasOwn(target, AccessControlIdentifierKey) &&
target[AccessControlIdentifierKey] === AccessControlIdentifier) {
return;
}
if (Object.isExtensible(target)) {
def(target, AccessControlIdentifierKey, AccessControlIdentifier);
}
var keys = Object.keys(target);
for (var i = 0; i < keys.length; i++) {
defineAccessControl(target, keys[i]);
}
}
/**
* Auto unwrapping when access property
*/
function defineAccessControl(target, key, val) {
if (key === '__ob__')
return;
var getter;
var setter;
var property = Object.getOwnPropertyDescriptor(target, key);
if (property) {
if (property.configurable === false) {
return;
}
getter = property.get;
setter = property.set;
if ((!getter || setter) /* not only have getter */ &&
arguments.length === 2) {
val = target[key];
}
}
setupAccessControl(val);
Object.defineProperty(target, key, {
enumerable: true,
configurable: true,
get: function getterHandler() {
var value = getter ? getter.call(target) : val;
// if the key is equal to RefKey, skip the unwrap logic
if (key !== RefKey && isRef(value)) {
return value.value;
}
else {
return value;
}
},
set: function setterHandler(newVal) {
if (getter && !setter)
return;
var value = getter ? getter.call(target) : val;
// If the key is equal to RefKey, skip the unwrap logic
// If and only if "value" is ref and "newVal" is not a ref,
// the assignment should be proxied to "value" ref.
if (key !== RefKey && isRef(value) && !isRef(newVal)) {
value.value = newVal;
}
else if (setter) {
setter.call(target, newVal);
}
else {
val = newVal;
}
setupAccessControl(newVal);
},
});
}
function observe(obj) {
var Vue = getCurrentVue();
var observed;
if (Vue.observable) {
observed = Vue.observable(obj);
}
else {
var vm = defineComponentInstance(Vue, {
data: {
$$state: obj,
},
});
observed = vm._data.$$state;
}
return observed;
}
function shallowReactive(obj) {
var e_1, _a;
if ( !obj) {
warn('"shallowReactive()" is called without provide an "object".');
// @ts-ignore
return;
}
if (!isPlainObject(obj) ||
isReactive(obj) ||
isRaw(obj) ||
!Object.isExtensible(obj)) {
return obj;
}
var observed = observe({});
markReactive(observed, true);
setupAccessControl(observed);
var ob = observed.__ob__;
var _loop_1 = function (key) {
var val = obj[key];
var getter;
var setter;
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property) {
if (property.configurable === false) {
return "continue";
}
getter = property.get;
setter = property.set;
if ((!getter || setter) /* not only have getter */ &&
arguments_1.length === 2) {
val = obj[key];
}
}
// setupAccessControl(val);
Object.defineProperty(observed, key, {
enumerable: true,
configurable: true,
get: function getterHandler() {
var value = getter ? getter.call(obj) : val;
ob.dep.depend();
return value;
},
set: function setterHandler(newVal) {
if (getter && !setter)
return;
if (setter) {
setter.call(obj, newVal);
}
else {
val = newVal;
}
ob.dep.notify();
},
});
};
var arguments_1 = arguments;
try {
for (var _b = __values(Object.keys(obj)), _c = _b.next(); !_c.done; _c = _b.next()) {
var key = _c.value;
_loop_1(key);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return observed;
}
function markReactive(target, shallow) {
if (shallow === void 0) { shallow = false; }
if (!isPlainObject(target) ||
isRaw(target) ||
Array.isArray(target) ||
isRef(target) ||
isComponentInstance(target)) {
return;
}
if (hasOwn(target, ReactiveIdentifierKey) &&
target[ReactiveIdentifierKey] === ReactiveIdentifier) {
return;
}
if (Object.isExtensible(target)) {
def(target, ReactiveIdentifierKey, ReactiveIdentifier);
}
if (shallow) {
return;
}
var keys = Object.keys(target);
for (var i = 0; i < keys.length; i++) {
markReactive(target[keys[i]]);
}
}
/**
* Make obj reactivity
*/
function reactive(obj) {
if ( !obj) {
warn('"reactive()" is called without provide an "object".');
// @ts-ignore
return;
}
if (!isPlainObject(obj) ||
isReactive(obj) ||
isRaw(obj) ||
!Object.isExtensible(obj)) {
return obj;
}
var observed = observe(obj);
// def(obj, ReactiveIdentifierKey, ReactiveIdentifier);
markReactive(obj);
setupAccessControl(observed);
return observed;
}
/**
* Make sure obj can't be a reactive
*/
function markRaw(obj) {
if (!isPlainObject(obj) || !Object.isExtensible(obj)) {
return obj;
}
// set the vue observable flag at obj
def(obj, '__ob__', observe({}).__ob__);
// mark as Raw
def(obj, RawIdentifierKey, RawIdentifier);
return obj;
}
function toRaw(observed) {
if (isRaw(observe) || !Object.isExtensible(observed)) {
return observed;
}
return observed.__ob__.value || observed;
}
/**
* Helper that recursively merges two data objects together.
*/
function mergeData(from, to) {
if (!from)
return to;
if (!to)
return from;
var key;
var toVal;
var fromVal;
var keys = hasSymbol ? Reflect.ownKeys(from) : Object.keys(from);
for (var i = 0; i < keys.length; i++) {
key = keys[i];
// in case the object is already observed...
if (key === '__ob__')
continue;
toVal = to[key];
fromVal = from[key];
if (!hasOwn(to, key)) {
to[key] = fromVal;
}
else if (toVal !== fromVal &&
isPlainObject(toVal) &&
!isRef(toVal) &&
isPlainObject(fromVal) &&
!isRef(fromVal)) {
mergeData(fromVal, toVal);
}
}
return to;
}
function install(Vue, _install) {
if (currentVue && currentVue === Vue) {
{
assert(false, 'already installed. Vue.use(VueCompositionAPI) should be called only once.');
}
return;
}
{
if (!Vue.version.startsWith('2.')) {
assert(false, "@vue/composition-api only works with Vue 2, v" + Vue.version + " found.");
}
}
Vue.config.optionMergeStrategies.setup = function (parent, child) {
return function mergedSetupFn(props, context) {
return mergeData(typeof parent === 'function' ? parent(props, context) || {} : undefined, typeof child === 'function' ? child(props, context) || {} : undefined);
};
};
setCurrentVue(Vue);
_install(Vue);
}
function isUndef(v) {
return v === undefined || v === null;
}
function isPrimitive(value) {
return (typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean');
}
function isValidArrayIndex(val) {
var n = parseFloat(String(val));
return n >= 0 && Math.floor(n) === n && isFinite(val);
}
/**
* Set a property on an object. Adds the new property, triggers change
* notification and intercept it's subsequent access if the property doesn't
* already exist.
*/
function set(target, key, val) {
var Vue = getCurrentVue();
var _a = Vue.util, warn = _a.warn, defineReactive = _a.defineReactive;
if ( (isUndef(target) || isPrimitive(target))) {
warn("Cannot set reactive property on undefined, null, or primitive value: " + target);
}
if (isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key);
target.splice(key, 1, val);
return val;
}
if (key in target && !(key in Object.prototype)) {
target[key] = val;
return val;
}
var ob = target.__ob__;
if (target._isVue || (ob && ob.vmCount)) {
warn('Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.');
return val;
}
if (!ob) {
target[key] = val;
return val;
}
defineReactive(ob.value, key, val);
// IMPORTANT: define access control before trigger watcher
defineAccessControl(target, key, val);
markReactive(ob.value[key]);
ob.dep.notify();
return val;
}
function set$1(vm, key, value) {
var state = (vm.__secret_vfa_state__ = vm.__secret_vfa_state__ || {});
state[key] = value;
}
function get(vm, key) {
return (vm.__secret_vfa_state__ || {})[key];
}
var vmStateManager = {
set: set$1,
get: get,
};
/**
* Helper that recursively merges two data objects together.
*/
function mergeData(from, to) {
if (!from)
return to;
if (!to)
return from;
var key;
var toVal;
var fromVal;
var keys = hasSymbol ? Reflect.ownKeys(from) : Object.keys(from);
for (var i = 0; i < keys.length; i++) {
key = keys[i];
// in case the object is already observed...
if (key === '__ob__')
continue;
toVal = to[key];
fromVal = from[key];
if (!hasOwn(to, key)) {
to[key] = fromVal;
}
else if (toVal !== fromVal &&
isPlainObject(toVal) &&
!isRef(toVal) &&
isPlainObject(fromVal) &&
!isRef(fromVal)) {
mergeData(fromVal, toVal);
}
}
return to;
}
function install(Vue, _install) {
if (currentVue && currentVue === Vue) {
{
assert(false, 'already installed. Vue.use(plugin) should be called only once');
}
return;
}
Vue.config.optionMergeStrategies.setup = function (parent, child) {
return function mergedSetupFn(props, context) {
return mergeData(typeof parent === 'function' ? parent(props, context) || {} : undefined, typeof child === 'function' ? child(props, context) || {} : undefined);
};
};
setCurrentVue(Vue);
_install(Vue);
}
function unwrapRefProxy(value, map) {
var e_1, _a;
if (map === void 0) { map = new WeakMap(); }
if (map.has(value)) {
return map.get(value);
}
if (isFunction(value) ||
isArray(value) ||
isReactive(value) ||
!isPlainObject(value) ||
!Object.isExtensible(value) ||
isRef(value) ||
isRaw(value)) {
return value;
}
var obj = {};
map.set(value, obj);
// copy symbols over
Object.getOwnPropertySymbols(value).forEach(function (s) { return (obj[s] = value[s]); });
// copy __ob__
if (value.__ob__) {
Object.defineProperty(obj, '__ob__', value.__ob__);
}
var _loop_1 = function (k) {
var r = value[k];
// don't process on falsy or raw
if (!r || isRaw(r)) {
obj[k] = r;
}
// if is a ref, create a proxy to retrieve the value,
else if (isRef(r)) {
var set = function (v) { return (r.value = v); };
var get = function () { return r.value; };
proxy(obj, k, { get: get, set: set });
}
else {
obj[k] = unwrapRefProxy(r, map);
}
};
try {
for (var _b = __values(Object.keys(value)), _c = _b.next(); !_c.done; _c = _b.next()) {
var k = _c.value;
_loop_1(k);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return obj;
}
function set$1(vm, key, value) {
var state = (vm.__secret_vfa_state__ = vm.__secret_vfa_state__ || {});
state[key] = value;
}
function get(vm, key) {
return (vm.__secret_vfa_state__ || {})[key];
}
var vmStateManager = {
set: set$1,
get: get,
};
function asVmProperty(vm, propName, propValue) {
var props = vm.$options.props;
if (!(propName in vm) && !(props && hasOwn(props, propName))) {
proxy(vm, propName, {
get: function () { return propValue.value; },
set: function (val) {
propValue.value = val;
},
});
{
// expose binding to Vue Devtool as a data property
// delay this until state has been resolved to prevent repeated works
vm.$nextTick(function () {
proxy(vm._data, propName, {
get: function () { return propValue.value; },
set: function (val) {
propValue.value = val;
},
});
});
}
}
else {
if (props && hasOwn(props, propName)) {
warn("The setup binding property \"" + propName + "\" is already declared as a prop.", vm);
}
else {
warn("The setup binding property \"" + propName + "\" is already declared.", vm);
}
}
}
function updateTemplateRef(vm) {
var rawBindings = vmStateManager.get(vm, 'rawBindings') || {};
if (!rawBindings || !Object.keys(rawBindings).length)
return;
var refs = vm.$refs;
var oldRefKeys = vmStateManager.get(vm, 'refs') || [];
for (var index = 0; index < oldRefKeys.length; index++) {
var key = oldRefKeys[index];
var setupValue = rawBindings[key];
if (!refs[key] && setupValue && isRef(setupValue)) {
setupValue.value = null;
}
}
var newKeys = Object.keys(refs);
var validNewKeys = [];
for (var index = 0; index < newKeys.length; index++) {
var key = newKeys[index];
var setupValue = rawBindings[key];
if (refs[key] && setupValue && isRef(setupValue)) {
setupValue.value = refs[key];
validNewKeys.push(key);
}
}
vmStateManager.set(vm, 'refs', validNewKeys);
}
function resolveScopedSlots(vm, slotsProxy) {
var parentVode = vm.$options._parentVnode;
if (!parentVode)
return;
var prevSlots = vmStateManager.get(vm, 'slots') || [];
var curSlots = resolveSlots(parentVode.data.scopedSlots, vm.$slots);
// remove staled slots
for (var index = 0; index < prevSlots.length; index++) {
var key = prevSlots[index];
if (!curSlots[key]) {
delete slotsProxy[key];
}
}
// proxy fresh slots
var slotNames = Object.keys(curSlots);
for (var index = 0; index < slotNames.length; index++) {
var key = slotNames[index];
if (!slotsProxy[key]) {
slotsProxy[key] = createSlotProxy(vm, key);
}
}
vmStateManager.set(vm, 'slots', slotNames);
}
function activateCurrentInstance(vm, fn, onError) {
var preVm = getCurrentInstance();
setCurrentVM(vm);
try {
return fn(vm);
}
catch (err) {
if (onError) {
onError(err);
}
else {
throw err;
}
}
finally {
setCurrentVM(preVm);
}
}
function mixin(Vue) {
Vue.mixin({
beforeCreate: functionApiInit,
mounted: function () {
updateTemplateRef(this);
},
updated: function () {
updateTemplateRef(this);
},
});
/**
* Vuex init hook, injected into each instances init hooks list.
*/
function functionApiInit() {
var vm = this;
var $options = vm.$options;
var setup = $options.setup, render = $options.render;
if (render) {
// keep currentInstance accessible for createElement
$options.render = function () {
var _this = this;
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return activateCurrentInstance(vm, function () { return render.apply(_this, args); });
};
}
if (!setup) {
return;
}
if (typeof setup !== 'function') {
{
warn('The "setup" option should be a function that returns a object in component definitions.', vm);
}
return;
}
var data = $options.data;
// wrapper the data option, so we can invoke setup before data get resolved
$options.data = function wrappedData() {
initSetup(vm, vm.$props);
return typeof data === 'function'
? data.call(vm, vm)
: data || {};
};
}
function initSetup(vm, props) {
if (props === void 0) { props = {}; }
var setup = vm.$options.setup;
var ctx = createSetupContext(vm);
// mark props as reactive
markReactive(props);
// resolve scopedSlots and slots to functions
resolveScopedSlots(vm, ctx.slots);
var binding;
activateCurrentInstance(vm, function () {
binding = setup(props, ctx);
});
if (!binding)
return;
if (isFunction(binding)) {
// keep typescript happy with the binding type.
var bindingFunc_1 = binding;
// keep currentInstance accessible for createElement
vm.$options.render = function () {
resolveScopedSlots(vm, ctx.slots);
return activateCurrentInstance(vm, function () { return bindingFunc_1(); });
};
return;
}
if (isPlainObject(binding)) {
var bindingObj_1 = binding;
vmStateManager.set(vm, 'rawBindings', binding);
Object.keys(binding).forEach(function (name) {
var bindingValue = bindingObj_1[name];
// only make primitive value reactive
if (!isRef(bindingValue)) {
if (isReactive(bindingValue)) {
bindingValue = ref(bindingValue);
}
else {
// bind function to the vm, this will make `this` = vm
if (isFunction(bindingValue)) {
bindingValue = bindingValue.bind(vm);
}
// unwrap all ref properties
var unwrapped = unwrapRefProxy(bindingValue);
// mark the object as reactive
markReactive(unwrapped);
// a non-reactive should not don't get reactivity
bindingValue = ref(markRaw(unwrapped));
}
}
asVmProperty(vm, name, bindingValue);
});
return;
}
{
assert(false, "\"setup\" must return a \"Object\" or a \"Function\", got \"" + Object.prototype.toString
.call(binding)
.slice(8, -1) + "\"");
}
}
function createSetupContext(vm) {
var ctx = {
slots: {},
};
var props = [
'root',
'parent',
'refs',
'attrs',
'listeners',
'isServer',
'ssrContext',
];
var methodReturnVoid = ['emit'];
props.forEach(function (key) {
var _a;
var targetKey;
var srcKey;
if (Array.isArray(key)) {
_a = __read(key, 2), targetKey = _a[0], srcKey = _a[1];
}
else {
targetKey = srcKey = key;
}
srcKey = "$" + srcKey;
proxy(ctx, targetKey, {
get: function () { return vm[srcKey]; },
set: function () {
warn("Cannot assign to '" + targetKey + "' because it is a read-only property", vm);
},
});
});
methodReturnVoid.forEach(function (key) {
var srcKey = "$" + key;
proxy(ctx, key, {
get: function () {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var fn = vm[srcKey];
fn.apply(vm, args);
};
},
});
});
return ctx;
}
}
function unwrapRefProxy(value, map) {
var e_1, _a;
if (map === void 0) { map = new WeakMap(); }
if (map.has(value)) {
return map.get(value);
}
if (isFunction(value) ||
isArray(value) ||
isReactive(value) ||
!isPlainObject(value) ||
!Object.isExtensible(value) ||
isRef(value) ||
isRaw(value)) {
return value;
}
var obj = {};
map.set(value, obj);
// copy symbols over
Object.getOwnPropertySymbols(value).forEach(function (s) { return (obj[s] = value[s]); });
var _loop_1 = function (k) {
var r = value[k];
// don't process on falsy or raw
if (!r || isRaw(r)) {
obj[k] = r;
}
// if is a ref, create a proxy to retrieve the value,
else if (isRef(r)) {
var set = function (v) { return (r.value = v); };
var get = function () { return r.value; };
proxy(obj, k, { get: get, set: set });
}
else {
obj[k] = unwrapRefProxy(r, map);
}
};
try {
for (var _b = __values(Object.keys(value)), _c = _b.next(); !_c.done; _c = _b.next()) {
var k = _c.value;
_loop_1(k);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return obj;
}
function createApp(rootComponent, rootProps) {
if (rootProps === void 0) { rootProps = undefined; }
var V = getCurrentVue();
var mountedVM = undefined;
return {
config: V.config,
use: V.use.bind(V),
mixin: V.mixin.bind(V),
component: V.component.bind(V),
directive: V.directive.bind(V),
mount: function (el, hydrating) {
if (!mountedVM) {
mountedVM = new V(__assign({ propsData: rootProps }, rootComponent));
mountedVM.$mount(el, hydrating);
return mountedVM;
}
else {
{
warn("App has already been mounted.\n" +
"If you want to remount the same app, move your app creation logic " +
"into a factory function and create fresh app instances for each " +
"mount - e.g. `const createMyApp = () => createApp(App)`");
}
return mountedVM;
}
},
unmount: function () {
if (mountedVM) {
mountedVM.$destroy();
mountedVM = undefined;
}
else {
warn("Cannot unmount an app that is not mounted.");
}
},
};
}
function asVmProperty(vm, propName, propValue) {
var props = vm.$options.props;
if (!(propName in vm) && !(props && hasOwn(props, propName))) {
proxy(vm, propName, {
get: function () { return propValue.value; },
set: function (val) {
propValue.value = val;
},
});
{
// expose binding to Vue Devtool as a data property
// delay this until state has been resolved to prevent repeated works
vm.$nextTick(function () {
proxy(vm._data, propName, {
get: function () { return propValue.value; },
set: function (val) {
propValue.value = val;
},
});
});
}
}
else {
if (props && hasOwn(props, propName)) {
warn("The setup binding property \"" + propName + "\" is already declared as a prop.", vm);
}
else {
warn("The setup binding property \"" + propName + "\" is already declared.", vm);
}
}
}
function updateTemplateRef(vm) {
var rawBindings = vmStateManager.get(vm, 'rawBindings') || {};
if (!rawBindings || !Object.keys(rawBindings).length)
return;
var refs = vm.$refs;
var oldRefKeys = vmStateManager.get(vm, 'refs') || [];
for (var index = 0; index < oldRefKeys.length; index++) {
var key = oldRefKeys[index];
var setupValue = rawBindings[key];
if (!refs[key] && setupValue && isRef(setupValue)) {
setupValue.value = null;
}
}
var newKeys = Object.keys(refs);
var validNewKeys = [];
for (var index = 0; index < newKeys.length; index++) {
var key = newKeys[index];
var setupValue = rawBindings[key];
if (refs[key] && setupValue && isRef(setupValue)) {
setupValue.value = refs[key];
validNewKeys.push(key);
}
}
vmStateManager.set(vm, 'refs', validNewKeys);
}
function resolveScopedSlots(vm, slotsProxy) {
var parentVode = vm.$options._parentVnode;
if (!parentVode)
return;
var prevSlots = vmStateManager.get(vm, 'slots') || [];
var curSlots = resolveSlots(parentVode.data.scopedSlots, vm.$slots);
// remove staled slots
for (var index = 0; index < prevSlots.length; index++) {
var key = prevSlots[index];
if (!curSlots[key]) {
delete slotsProxy[key];
}
}
// proxy fresh slots
var slotNames = Object.keys(curSlots);
for (var index = 0; index < slotNames.length; index++) {
var key = slotNames[index];
if (!slotsProxy[key]) {
slotsProxy[key] = createSlotProxy(vm, key);
}
}
vmStateManager.set(vm, 'slots', slotNames);
}
function activateCurrentInstance(vm, fn, onError) {
var preVm = getCurrentVM();
setCurrentVM(vm);
try {
return fn(vm);
}
catch (err) {
if (onError) {
onError(err);
}
else {
throw err;
}
}
finally {
setCurrentVM(preVm);
}
}
function mixin(Vue) {
Vue.mixin({
beforeCreate: functionApiInit,
mounted: function () {
updateTemplateRef(this);
},
updated: function () {
updateTemplateRef(this);
},
});
/**
* Vuex init hook, injected into each instances init hooks list.
*/
function functionApiInit() {
var vm = this;
var $options = vm.$options;
var setup = $options.setup, render = $options.render;
if (render) {
// keep currentInstance accessible for createElement
$options.render = function () {
var _this = this;
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return activateCurrentInstance(vm, function () { return render.apply(_this, args); });
};
}
if (!setup) {
return;
}
if (typeof setup !== 'function') {
{
warn('The "setup" option should be a function that returns a object in component definitions.', vm);
}
return;
}
var data = $options.data;
// wrapper the data option, so we can invoke setup before data get resolved
$options.data = function wrappedData() {
initSetup(vm, vm.$props);
return typeof data === 'function'
? data.call(vm, vm)
: data || {};
};
}
function initSetup(vm, props) {
if (props === void 0) { props = {}; }
var setup = vm.$options.setup;
var ctx = createSetupContext(vm);
// mark props as reactive
markReactive(props);
// resolve scopedSlots and slots to functions
resolveScopedSlots(vm, ctx.slots);
var binding;
activateCurrentInstance(vm, function () {
binding = setup(props, ctx);
});
if (!binding)
return;
if (isFunction(binding)) {
// keep typescript happy with the binding type.
var bindingFunc_1 = binding;
// keep currentInstance accessible for createElement
vm.$options.render = function () {
resolveScopedSlots(vm, ctx.slots);
return activateCurrentInstance(vm, function () { return bindingFunc_1(); });
};
return;
}
if (isPlainObject(binding)) {
var bindingObj_1 = binding;
vmStateManager.set(vm, 'rawBindings', binding);
Object.keys(binding).forEach(function (name) {
var bindingValue = bindingObj_1[name];
// only make primitive value reactive
if (!isRef(bindingValue)) {
if (isReactive(bindingValue)) {
bindingValue = ref(bindingValue);
}
else {
// bind function to the vm, this will make `this` = vm
if (isFunction(bindingValue)) {
bindingValue = bindingValue.bind(vm);
}
// unwrap all ref properties
var unwrapped = unwrapRefProxy(bindingValue);
// mark the object as reactive
markReactive(unwrapped);
// a non-reactive should not don't get reactivity
bindingValue = ref(markRaw(unwrapped));
}
}
asVmProperty(vm, name, bindingValue);
});
return;
}
{
assert(false, "\"setup\" must return a \"Object\" or a \"Function\", got \"" + Object.prototype.toString
.call(binding)
.slice(8, -1) + "\"");
}
}
function createSetupContext(vm) {
var ctx = {
slots: {},
};
var props = [
'root',
'parent',
'refs',
'attrs',
'listeners',
'isServer',
'ssrContext',
];
var methodReturnVoid = ['emit'];
props.forEach(function (key) {
var _a;
var targetKey;
var srcKey;
if (Array.isArray(key)) {
_a = __read(key, 2), targetKey = _a[0], srcKey = _a[1];
}
else {
targetKey = srcKey = key;
}
srcKey = "$" + srcKey;
proxy(ctx, targetKey, {
get: function () { return vm[srcKey]; },
set: function () {
warn("Cannot assign to '" + targetKey + "' because it is a read-only property", vm);
},
});
});
methodReturnVoid.forEach(function (key) {
var srcKey = "$" + key;
proxy(ctx, key, {
get: function () {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var fn = vm[srcKey];
fn.apply(vm, args);
};
},
});
});
return ctx;
}
}
var nextTick = function nextTick() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return currentVue === null || currentVue === void 0 ? void 0 : currentVue.nextTick.apply(this, args);
};
var nextTick = function nextTick() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return currentVue === null || currentVue === void 0 ? void 0 : currentVue.nextTick.bind(this, args);
};
var fallbackCreateElement;
var createElement = function createElement() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (!currentVM) {
warn('`createElement()` has been called outside of render function.');
if (!fallbackCreateElement) {
fallbackCreateElement = defineComponentInstance(getCurrentVue())
.$createElement;
}
return fallbackCreateElement.apply(fallbackCreateElement, args);
}
return currentVM.$createElement.apply(currentVM, args);
};
var fallbackCreateElement;
var createElement = function createElement() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (!currentVM) {
warn('`createElement()` has been called outside of render function.');
if (!fallbackCreateElement) {
fallbackCreateElement = defineComponentInstance(getCurrentVue())
.$createElement;
}
return fallbackCreateElement.apply(fallbackCreateElement, args);
}
return currentVM.$createElement.apply(currentVM, args);
};
// implementation, close to no-op
function defineComponent(options) {
return options;
}
// implementation, close to no-op
function defineComponent(options) {
return options;
}
var createComponent = (function (options) {
{
Vue.util.warn('`createComponent` has been renamed to `defineComponent`.');
}
return defineComponent(options);
});
var genName = function (name) { return "on" + (name[0].toUpperCase() + name.slice(1)); };
function createLifeCycle(lifeCyclehook) {
return function (callback) {
var vm = currentVMInFn(genName(lifeCyclehook));
if (vm) {
injectHookOption(getCurrentVue(), vm, lifeCyclehook, callback);
}
};
}
function injectHookOption(Vue, vm, hook, val) {
var options = vm.$options;
var mergeFn = Vue.config.optionMergeStrategies[hook];
options[hook] = mergeFn(options[hook], wrapHookCall(vm, val));
}
function wrapHookCall(vm, fn) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var preVm = getCurrentInstance();
setCurrentVM(vm);
try {
return fn.apply(void 0, __spread(args));
}
finally {
setCurrentVM(preVm);
}
};
}
// export const onCreated = createLifeCycle('created');
var onBeforeMount = createLifeCycle('beforeMount');
var onMounted = createLifeCycle('mounted');
var onBeforeUpdate = createLifeCycle('beforeUpdate');
var onUpdated = createLifeCycle('updated');
var onBeforeUnmount = createLifeCycle('beforeDestroy');
var onUnmounted = createLifeCycle('destroyed');
var onErrorCaptured = createLifeCycle('errorCaptured');
var onActivated = createLifeCycle('activated');
var onDeactivated = createLifeCycle('deactivated');
var onServerPrefetch = createLifeCycle('serverPrefetch');
var genName = function (name) { return "on" + (name[0].toUpperCase() + name.slice(1)); };
function createLifeCycle(lifeCyclehook) {
return function (callback) {
var vm = currentVMInFn(genName(lifeCyclehook));
if (vm) {
injectHookOption(getCurrentVue(), vm, lifeCyclehook, callback);
}
};
}
function injectHookOption(Vue, vm, hook, val) {
var options = vm.$options;
var mergeFn = Vue.config.optionMergeStrategies[hook];
options[hook] = mergeFn(options[hook], wrapHookCall(vm, val));
}
function wrapHookCall(vm, fn) {
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var preVm = getCurrentVM();
setCurrentVM(vm);
try {
return fn.apply(void 0, __spread(args));
}
finally {
setCurrentVM(preVm);
}
};
}
// export const onCreated = createLifeCycle('created');
var onBeforeMount = createLifeCycle('beforeMount');
var onMounted = createLifeCycle('mounted');
var onBeforeUpdate = createLifeCycle('beforeUpdate');
var onUpdated = createLifeCycle('updated');
var onBeforeUnmount = createLifeCycle('beforeDestroy');
var onUnmounted = createLifeCycle('destroyed');
var onErrorCaptured = createLifeCycle('errorCaptured');
var onActivated = createLifeCycle('activated');
var onDeactivated = createLifeCycle('deactivated');
var onServerPrefetch = createLifeCycle('serverPrefetch');
var fallbackVM;
function flushPreQueue() {
flushQueue(this, WatcherPreFlushQueueKey);
}
function flushPostQueue() {
flushQueue(this, WatcherPostFlushQueueKey);
}
function hasWatchEnv(vm) {
return vm[WatcherPreFlushQueueKey] !== undefined;
}
function installWatchEnv(vm) {
vm[WatcherPreFlushQueueKey] = [];
vm[WatcherPostFlushQueueKey] = [];
vm.$on('hook:beforeUpdate', flushPreQueue);
vm.$on('hook:updated', flushPostQueue);
}
function getWatcherOption(options) {
return __assign({
immediate: false,
deep: false,
flush: 'post',
}, options);
}
function getWatchEffectOption(options) {
return __assign({
immediate: true,
deep: false,
flush: 'post',
}, options);
}
function getWatcherVM() {
var vm = getCurrentInstance();
if (!vm) {
if (!fallbackVM) {
fallbackVM = defineComponentInstance(getCurrentVue());
}
vm = fallbackVM;
}
else if (!hasWatchEnv(vm)) {
installWatchEnv(vm);
}
return vm;
}
function flushQueue(vm, key) {
var queue = vm[key];
for (var index = 0; index < queue.length; index++) {
queue[index]();
}
queue.length = 0;
}
function queueFlushJob(vm, fn, mode) {
// flush all when beforeUpdate and updated are not fired
var fallbackFlush = function () {
vm.$nextTick(function () {
if (vm[WatcherPreFlushQueueKey].length) {
flushQueue(vm, WatcherPreFlushQueueKey);
}
if (vm[WatcherPostFlushQueueKey].length) {
flushQueue(vm, WatcherPostFlushQueueKey);
}
});
};
switch (mode) {
case 'pre':
fallbackFlush();
vm[WatcherPreFlushQueueKey].push(fn);
break;
case 'post':
fallbackFlush();
vm[WatcherPostFlushQueueKey].push(fn);
break;
default:
assert(false, "flush must be one of [\"post\", \"pre\", \"sync\"], but got " + mode);
break;
}
}
function createVueWatcher(vm, getter, callback, options) {
var index = vm._watchers.length;
// @ts-ignore: use undocumented options
vm.$watch(getter, callback, {
immediate: options.immediateInvokeCallback,
deep: options.deep,
lazy: options.noRun,
sync: options.sync,
before: options.before,
});
return vm._watchers[index];
}
// We have to monkeypatch the teardown function so Vue will run
// runCleanup() when it tears down the watcher on unmmount.
function patchWatcherTeardown(watcher, runCleanup) {
var _teardown = watcher.teardown;
watcher.teardown = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_teardown.apply(watcher, args);
runCleanup();
};
}
function createWatcher(vm, source, cb, options) {
var flushMode = options.flush;
var isSync = flushMode === 'sync';
var cleanup;
var registerCleanup = function (fn) {
cleanup = function () {
try {
fn();
}
catch (error) {
logError(error, vm, 'onCleanup()');
}
};
};
// cleanup before running getter again
var runCleanup = function () {
if (cleanup) {
cleanup();
cleanup = null;
}
};
var createScheduler = function (fn) {
if (isSync ||
/* without a current active instance, ignore pre|post mode */ vm ===
fallbackVM) {
return fn;
}
return (function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return queueFlushJob(vm, function () {
fn.apply(void 0, __spread(args));
}, flushMode);
});
};
// effect watch
if (cb === null) {
var running_1 = false;
var getter_1 = function () {
// preventing the watch callback being call in the same execution
if (running_1) {
return;
}
try {
running_1 = true;
source(registerCleanup);
}
finally {
running_1 = false;
}
};
var watcher_1 = createVueWatcher(vm, getter_1, noopFn, {
deep: options.deep || false,
sync: isSync,
before: runCleanup,
});
patchWatcherTeardown(watcher_1, runCleanup);
// enable the watcher update
watcher_1.lazy = false;
var originGet = watcher_1.get.bind(watcher_1);
// always run watchEffect
watcher_1.get = createScheduler(originGet);
return function () {
watcher_1.teardown();
};
}
var deep = options.deep;
var getter;
if (Array.isArray(source)) {
getter = function () { return source.map(function (s) { return (isRef(s) ? s.value : s()); }); };
}
else if (isRef(source)) {
getter = function () { return source.value; };
}
else if (isReactive(source)) {
getter = function () { return source; };
deep = true;
}
else if (isFunction(source)) {
getter = source;
}
else {
getter = noopFn;
warn("Invalid watch source: " + JSON.stringify(source) + ".\n A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.", vm);
}
var applyCb = function (n, o) {
// cleanup before running cb again
runCleanup();
cb(n, o, registerCleanup);
};
var callback = createScheduler(applyCb);
if (options.immediate) {
var originalCallbck_1 = callback;
// `shiftCallback` is used to handle the first sync effect run.
// The subsequent callbacks will redirect to `callback`.
var shiftCallback_1 = function (n, o) {
shiftCallback_1 = originalCallbck_1;
applyCb(n, o);
};
callback = function (n, o) {
shiftCallback_1(n, o);
};
}
// @ts-ignore: use undocumented option "sync"
var stop = vm.$watch(getter, callback, {
immediate: options.immediate,
deep: deep,
sync: isSync,
});
// Once again, we have to hack the watcher for proper teardown
var watcher = vm._watchers[vm._watchers.length - 1];
patchWatcherTeardown(watcher, runCleanup);
return function () {
stop();
};
}
function watchEffect(effect, options) {
var opts = getWatchEffectOption(options);
var vm = getWatcherVM();
return createWatcher(vm, effect, null, opts);
}
// implementation
function watch(source, cb, options) {
var callback = null;
if (typeof cb === 'function') {
// source watch
callback = cb;
}
else {
// effect watch
{
warn("`watch(fn, options?)` signature has been moved to a separate API. " +
"Use `watchEffect(fn, options?)` instead. `watch` now only " +
"supports `watch(source, cb, options?) signature.");
}
options = cb;
callback = null;
}
var opts = getWatcherOption(options);
var vm = getWatcherVM();
return createWatcher(vm, source, callback, opts);
}
var fallbackVM;
function flushPreQueue() {
flushQueue(this, WatcherPreFlushQueueKey);
}
function flushPostQueue() {
flushQueue(this, WatcherPostFlushQueueKey);
}
function hasWatchEnv(vm) {
return vm[WatcherPreFlushQueueKey] !== undefined;
}
function installWatchEnv(vm) {
vm[WatcherPreFlushQueueKey] = [];
vm[WatcherPostFlushQueueKey] = [];
vm.$on('hook:beforeUpdate', flushPreQueue);
vm.$on('hook:updated', flushPostQueue);
}
function getWatcherOption(options) {
return __assign({
immediate: false,
deep: false,
flush: 'post',
}, options);
}
function getWatchEffectOption(options) {
return __assign({
immediate: true,
deep: false,
flush: 'post',
}, options);
}
function getWatcherVM() {
var vm = getCurrentVM();
if (!vm) {
if (!fallbackVM) {
fallbackVM = defineComponentInstance(getCurrentVue());
}
vm = fallbackVM;
}
else if (!hasWatchEnv(vm)) {
installWatchEnv(vm);
}
return vm;
}
function flushQueue(vm, key) {
var queue = vm[key];
for (var index = 0; index < queue.length; index++) {
queue[index]();
}
queue.length = 0;
}
function queueFlushJob(vm, fn, mode) {
// flush all when beforeUpdate and updated are not fired
var fallbackFlush = function () {
vm.$nextTick(function () {
if (vm[WatcherPreFlushQueueKey].length) {
flushQueue(vm, WatcherPreFlushQueueKey);
}
if (vm[WatcherPostFlushQueueKey].length) {
flushQueue(vm, WatcherPostFlushQueueKey);
}
});
};
switch (mode) {
case 'pre':
fallbackFlush();
vm[WatcherPreFlushQueueKey].push(fn);
break;
case 'post':
fallbackFlush();
vm[WatcherPostFlushQueueKey].push(fn);
break;
default:
assert(false, "flush must be one of [\"post\", \"pre\", \"sync\"], but got " + mode);
break;
}
}
function createVueWatcher(vm, getter, callback, options) {
var index = vm._watchers.length;
// @ts-ignore: use undocumented options
vm.$watch(getter, callback, {
immediate: options.immediateInvokeCallback,
deep: options.deep,
lazy: options.noRun,
sync: options.sync,
before: options.before,
});
return vm._watchers[index];
}
// We have to monkeypatch the teardown function so Vue will run
// runCleanup() when it tears down the watcher on unmmount.
function patchWatcherTeardown(watcher, runCleanup) {
var _teardown = watcher.teardown;
watcher.teardown = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_teardown.apply(watcher, args);
runCleanup();
};
}
function createWatcher(vm, source, cb, options) {
var flushMode = options.flush;
var isSync = flushMode === 'sync';
var cleanup;
var registerCleanup = function (fn) {
cleanup = function () {
try {
fn();
}
catch (error) {
logError(error, vm, 'onCleanup()');
}
};
};
// cleanup before running getter again
var runCleanup = function () {
if (cleanup) {
cleanup();
cleanup = null;
}
};
var createScheduler = function (fn) {
if (isSync ||
/* without a current active instance, ignore pre|post mode */ vm ===
fallbackVM) {
return fn;
}
return (function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return queueFlushJob(vm, function () {
fn.apply(void 0, __spread(args));
}, flushMode);
});
};
// effect watch
if (cb === null) {
var running_1 = false;
var getter_1 = function () {
// preventing the watch callback being call in the same execution
if (running_1) {
return;
}
try {
running_1 = true;
source(registerCleanup);
}
finally {
running_1 = false;
}
};
var watcher_1 = createVueWatcher(vm, getter_1, noopFn, {
deep: options.deep || false,
sync: isSync,
before: runCleanup,
});
patchWatcherTeardown(watcher_1, runCleanup);
// enable the watcher update
watcher_1.lazy = false;
var originGet = watcher_1.get.bind(watcher_1);
// always run watchEffect
watcher_1.get = createScheduler(originGet);
return function () {
watcher_1.teardown();
};
}
var deep = options.deep;
var getter;
if (Array.isArray(source)) {
getter = function () { return source.map(function (s) { return (isRef(s) ? s.value : s()); }); };
}
else if (isRef(source)) {
getter = function () { return source.value; };
}
else if (isReactive(source)) {
getter = function () { return source; };
deep = true;
}
else if (isFunction(source)) {
getter = source;
}
else {
getter = noopFn;
warn("Invalid watch source: " + JSON.stringify(source) + ".\n A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.", vm);
}
var applyCb = function (n, o) {
// cleanup before running cb again
runCleanup();
cb(n, o, registerCleanup);
};
var callback = createScheduler(applyCb);
if (options.immediate) {
var originalCallbck_1 = callback;
// `shiftCallback` is used to handle the first sync effect run.
// The subsequent callbacks will redirect to `callback`.
var shiftCallback_1 = function (n, o) {
shiftCallback_1 = originalCallbck_1;
applyCb(n, o);
};
callback = function (n, o) {
shiftCallback_1(n, o);
};
}
// @ts-ignore: use undocumented option "sync"
var stop = vm.$watch(getter, callback, {
immediate: options.immediate,
deep: deep,
sync: isSync,
});
// Once again, we have to hack the watcher for proper teardown
var watcher = vm._watchers[vm._watchers.length - 1];
patchWatcherTeardown(watcher, runCleanup);
return function () {
stop();
};
}
function watchEffect(effect, options) {
var opts = getWatchEffectOption(options);
var vm = getWatcherVM();
return createWatcher(vm, effect, null, opts);
}
// implementation
function watch(source, cb, options) {
var callback = null;
if (typeof cb === 'function') {
// source watch
callback = cb;
}
else {
// effect watch
{
warn("`watch(fn, options?)` signature has been moved to a separate API. " +
"Use `watchEffect(fn, options?)` instead. `watch` now only " +
"supports `watch(source, cb, options?) signature.");
}
options = cb;
callback = null;
}
var opts = getWatcherOption(options);
var vm = getWatcherVM();
return createWatcher(vm, source, callback, opts);
}
// implement
function computed(options) {
var vm = getCurrentInstance();
var get, set;
if (typeof options === 'function') {
get = options;
}
else {
get = options.get;
set = options.set;
}
var computedHost = defineComponentInstance(getCurrentVue(), {
computed: {
$$state: {
get: get,
set: set,
},
},
});
vm && vm.$on('hook:destroyed', function () { return computedHost.$destroy(); });
return createRef({
get: function () { return computedHost.$$state; },
set: function (v) {
if ( !set) {
warn('Computed property was assigned to but it has no setter.', vm);
return;
}
computedHost.$$state = v;
},
});
}
// implement
function computed(options) {
var vm = getCurrentVM();
var get, set;
if (typeof options === 'function') {
get = options;
}
else {
get = options.get;
set = options.set;
}
var computedHost = defineComponentInstance(getCurrentVue(), {
computed: {
$$state: {
get: get,
set: set,
},
},
});
vm && vm.$on('hook:destroyed', function () { return computedHost.$destroy(); });
return createRef({
get: function () { return computedHost.$$state; },
set: function (v) {
if ( !set) {
warn('Computed property was assigned to but it has no setter.', vm);
return;
}
computedHost.$$state = v;
},
});
}
var NOT_FOUND = {};
function resolveInject(provideKey, vm) {
var source = vm;
while (source) {
// @ts-ignore
if (source._provided && hasOwn(source._provided, provideKey)) {
//@ts-ignore
return source._provided[provideKey];
}
source = source.$parent;
}
return NOT_FOUND;
}
function provide(key, value) {
var vm = currentVMInFn('provide');
if (!vm)
return;
if (!vm._provided) {
var provideCache_1 = {};
Object.defineProperty(vm, '_provided', {
get: function () { return provideCache_1; },
set: function (v) { return Object.assign(provideCache_1, v); },
});
}
vm._provided[key] = value;
}
function inject(key, defaultValue) {
if (!key) {
return defaultValue;
}
var vm = getCurrentInstance();
if (vm) {
var val = resolveInject(key, vm);
if (val !== NOT_FOUND) {
return val;
}
else {
if (defaultValue === undefined && "development" !== 'production') {
warn("Injection \"" + String(key) + "\" not found", vm);
}
return defaultValue;
}
}
else {
warn("inject() can only be used inside setup() or functional components.");
}
}
var NOT_FOUND = {};
function resolveInject(provideKey, vm) {
var source = vm;
while (source) {
// @ts-ignore
if (source._provided && hasOwn(source._provided, provideKey)) {
//@ts-ignore
return source._provided[provideKey];
}
source = source.$parent;
}
return NOT_FOUND;
}
function provide(key, value) {
var vm = currentVMInFn('provide');
if (!vm)
return;
if (!vm._provided) {
var provideCache_1 = {};
Object.defineProperty(vm, '_provided', {
get: function () { return provideCache_1; },
set: function (v) { return Object.assign(provideCache_1, v); },
});
}
vm._provided[key] = value;
}
function inject(key, defaultValue) {
if (!key) {
return defaultValue;
}
var vm = getCurrentVM();
if (vm) {
var val = resolveInject(key, vm);
if (val !== NOT_FOUND) {
return val;
}
else {
if (defaultValue === undefined && "development" !== 'production') {
warn("Injection \"" + String(key) + "\" not found", vm);
}
return defaultValue;
}
}
else {
warn("inject() can only be used inside setup() or functional components.");
}
}
var VueCompositionAPI = {
install: function (Vue) { return install(Vue, mixin); },
};
// auto install when using CDN
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(VueCompositionAPI);
}
var VueCompositionAPI = {
install: function (Vue) { return install(Vue, mixin); },
};
// auto install when using CDN
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(VueCompositionAPI);
}
exports.computed = computed;
exports.createApp = createApp;
exports.default = VueCompositionAPI;
exports.defineComponent = defineComponent;
exports.getCurrentInstance = getCurrentInstance;
exports.h = createElement;
exports.inject = inject;
exports.isReactive = isReactive;
exports.isRef = isRef;
exports.markRaw = markRaw;
exports.nextTick = nextTick;
exports.onActivated = onActivated;
exports.onBeforeMount = onBeforeMount;
exports.onBeforeUnmount = onBeforeUnmount;
exports.onBeforeUpdate = onBeforeUpdate;
exports.onDeactivated = onDeactivated;
exports.onErrorCaptured = onErrorCaptured;
exports.onMounted = onMounted;
exports.onServerPrefetch = onServerPrefetch;
exports.onUnmounted = onUnmounted;
exports.onUpdated = onUpdated;
exports.provide = provide;
exports.reactive = reactive;
exports.ref = ref;
exports.set = set;
exports.shallowReactive = shallowReactive;
exports.shallowRef = shallowRef;
exports.toRaw = toRaw;
exports.toRef = toRef;
exports.toRefs = toRefs;
exports.triggerRef = triggerRef;
exports.unref = unref;
exports.watch = watch;
exports.watchEffect = watchEffect;
exports.computed = computed;
exports.createComponent = createComponent;
exports.createElement = createElement;
exports.default = VueCompositionAPI;
exports.defineComponent = defineComponent;
exports.getCurrentInstance = getCurrentVM;
exports.inject = inject;
exports.isReactive = isReactive;
exports.isRef = isRef;
exports.markRaw = markRaw;
exports.nextTick = nextTick;
exports.onActivated = onActivated;
exports.onBeforeMount = onBeforeMount;
exports.onBeforeUnmount = onBeforeUnmount;
exports.onBeforeUpdate = onBeforeUpdate;
exports.onDeactivated = onDeactivated;
exports.onErrorCaptured = onErrorCaptured;
exports.onMounted = onMounted;
exports.onServerPrefetch = onServerPrefetch;
exports.onUnmounted = onUnmounted;
exports.onUpdated = onUpdated;
exports.provide = provide;
exports.reactive = reactive;
exports.ref = ref;
exports.set = set;
exports.shallowReactive = shallowReactive;
exports.shallowRef = shallowRef;
exports.toRaw = toRaw;
exports.toRef = toRef;
exports.toRefs = toRefs;
exports.triggerRef = triggerRef;
exports.unref = unref;
exports.watch = watch;
exports.watchEffect = watchEffect;
Object.defineProperty(exports, '__esModule', { value: true });
})));

19

package.json
{
"name": "@vue/composition-api",
"version": "0.6.7",
"version": "1.0.0-beta.1",
"description": "Provide logic composition capabilities for Vue.",

@@ -14,6 +14,7 @@ "keywords": [

},
"main": "dist/vue-composition-api.js",
"umd:main": "dist/vue-composition-api.umd.js",
"browser": "dist/vue-composition-api.umd.js",
"module": "dist/vue-composition-api.module.js",
"main": "index.js",
"module": "dist/vue-composition-api.esm.js",
"browser": "dist/vue-composition-api.prod.js",
"unpkg": "dist/vue-composition-ap.prod.js",
"jsdelivr": "dist/vue-composition-api.prod.js",
"typings": "dist/index.d.ts",

@@ -27,3 +28,4 @@ "author": {

"files": [
"dist"
"dist",
"index.js"
],

@@ -37,6 +39,7 @@ "scripts": {

"test-dts": "tsc -p ./test-dts/tsconfig.json && yarn build && tsc -p ./test-dts/tsconfig.build.json",
"update-readme": "node ./scripts/update-readme.js",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"prepublish": "yarn test",
"postpublish": "yarn release-gh",
"version": "yarn changelog && git add CHANGELOG.md",
"version": "yarn changelog && yarn update-readme && git add CHANGELOG.md README.*",
"release": "yarn version && git push --follow-tags && yarn publish --non-interactive",

@@ -74,3 +77,3 @@ "release-gh": "conventional-github-releaser -p angular"

"peerDependencies": {
"vue": "^2.5.22"
"vue": ">= 2.5 < 3"
},

@@ -77,0 +80,0 @@ "dependencies": {

316

README.md

@@ -1,4 +0,4 @@

# Vue Composition API
# @vue/composition-api
Vue 2 plugin for **Composition API** in Vue 3.
Vue 2 plugin for **Composition API**

@@ -8,9 +8,4 @@ [![npm](https://img.shields.io/npm/v/@vue/composition-api)](https://www.npmjs.com/package/@vue/composition-api)

English | [**中文文档**](./README.zh-CN.md) / [**Composition API RFC**](https://composition-api.vuejs.org/)
English | [中文](./README.zh-CN.md) ・ [**Composition API Docs**](https://composition-api.vuejs.org/)
**Note: the primary goal of this package is to allow the community to experiment with the API and provide feedback before it's finalized. The implementation may contain minor inconsistencies with the RFC as the latter gets updated. We do not recommend using this package for production yet at this stage.**
---
## Installation

@@ -49,10 +44,10 @@

<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@0.6.7"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-beta.1"></script>
```
<!--cdn-links-end-->
`@vue/composition-api` will be exposed to global variable `window.vueCompositionApi`.
`@vue/composition-api` will be exposed to global variable `window.VueCompositionAPI`.
```ts
const { ref, reactive } = vueCompositionApi
const { ref, reactive } = VueCompositionAPI
```

@@ -78,9 +73,38 @@

# Limitations
## `Ref` Unwrap
## SSR
Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the `onServerPrefetch` lifecycle hook that allows you to use the `serverPrefetch` hook found in the classic API.
```js
import { onServerPrefetch } from '@vue/composition-api'
export default {
setup (props, { ssrContext }) {
const result = ref()
onServerPrefetch(async () => {
result.value = await callApi(ssrContext.someId)
})
return {
result,
}
},
};
```
## Limitations
> :white_check_mark: Support &nbsp;&nbsp;&nbsp;&nbsp;:x: Not Supported
### `Ref` Unwrap
`Unwrap` is not working with Array index.
### **Should not** store `ref` as a **direct** child of `Array`:
<details>
<summary>
❌ <b>Should NOT</b> store <code>ref</code> as a <b>direct</b> child of <code>Array</code>
</summary>

@@ -90,23 +114,29 @@ ```js

list: [ref(0)],
});
})
// no unwrap, `.value` is required
state.list[0].value === 0; // true
state.list[0].value === 0 // true
state.list.push(ref(1));
state.list.push(ref(1))
// no unwrap, `.value` is required
state.list[1].value === 1; // true
state.list[1].value === 1 // true
```
### **Should not** use `ref` in a plain object when working with `Array`:
</details>
<details>
<summary>
❌ <b>Should NOT</b> use <code>ref</code> in a plain object when working with <code>Array</code>
</summary>
```js
const a = {
count: ref(0),
};
}
const b = reactive({
list: [a], // `a.count` will not unwrap!!
});
})
// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0; // true
b.list[0].count.value === 0 // true
```

@@ -121,50 +151,45 @@

],
});
})
// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0; // true
b.list[0].count.value === 0 // true
```
### **Should** always use `ref` in a `reactive` when working with `Array`:
</details>
<details>
<summary>
✅ <b>Should</b> always use <code>ref</code> in a <code>reactive</code> when working with <code>Array</code>
</summary>
```js
const a = reactive({
count: ref(0),
});
const b = reactive({
list: [a],
});
list: [
reactive({
count: ref(0),
})
],
})
// unwrapped
b.list[0].count === 0; // true
a.list[0].count === 0 // true
b.list.push(
a.list.push(
reactive({
count: ref(1),
})
);
)
// unwrapped
b.list[1].count === 1; // true
a.list[1].count === 1 // true
```
### ***Using*** `reactive` will mutate the origin object
</details>
This is an limitation of using `Vue.observable` in Vue 2.
> Vue 3 will return an new proxy object.
---
### Template Refs
## `watch()` API
<details>
<summary>
✅ String ref && return it from <code>setup()</code>
</summary>
`onTrack` and `onTrigger` are not available in `WatchOptions`.
---
## Template Refs
> :white_check_mark:
> Support &nbsp;&nbsp;&nbsp;&nbsp;:x: Not Supported
:white_check_mark:
String ref && return it from `setup()`:
```html

@@ -178,43 +203,53 @@ <template>

setup() {
const root = ref(null);
const root = ref(null)
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(root.value); // <div/>
});
console.log(root.value) // <div/>
})
return {
root,
};
}
},
};
}
</script>
```
:white_check_mark:
String ref && return it from `setup()` && Render Function / JSX:
</details>
<details>
<summary>
✅ String ref && return it from <code>setup()</code> && Render Function / JSX
</summary>
```jsx
export default {
setup() {
const root = ref(null);
const root = ref(null)
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(root.value); // <div/>
});
console.log(root.value) // <div/>
})
return {
root,
};
}
},
render() {
// with JSX
return () => <div ref="root" />;
return () => <div ref="root" />
},
};
}
```
</details>
:x: Function ref:
<details>
<summary>
❌ Function ref
</summary>
```html

@@ -228,18 +263,24 @@ <template>

setup() {
const root = ref(null);
const root = ref(null)
return {
root,
};
}
},
};
}
</script>
```
:x: Render Function / JSX in `setup()`:
</details>
<details>
<summary>
❌ Render Function / JSX in <code>setup()</code>
</summary>
```jsx
export default {
setup() {
const root = ref(null);
const root = ref(null)

@@ -249,22 +290,32 @@ return () =>

ref: root,
});
})
// with JSX
return () => <div ref={root} />;
return () => <div ref={root} />
},
};
}
```
If you really want to use template refs in this case, you can access `vm.$refs` via `SetupContext.refs`.
</details>
<details>
<summary>
⚠️ <code>$refs</code> accessing workaround
</summary>
<br>
> :warning: **Warning**: The `SetupContext.refs` won't exist in `Vue 3.0`. `@vue/composition-api` provide it as a workaround here.
```js
If you really want to use template refs in this case, you can access `vm.$refs` via `SetupContext.refs`
```jsx
export default {
setup(initProps, setupContext) {
const refs = setupContext.refs;
const refs = setupContext.refs
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(refs.root); // <div/>
});
console.log(refs.root) // <div/>
})

@@ -274,8 +325,8 @@ return () =>

ref: 'root',
});
})
// with JSX
return () => <div ref="root" />;
return () => <div ref="root" />
},
};
}
```

@@ -286,7 +337,7 @@

```ts
import Vue from 'vue';
import Vue from 'vue'
declare module '@vue/composition-api' {
interface SetupContext {
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] }
}

@@ -296,6 +347,79 @@ }

### :x: Reactive APIs in `data()`
</details>
Passing `ref`, `reactive` or other reactive apis to `data()` would not work.
### Reactive
<details>
<summary>
⚠️ <code>reactive()</code> <b>mutates</b> the original object
</summary>
`reactive` uses `Vue.observable` underneath which will ***mutate*** the original object.
> :bulb: In Vue 3, it will return an new proxy object.
</details>
### Watch
<details>
<summary>
❌ <code>onTrack</code> and <code>onTrigger</code> are not available in <code>WatchOptions</code>
</summary>
```js
watch(() => {
/* ... */
}, {
immediate: true,
onTrack() {}, // not available
onTrigger() {}, // not available
})
```
</details>
### createApp
<details>
<summary>
⚠️ <code>createApp()</code> is global
</summary>
In Vue 3, `createApp()` is introduced to provide context(plugin, components, etc.) isolation between app instances. Due the the design of Vue 2, in this plugin, we provide `createApp()` as a forward compatible API which is just an alias of the global.
```ts
const app1 = createApp(RootComponent1)
app1.component('Foo', Foo) // equivalent to Vue.component('Foo', Foo)
app1.use(VueRouter) // equivalent to Vue.use(VueRouter)
const app2 = createApp(RootComponent2)
app2.component('Bar', Bar) // equivalent to Vue.use('Bar', Bar)
```
</details>
### Missing APIs
The following APIs introduced in Vue 3 are not available in this plugin.
- `readonly`
- `shallowReadonly`
- `defineAsyncComponent`
- `onRenderTracked`
- `onRenderTriggered`
- `customRef`
- `isProxy`
- `isReadonly`
- `isVNode`
### Reactive APIs in `data()`
<details>
<summary>
❌ Passing <code>ref</code>, <code>reactive</code> or other reactive apis to <code>data()</code> would not work.
</summary>
```jsx

@@ -309,25 +433,13 @@ export default {

},
};
}
```
## SSR
</details>
Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the `onServerPrefetch` lifecycle hook that allows you to use the `serverPrefetch` hook found in the classic API.
```js
import { onServerPrefetch } from '@vue/composition-api';
### Performance Impact
export default {
setup (props, { ssrContext }) {
const result = ref();
Due the the limitation of Vue2's public API. `@vue/composition-api` inevitably introduced some extract costs. It shouldn't bother you unless in extreme environments.
onServerPrefetch(async () => {
result.value = await callApi(ssrContext.someId);
});
You can check the [benchmark results](https://antfu.github.io/vue-composition-api-benchmark-results/) for more details.
return {
result,
};
},
};
```

358

README.zh-CN.md

@@ -1,2 +0,2 @@

# Vue Composition API
# @vue/composition-api

@@ -8,127 +8,132 @@ Vue 2 插件用于提供 Vue 3 中的 **组合式 API**.

[**English**](./README.md) | 中文文档 / [**组合式 API RFC**](https://composition-api.vuejs.org/zh)
[English](./README.md) | 中文 ・ [**组合式 API 文档**](https://composition-api.vuejs.org/zh)
**请注意：此插件的主要目的是让社区尝试新的API并在其最终确定之前提供反馈。随着RFC的更新，该实现可能包含与RFC有细微的不一致。现阶段，我们暂不建议将此插件用于生产环境。**
---
## 安装
# 导航
### NPM
- [安装](#安装)
- [使用](#使用)
- [TypeScript](#TypeScript)
- [TSX](#tsx)
- [限制](#限制)
- [更新日志](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)
```bash
npm install @vue/composition-api
# or
yarn add @vue/composition-api
```
# 安装
在使用 `@vue/composition-api` 前，必须先先通过 `Vue.use()` 进行安装后方可使用使用新的 [**组合式 API**](https://composition-api.vuejs.org/zh) 进行组件开发。
**npm**
```js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
```bash
npm install @vue/composition-api --save
Vue.use(VueCompositionAPI)
```
**yarn**
```bash
yarn add @vue/composition-api
```js
// 使用 API
import { ref, reactive } from '@vue/composition-api'
```
**CDN**
> :bulb: 当迁移到 Vue 3 时，只需简单的将 `@vue/composition-api` 替换成 `vue` 即可。你现有的代码几乎无需进行额外的改动。
```html
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
```
通过全局变量 `window.vueCompositionApi` 来使用。
### CDN
# 使用
在 Vue 之后引入 `@vue/composition-api` ，插件将会自动完成安装。
在使用任何 `@vue/composition-api` 提供的能力前，必须先通过 `Vue.use()` 进行安装:
<!--cdn-links-start-->
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-beta.1"></script>
```
<!--cdn-links-end-->
```js
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
`@vue/composition-api` 将会暴露在全局变量 `window.VueCompositionAPI` 中。
Vue.use(VueCompositionApi);
```ts
const { ref, reactive } = VueCompositionAPI
```
安装插件后，您就可以使用新的 [Composition API](https://vue-composition-api-rfc.netlify.com/) 来开发组件了。
## TypeScript 支持
# TypeScript
> 本插件要求使用 TypeScript **3.5.1** 或以上版本
**本插件要求使用 TypeScript 3.5.1 以上版本，如果你正在使用 `vetur`，请将 `vetur.useWorkspaceDependencies` 设为 `true`。**
为了让 TypeScript 在 Vue 组件选项中正确地推导类型，我们必须使用 `defineComponent` 来定义组件:
```ts
import { defineComponent } from '@vue/composition-api';
import { defineComponent } from '@vue/composition-api'
const Component = defineComponent({
// 启用类型推断
});
const Component = {
// 无法进行选项的类型推断
// TypeScript 无法知道这是一个 Vue 组件的选项对象
};
export default defineComponent({
// 类型推断启用
})
```
## TSX
### JSX/TSX
:rocket: 这里有一个配置好 TS/TSX 支持的[示例仓库](https://github.com/liximomo/vue-composition-api-tsx-example)来帮助你快速开始.
要使得 `@vue/composition-api` 支持 JSX/TSX，请前往查看由 [@luwanquan](https://github.com/luwanquan) 开发的 Babel 插件[babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx)。
要支持 TSX，请创建一个类型定义文件并提供正确的 JSX 定义。内容如下：
## SSR
```ts
// 文件: `shim-tsx.d.ts`
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';
尽管 Vue 3 暂时没有给出确定的 SSR 的 API，这个插件实现了 `onServerPrefetch` 生命周期钩子函数。这个钩子允许你使用在传统 API 中的 `serverPrefetch` 函数。
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends ComponentRenderProxy {}
interface ElementAttributesProperty {
$props: any; // 定义要使用的属性名称
```js
import { onServerPrefetch } from '@vue/composition-api'
export default {
setup (props, { ssrContext }) {
const result = ref()
onServerPrefetch(async () => {
result.value = await callApi(ssrContext.someId)
})
return {
result,
}
interface IntrinsicElements {
[elem: string]: any;
}
}
},
}
```
# 限制
## 限制
## `Ref` 自动展开 (unwrap)
> :white_check_mark: 支持 &nbsp;&nbsp;&nbsp;&nbsp;:x: 不支持
### `Ref` 自动展开 (unwrap)
数组索引属性无法进行自动展开:
### **不要**使用 `Array` 直接存取 `ref` 对象:
<details>
<summary>
❌ <b>不要</b> 使用数组直接存取 <code>ref</code> 对象
</summary>
```js
const state = reactive({
list: [ref(0)],
});
})
// 不会自动展开, 须使用 `.value`
state.list[0].value === 0; // true
state.list[0].value === 0 // true
state.list.push(ref(1));
state.list.push(ref(1))
// 不会自动展开, 须使用 `.value`
state.list[1].value === 1; // true
state.list[1].value === 1 // true
```
### **不要**在数组中使用含有 `ref` 的普通对象:
</details>
<details>
<summary>
❌ <b>不要</b> 在数组中使用含有 <code>ref</code> 的普通对象
</summary>
```js
const a = {
count: ref(0),
};
}
const b = reactive({
list: [a], // `a.count` 不会自动展开!!
});
})

@@ -146,3 +151,3 @@ // `count` 不会自动展开, 须使用 `.value`

],
});
})

@@ -153,13 +158,19 @@ // `count` 不会自动展开, 须使用 `.value`

### **应该**总是将 `ref` 存放到 `reactive` 对象中:
</details>
<details>
<summary>
✅ 在数组中，<b>应该</b> 总是将 <code>ref</code> 存放到 <code>reactive</code> 对象中
</summary>
```js
const a = reactive({
count: ref(0),
});
})
const b = reactive({
list: [a],
});
})
// 自动展开
b.list[0].count === 0; // true
b.list[0].count === 0 // true

@@ -170,3 +181,3 @@ b.list.push(

})
);
)
// 自动展开

@@ -176,21 +187,11 @@ b.list[1].count === 1; // true

### `reactive` 会返回一个修改过的原始的对象
</details>
此行为与 Vue 2 中的 `Vue.observable` 一致
> Vue 3 中会返回一个新的的代理对象.
### 模板 Refs
---
<details>
<summary>
✅ 字符串 ref && 从 <code>setup()</code> 返回 ref
</summary>
## `watch()` API
不支持 `onTrack` 和 `onTrigger` 选项。
---
## 模板 Refs
> :white_check_mark: 支持 &nbsp;&nbsp;&nbsp;&nbsp;:x: 不支持
:white_check_mark: 字符串 ref && 从 `setup()` 返回 ref:
```html

@@ -204,42 +205,56 @@ <template>

setup() {
const root = ref(null);
const root = ref(null)
onMounted(() => {
// 在初次渲染后 DOM 元素会被赋值给 ref
console.log(root.value); // <div/>
});
console.log(root.value) // <div/>
})
return {
root,
};
}
},
};
}
</script>
```
:white_check_mark: 字符串 ref && 从 `setup()` 返回 ref && 渲染函数 / JSX:
</details>
<details>
<summary>
✅ 字符串 ref && 从 <code>setup()</code> 返回 ref && 渲染函数 / JSX
</summary>
```jsx
export default {
setup() {
const root = ref(null);
const root = ref(null)
onMounted(() => {
// 在初次渲染后 DOM 元素会被赋值给 ref
console.log(root.value); // <div/>
});
console.log(root.value) // <div/>
})
return {
root,
};
}
},
render() {
// 使用 JSX
return () => <div ref="root" />;
return () => <div ref="root" />
},
};
}
```
:x: 函数 ref:
</details>
<details>
<summary>
❌ 函数 ref
</summary>
```html

@@ -253,18 +268,24 @@ <template>

setup() {
const root = ref(null);
const root = ref(null)
return {
root,
};
}
},
};
}
</script>
```
:x: 渲染函数 / JSX:
</details>
<details>
<summary>
❌ 在 <code>setup()</code> 中的渲染函数 / JSX
</summary>
```jsx
export default {
setup() {
const root = ref(null);
const root = ref(null)

@@ -274,22 +295,30 @@ return () =>

ref: root,
});
})
// 使用 JSX
return () => <div ref={root} />;
return () => <div ref={root} />
},
};
}
```
如果你依然选择在 `setup()` 中写 `render` 函数，那么你可以使用 `SetupContext.refs` 来访问模板引用，它等价于 Vue 2.x 中的 `this.$refs`:
</details>
<details>
<summary>
⚠️ <code>$refs</code> 访问的变通方案
</summary>
> :warning: **警告**: `SetupContext.refs` 并不属于 `Vue 3.0` 的一部分, `@vue/composition-api` 将其曝光在 `SetupContext` 中只是临时提供一种变通方案。
如果你依然选择在 `setup()` 中写 `render` 函数，那么你可以使用 `SetupContext.refs` 来访问模板引用，它等价于 Vue 2.x 中的 `this.$refs`:
```js
export default {
setup(initProps, setupContext) {
const refs = setupContext.refs;
const refs = setupContext.refs
onMounted(() => {
// 在初次渲染后 DOM 元素会被赋值给 ref
console.log(refs.root); // <div/>
});
})

@@ -299,8 +328,8 @@ return () =>

ref: 'root',
});
})
// 使用 JSX
return () => <div ref="root" />;
return () => <div ref="root" />
},
};
}
```

@@ -311,12 +340,87 @@

```ts
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
import Vue from 'vue'
Vue.use(VueCompositionApi);
declare module '@vue/composition-api/dist/component/component' {
declare module '@vue/composition-api' {
interface SetupContext {
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] }
}
}
```
</details>
### Reactive
<details>
<summary>
⚠️ <code>reactive()</code> 会返回一个<b>修改过的</b>原始的对象
</summary>
此行为与 Vue 2 中的 `Vue.observable` 一致
> :bulb: 在 Vue 3 中，`reactive()` 会返回一个新的的代理对象.
</details>
### Watch
<details>
<summary>
❌ 不支持 <code>onTrack</code> 和 <code>onTrigger</code> 选项
</summary>
```js
watch(() => {
/* ... */
}, {
immediate: true,
onTrack() {}, // 不可用
onTrigger() {}, // 不可用
})
```
</details>
### 缺失的 API
以下在 Vue 3 新引入的 API ，在本插件中暂不适用：
- `readonly`
- `shallowReadonly`
- `defineAsyncComponent`
- `onRenderTracked`
- `onRenderTriggered`
- `customRef`
- `isProxy`
- `isReadonly`
- `isVNode`
### 在 `data()` 中使用组合式 API
<details>
<summary>
❌ 在 <code>data()</code> 中使用 <code>ref</code>, <code>reactive</code> 或其他组合式 API 将不会生效
</summary>
```jsx
export default {
data() {
return {
// 在模版中会成为 { a: { value: 1 } }
a: ref(1)
}
},
}
```
</details>
### 性能影响
用于 Vue 2 所提供的公共 API 的限制，`@vue/composition-api` 不可避免地引入了额外的性能开销。在非极端情况下，这并不会对你造成影响。
你可以查看这个 [跑分结果](https://antfu.github.io/vue-composition-api-benchmark-results/) 了解更多信息。
dist/vue-composition-api.min.js
dist/vue-composition-api.module.js
dist/vue-composition-api.umd.js
dist/vue-composition-api.umd.min.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc