import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。 如：C import B，B import A，在 C 中可以使用 B 定义的 template，在 B 中可以使用 A 定义的 template，但是 C 不能使用 A 定义的 template。
inlcude
include 可以将目标文件除了 template wxs 外的整个代码引入，相当于是拷贝到 include 位置，如：
响应式数据访问
在 page 或者 component 中的生命周期或者 methods 中
1 2 3 4 5
Page({ data:{ a:'xxx } })
访问
需要使用 this.data.a 进行访问，相比与 vue，需要多一层 data 属性，vue 内部对 data 属性的访问是做了代理的，而小程序则没有这层代理
let envPlugin = { name: "env", setup(build) { // Intercept import paths called "env" so esbuild doesn't attempt // to map them to a file system location. Tag them with the "env-ns" // namespace to reserve them for this plugin. build.onResolve({ filter: /^env$/ }, (args) => ({ path: args.path, namespace: "env-ns", }));
// Load paths tagged with the "env-ns" namespace and behave as if // they point to a JSON file containing the environment variables. build.onLoad({ filter: /.*/, namespace: "env-ns" }, () => ({ contents: JSON.stringify(process.env), loader: "json", })); }, };
// vue/src/core/observer/watcher.js classWatcher{ get() { pushTarget(this); let value; const vm = this.vm; try { value = this.getter.call(vm, vm); } catch (e) { if (this.user) { handleError(e, vm, `getter for watcher "${this.expression}"`); } else { throw e; } } finally { // "touch" every property so they are all tracked as // dependencies for deep watching if (this.deep) { traverse(value); } popTarget(); this.cleanupDeps(); } return value; } }
// vue/src/core/instance/state.js Vue.prototype.$watch = function ( expOrFn: string | Function, cb: any, options?: Object ): Function{ // 省略 returnfunctionunwatchFn() { watcher.teardown(); }; }; // vue/src/core/observer/watcher.js classWatcher{ teardown() { if (this.active) { // remove self from vm's watcher list // this is a somewhat expensive operation so we skip it // if the vm is being destroyed. if (!this.vm._isBeingDestroyed) { remove(this.vm._watchers, this); } let i = this.deps.length; while (i--) { this.deps[i].removeSub(this); } this.active = false; } } }
// @vue/composition-api/src/reactivity/reactive.ts /** * Auto unwrapping when access property */ exportfunctiondefineAccessControl(target: AnyObject, key: any, val?: any) { if (key === "__ob__") return; if (isRaw(target[key])) return;
let getter: (() =>any) | undefined; let setter: ((x: any) =>void) | undefined; const 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]; } }
// 如果 val 是一个对象 递归调用 defineAccessControl setupAccessControl(val); Object.defineProperty(target, key, { enumerable: true, configurable: true, get: functiongetterHandler() { const 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: functionsetterHandler(newVal) { if (getter && !setter) return;
const 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; } elseif (setter) { setter.call(target, newVal); } else { val = newVal; } setupAccessControl(newVal); }, }); }
// @vue/composition-api/src/reactivity/ref.ts exportfunctioncreateRef<T>(options: RefOption<T>, readonly = false) { const r = new RefImpl<T>(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 const sealed = Object.seal(r);
