├── .DS_Store ├── .gitignore ├── .vscode └── settings.json ├── Element-UI └── README.md ├── Mint-UI ├── README.md └── TimePicker │ ├── README.md │ ├── TimePikcer │ └── index.vue │ ├── TimeRangePicker │ └── index.vue │ └── demo │ ├── timePickerDemo.vue │ └── timeRangePickerDemo.vue ├── README.md ├── Vue-cli ├── README.md └── demos │ └── myapp │ ├── .babelrc │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js │ ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ └── router │ │ └── index.js │ └── static │ └── .gitkeep ├── Vue3 ├── Readme.md ├── assets │ ├── images │ │ ├── reactivity.png │ │ └── vue-module-structure.png │ └── mini-vue脑图.zip └── demos │ ├── demo01 │ ├── App.js │ ├── core │ │ ├── h.js │ │ ├── index.js │ │ ├── reactivity │ │ │ └── index.js │ │ └── renderer.js │ ├── index.html │ └── index.js │ ├── demo02 │ ├── babel.config.js │ ├── package.json │ ├── src │ │ └── reactivity │ │ │ ├── index.ts │ │ │ └── tests │ │ │ └── index.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo03 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ └── reactivity │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ ├── effect.spec.ts │ │ │ └── reactive.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo04 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ └── reactivity │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ ├── effect.spec.ts │ │ │ └── reactive.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo05 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ └── reactivity │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ ├── effect.spec.ts │ │ │ └── reactive.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo06 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ └── reactive.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo07 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ └── readonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo08 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ └── readonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo09 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ └── readonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo10 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ └── readonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo11 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo12 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo13 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo14 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo15 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo16 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo17 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ ├── example │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── createApp.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo18 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo19 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo20 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ └── index.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo21 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo22 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo23 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo24 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── componentEmit │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo25 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── componentEmit │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── componentSlot │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo26 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── componentEmit │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── componentSlot │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── helloworld │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo27 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── currentInstance │ │ │ │ ├── App.js │ │ │ │ ├── Foo.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo28 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ └── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo29 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo30 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo31 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo32 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── patchChildren │ │ │ │ ├── App.js │ │ │ │ ├── ArrayToArray.js │ │ │ │ ├── ArrayToText.js │ │ │ │ ├── TextToArray.js │ │ │ │ ├── TextToText.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo33 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── patchChildren │ │ │ │ ├── App.js │ │ │ │ ├── ArrayToArray.js │ │ │ │ ├── ArrayToText.js │ │ │ │ ├── TextToArray.js │ │ │ │ ├── TextToText.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo34 │ ├── README.md │ ├── babel.config.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── patchChildren │ │ │ │ ├── App.js │ │ │ │ ├── ArrayToArray.js │ │ │ │ ├── ArrayToText.js │ │ │ │ ├── TextToArray.js │ │ │ │ ├── TextToText.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo35 │ ├── LIS.ts │ ├── README.md │ ├── babel.config.js │ ├── getSequence.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── patchChildren │ │ │ │ ├── App.js │ │ │ │ ├── ArrayToArray.js │ │ │ │ ├── ArrayToText.js │ │ │ │ ├── TextToArray.js │ │ │ │ ├── TextToText.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo36 │ ├── LIS.ts │ ├── README.md │ ├── babel.config.js │ ├── getSequence.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── componentUpdate │ │ │ │ ├── App.js │ │ │ │ ├── Child.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── patchChildren │ │ │ │ ├── App.js │ │ │ │ ├── ArrayToArray.js │ │ │ │ ├── ArrayToText.js │ │ │ │ ├── TextToArray.js │ │ │ │ ├── TextToText.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── componentUpdateUtils.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo37 │ ├── LIS.ts │ ├── README.md │ ├── babel.config.js │ ├── getSequence.js │ ├── lib │ │ ├── guide-mini-vue.cjs.js │ │ └── guide-mini-vue.esm.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── example │ │ │ ├── apiInject │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── componentUpdate │ │ │ │ ├── App.js │ │ │ │ ├── Child.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── customRenderer │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── nextTick │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ ├── patchChildren │ │ │ │ ├── App.js │ │ │ │ ├── ArrayToArray.js │ │ │ │ ├── ArrayToText.js │ │ │ │ ├── TextToArray.js │ │ │ │ ├── TextToText.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ │ └── update │ │ │ │ ├── App.js │ │ │ │ ├── index.html │ │ │ │ └── main.js │ │ ├── index.ts │ │ ├── reactivity │ │ │ ├── bashHandlers.ts │ │ │ ├── computed.ts │ │ │ ├── effect.ts │ │ │ ├── index.ts │ │ │ ├── reactive.ts │ │ │ ├── ref.ts │ │ │ └── tests │ │ │ │ ├── computed.spec.ts │ │ │ │ ├── effect.spec.ts │ │ │ │ ├── reactive.spec.ts │ │ │ │ ├── readonly.spec.ts │ │ │ │ ├── ref.spec.ts │ │ │ │ └── shallowReadonly.spec.ts │ │ ├── runtime-core │ │ │ ├── apiInject.ts │ │ │ ├── component.ts │ │ │ ├── componentEmit.ts │ │ │ ├── componentProps.ts │ │ │ ├── componentPublicInstance.ts │ │ │ ├── componentSlots.ts │ │ │ ├── componentUpdateUtils.ts │ │ │ ├── createApp.ts │ │ │ ├── h.ts │ │ │ ├── helpers │ │ │ │ └── renderSlots.ts │ │ │ ├── index.ts │ │ │ ├── renderer.ts │ │ │ ├── scheduler.ts │ │ │ └── vnode.ts │ │ ├── runtime-dom │ │ │ └── index.ts │ │ └── shared │ │ │ ├── ShapeFlags.ts │ │ │ ├── index.ts │ │ │ └── test.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo38 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ └── compiler-core │ │ │ ├── src │ │ │ ├── ast.ts │ │ │ └── parse.ts │ │ │ └── tests │ │ │ └── parse.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo39 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ └── compiler-core │ │ │ ├── src │ │ │ ├── ast.ts │ │ │ └── parse.ts │ │ │ └── tests │ │ │ └── parse.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo40 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ └── compiler-core │ │ │ ├── src │ │ │ ├── ast.ts │ │ │ └── parse.ts │ │ │ └── tests │ │ │ └── parse.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo41 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ └── compiler-core │ │ │ ├── src │ │ │ ├── ast.ts │ │ │ └── parse.ts │ │ │ └── tests │ │ │ └── parse.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo42 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ └── compiler-core │ │ │ ├── src │ │ │ ├── ast.ts │ │ │ ├── index.js │ │ │ └── parse.ts │ │ │ └── tests │ │ │ └── parse.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ ├── demo43 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ └── compiler-core │ │ │ ├── src │ │ │ ├── ast.ts │ │ │ ├── index.js │ │ │ ├── parse.ts │ │ │ └── transform.ts │ │ │ └── tests │ │ │ ├── parse.spec.ts │ │ │ └── transform.spec.ts │ ├── tsconfig.json │ └── yarn.lock │ └── demo44 │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ └── compiler-core │ │ ├── src │ │ ├── ast.ts │ │ ├── index.js │ │ ├── parse.ts │ │ └── transform.ts │ │ └── tests │ │ ├── parse.spec.ts │ │ └── transform.spec.ts │ ├── tsconfig.json │ └── yarn.lock ├── VueRouter ├── README.md └── demos │ ├── Router-Loaded-On-Demand │ ├── README.md │ ├── build │ │ ├── 1.bundle.js │ │ ├── 2.bundle.js │ │ ├── 3.bundle.js │ │ ├── 4.bundle.js │ │ ├── bundle.js │ │ └── index.html │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── main.js │ │ ├── pages │ │ │ └── home.vue │ │ ├── router-config.js │ │ └── routes │ │ │ ├── page1.vue │ │ │ ├── page2.vue │ │ │ └── page3.vue │ └── webpack.config.js │ └── configRouter │ ├── .babelrc │ ├── README.md │ ├── build │ ├── bundle.js │ └── index.html │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.vue │ ├── main.js │ ├── pages │ │ └── home.vue │ ├── router-config.js │ └── routes │ │ ├── page1.vue │ │ ├── page2.vue │ │ └── page3.vue │ └── webpack.config.js ├── ant-design-vue1.7.8 └── debugger.less ├── es6 ├── .DS_Store ├── README.md ├── Tools │ ├── ajax-timeout.js │ ├── assign.js │ ├── class_super.js │ ├── safe-get-attr.js │ ├── transformArrayToObject.js │ ├── transformArrayToObjectNoRepeat.js │ ├── 分解质因数以及欧拉函数.js │ ├── 灰度成像 │ │ ├── index.html │ │ ├── timg.jpg │ │ └── tools.js │ ├── 用ts写装饰器模式 │ │ ├── coffe3.js │ │ ├── coffe3.ts │ │ ├── coffee.ts │ │ ├── coffee2.js │ │ └── coffee2.ts │ └── 限定次数弹窗demo.js ├── decorator-demo │ ├── README.md │ ├── index.es.js │ ├── index.html │ ├── index.js │ └── index.js.map ├── decorator.md ├── promsie │ ├── .DS_Store │ ├── README.md │ └── demo │ │ ├── .DS_Store │ │ ├── README.md │ │ ├── ajax.js │ │ ├── favicon.ico │ │ ├── images │ │ ├── .DS_Store │ │ ├── add.png │ │ ├── alipay.png │ │ ├── bank-card.png │ │ ├── cash.png │ │ ├── catch.png │ │ ├── club-card.png │ │ ├── credits.png │ │ ├── no-catch.png │ │ ├── top1.png │ │ ├── top2.png │ │ ├── top3.png │ │ └── wechatpay.png │ │ └── index.html ├── s-Day1 let 和 const 命令.md ├── s-Day1 变量的解构赋值.md ├── s-Day1 字符串的扩展.md ├── s-Day2 函数的扩展.md ├── s-Day2 对象的扩展.md ├── s-Day2 数值的扩展.md ├── s-Day2 数组的扩展.md ├── s-Day3 1-Symbol数据类型.md ├── s-Day3 2-Set和Map对象.md ├── s-Day3 3-Promise对象.md ├── s-Day3 4-async函数.md ├── s-Day4 1-class的基本用法.md ├── s-Day4 2-class的继承.md ├── s-Day5 1-module语法.md └── s-Day5 2-webpack的使用.md ├── images ├── range-picker.gif └── time-picker.jpg ├── vue-env ├── .vscode │ └── settings.json ├── README.md ├── jsconfig.json ├── package.json ├── src │ ├── App.vue │ ├── component.vue │ ├── demo.ts │ ├── index.ejs │ ├── less.less │ ├── main.ts │ ├── scss.scss │ └── vue.shime.d.ts ├── tscofig.json ├── tsconfig.json ├── webpack.base.config.js └── yarn.lock ├── vue ├── A、Vue基本语法.md ├── B、Vue生命周期钩子.md ├── C、Vue内置指令.md ├── D、Vue计算属性与methods的区别.md ├── E、Vue计算属性的setget方法.md ├── F、Vue v-for.md ├── G、Vue 自定义过滤器.md ├── H、Vue class 与 style 的绑定.md ├── I、Vue slot具名插槽.md ├── J、修饰符.md ├── K、组件.md ├── L、自定义指令.md ├── README.md ├── Vue-cli启动app │ └── init.md └── Vue基本环境 │ ├── .babelrc │ ├── dist │ ├── bundle.js │ └── index.html │ ├── entry.js │ ├── img │ └── logo_01.png │ ├── index.html │ ├── javascript │ ├── base.js │ └── vue.js │ ├── package.json │ ├── style │ └── style.css │ ├── webpack.config.js │ └── yarn.lock └── webpack ├── .DS_Store ├── README.md ├── instance-demo ├── MyInstance.js ├── b.js ├── index.js └── webpack.config.js ├── s-Day7 1-webpack的使用.md ├── s-Day7 2-style-loader&url-loader&css-loader.md ├── s-Day7 3-webpack-plugin.md ├── s-Day7 4-webpack-devtool.md ├── webpack-decorator.md └── webpack-proxy-demo ├── .DS_Store ├── README.md ├── dist ├── bundle.js └── index.html ├── entry.js ├── index.html ├── package-lock.json ├── package.json └── webpack.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | **/node_modules -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vetur.experimental.templateInterpolationService": true, 3 | "javascript.implicitProjectConfig.experimentalDecorators": true, 4 | "editor.formatOnSave": true 5 | } -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/README.md: -------------------------------------------------------------------------------- 1 | # myapp 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/Vue-cli/demos/myapp/build/logo.png -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | myapp 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 24 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/Vue-cli/demos/myapp/src/assets/logo.png -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | components: { App }, 14 | template: '' 15 | }) 16 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import HelloWorld from '@/components/HelloWorld' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'HelloWorld', 12 | component: HelloWorld 13 | } 14 | ] 15 | }) 16 | -------------------------------------------------------------------------------- /Vue-cli/demos/myapp/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/Vue-cli/demos/myapp/static/.gitkeep -------------------------------------------------------------------------------- /Vue3/assets/images/reactivity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/Vue3/assets/images/reactivity.png -------------------------------------------------------------------------------- /Vue3/assets/images/vue-module-structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/Vue3/assets/images/vue-module-structure.png -------------------------------------------------------------------------------- /Vue3/assets/mini-vue脑图.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/Vue3/assets/mini-vue脑图.zip -------------------------------------------------------------------------------- /Vue3/demos/demo01/core/h.js: -------------------------------------------------------------------------------- 1 | export function h(type, props, children) { 2 | return { 3 | type, 4 | props, 5 | children 6 | } 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo01/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from './core/index.js' 2 | import App from './App.js' 3 | 4 | 5 | createApp(App).mount(document.querySelector('#app')) -------------------------------------------------------------------------------- /Vue3/demos/demo02/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo02", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo02/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export function add(a, b) { 2 | return a + b 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo02/src/reactivity/tests/index.spec.ts: -------------------------------------------------------------------------------- 1 | 2 | import { add } from '../index'; 3 | 4 | it("init", () => { 5 | expect(true).toBe(true) 6 | expect(add(1, 1)).toBe(2) 7 | }) -------------------------------------------------------------------------------- /Vue3/demos/demo03/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo03", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo03/src/reactivity/reactive.ts: -------------------------------------------------------------------------------- 1 | import { trick, trigger } from "./effect" 2 | 3 | export function reactive(obj) { 4 | return new Proxy(obj, { 5 | get(target, key, receiver) { 6 | // 依赖收集 7 | trick(target, key) 8 | return Reflect.get(target, key, receiver) 9 | }, 10 | set(target, key, value, receiver) { 11 | Reflect.set(target, key, value, receiver) 12 | // 触发依赖 13 | trigger(target, key) 14 | return value 15 | } 16 | }) 17 | } 18 | 19 | -------------------------------------------------------------------------------- /Vue3/demos/demo03/src/reactivity/tests/reactive.spec.ts: -------------------------------------------------------------------------------- 1 | import { reactive } from "../reactive" 2 | 3 | describe('reactive', () => { 4 | it('happy path', () => { 5 | const original = { foo: 1 } 6 | // 初始化响应式对象 7 | const observed = reactive(original) 8 | // 响应式对象不应等于原对象 9 | expect(original).not.toBe(observed) 10 | // 初始化过后响应式对象属性的值应该等于原对象属性的值 11 | expect(original.foo).toBe(observed.foo) 12 | }) 13 | }) -------------------------------------------------------------------------------- /Vue3/demos/demo04/README.md: -------------------------------------------------------------------------------- 1 | 2 | # 实现 effect 返回 runner 3 | 4 | 1. effect 应该返回 runner 5 | 6 | 1. runner 手动调用后应该正常工作（运行内部依赖并更新） 7 | 8 | 1. effect返回的 runner 在调用后应该能正常获取返回值 9 | 10 | ## Run 11 | 12 | ```bash 13 | yarn install 14 | ``` 15 | 16 | ```bash 17 | yarn test 18 | ``` 19 | 20 | ## 具体实现 21 | 22 | effect.ts 23 | ```ts 24 | export function effect(fn) { 25 | // 实例化fn 并立即执行依赖收集 26 | const _effect = new ReactiveEffect(fn) 27 | _effect.run() 28 | return _effect.run.bind(_effect) 29 | } 30 | ``` -------------------------------------------------------------------------------- /Vue3/demos/demo04/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo04", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo04/src/reactivity/reactive.ts: -------------------------------------------------------------------------------- 1 | import { trick, trigger } from "./effect" 2 | 3 | export function reactive(obj) { 4 | return new Proxy(obj, { 5 | get(target, key, receiver) { 6 | // 依赖收集 7 | trick(target, key) 8 | return Reflect.get(target, key, receiver) 9 | }, 10 | set(target, key, value, receiver) { 11 | Reflect.set(target, key, value, receiver) 12 | // 触发依赖 13 | trigger(target, key) 14 | return value 15 | } 16 | }) 17 | } 18 | 19 | -------------------------------------------------------------------------------- /Vue3/demos/demo04/src/reactivity/tests/reactive.spec.ts: -------------------------------------------------------------------------------- 1 | import { reactive } from "../reactive" 2 | 3 | describe('reactive', () => { 4 | it('happy path', () => { 5 | const original = { foo: 1 } 6 | // 初始化响应式对象 7 | const observed = reactive(original) 8 | // 响应式对象不应等于原对象 9 | expect(original).not.toBe(observed) 10 | // 初始化过后响应式对象属性的值应该等于原对象属性的值 11 | expect(original.foo).toBe(observed.foo) 12 | }) 13 | }) -------------------------------------------------------------------------------- /Vue3/demos/demo05/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo05/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo05", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo05/src/reactivity/reactive.ts: -------------------------------------------------------------------------------- 1 | import { trick, trigger } from "./effect" 2 | 3 | export function reactive(obj) { 4 | return new Proxy(obj, { 5 | get(target, key, receiver) { 6 | // 依赖收集 7 | trick(target, key) 8 | return Reflect.get(target, key, receiver) 9 | }, 10 | set(target, key, value, receiver) { 11 | Reflect.set(target, key, value, receiver) 12 | // 触发依赖 13 | trigger(target, key) 14 | return value 15 | } 16 | }) 17 | } 18 | 19 | -------------------------------------------------------------------------------- /Vue3/demos/demo05/src/reactivity/tests/reactive.spec.ts: -------------------------------------------------------------------------------- 1 | import { reactive } from "../reactive" 2 | 3 | describe('reactive', () => { 4 | it('happy path', () => { 5 | const original = { foo: 1 } 6 | // 初始化响应式对象 7 | const observed = reactive(original) 8 | // 响应式对象不应等于原对象 9 | expect(original).not.toBe(observed) 10 | // 初始化过后响应式对象属性的值应该等于原对象属性的值 11 | expect(original.foo).toBe(observed.foo) 12 | }) 13 | }) -------------------------------------------------------------------------------- /Vue3/demos/demo06/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo06/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo06", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo06/src/reactivity/reactive.ts: -------------------------------------------------------------------------------- 1 | import { trick, trigger } from "./effect" 2 | 3 | export function reactive(obj) { 4 | return new Proxy(obj, { 5 | get(target, key, receiver) { 6 | // 依赖收集 7 | trick(target, key) 8 | return Reflect.get(target, key, receiver) 9 | }, 10 | set(target, key, value, receiver) { 11 | Reflect.set(target, key, value, receiver) 12 | // 触发依赖 13 | trigger(target, key) 14 | return value 15 | } 16 | }) 17 | } 18 | 19 | -------------------------------------------------------------------------------- /Vue3/demos/demo06/src/reactivity/tests/reactive.spec.ts: -------------------------------------------------------------------------------- 1 | import { reactive } from "../reactive" 2 | 3 | describe('reactive', () => { 4 | it('happy path', () => { 5 | const original = { foo: 1 } 6 | // 初始化响应式对象 7 | const observed = reactive(original) 8 | // 响应式对象不应等于原对象 9 | expect(original).not.toBe(observed) 10 | // 初始化过后响应式对象属性的值应该等于原对象属性的值 11 | expect(original.foo).toBe(observed.foo) 12 | }) 13 | }) -------------------------------------------------------------------------------- /Vue3/demos/demo06/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign -------------------------------------------------------------------------------- /Vue3/demos/demo07/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo07/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo07", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo07/src/reactivity/reactive.ts: -------------------------------------------------------------------------------- 1 | import { mutableHandlers, readonlyHandlers } from './bashHandlers'; 2 | 3 | export function reactive(obj) { 4 | return createActiveObject(obj, mutableHandlers) 5 | } 6 | 7 | export function readonly(obj) { 8 | return createActiveObject(obj, readonlyHandlers) 9 | } 10 | 11 | function createActiveObject(obj: any, bashHandlers) { 12 | return new Proxy(obj, bashHandlers); 13 | } 14 | -------------------------------------------------------------------------------- /Vue3/demos/demo07/src/reactivity/tests/reactive.spec.ts: -------------------------------------------------------------------------------- 1 | import { reactive } from "../reactive" 2 | 3 | describe('reactive', () => { 4 | it('happy path', () => { 5 | const original = { foo: 1 } 6 | // 初始化响应式对象 7 | const observed = reactive(original) 8 | // 响应式对象不应等于原对象 9 | expect(original).not.toBe(observed) 10 | // 初始化过后响应式对象属性的值应该等于原对象属性的值 11 | expect(original.foo).toBe(observed.foo) 12 | // 设置属性 13 | observed.foo++ 14 | expect(observed.foo).toBe(2) 15 | }) 16 | }) -------------------------------------------------------------------------------- /Vue3/demos/demo07/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign -------------------------------------------------------------------------------- /Vue3/demos/demo08/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo08/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo08", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo08/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | -------------------------------------------------------------------------------- /Vue3/demos/demo09/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo09/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo09", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo09/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | -------------------------------------------------------------------------------- /Vue3/demos/demo10/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo10/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo10", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo10/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo11/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo11/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo11", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo11/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo12/README.md: -------------------------------------------------------------------------------- 1 | # 实现 isProxy 2 | 3 | 1. isProxy 用于判断一个对象是不是使用 Proxy 封装代理 4 | 5 | 6 | ## Run 7 | 8 | ```bash 9 | yarn install 10 | ``` 11 | 12 | ```bash 13 | yarn test 14 | ``` 15 | 16 | ## 具体实现 17 | 18 | reactive.ts 19 | ```ts 20 | export function isProxy(value) { 21 | return isReactive(value) || isReadonly(value) 22 | } 23 | ``` 24 | 25 | 26 | -------------------------------------------------------------------------------- /Vue3/demos/demo12/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo12", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo12/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo13/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo13", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo13/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo14/README.md: -------------------------------------------------------------------------------- 1 | # 实现 isRef 和 unRef 2 | 3 | 1. isRef 用于判断一个对象是否是 Ref 对象 4 | 5 | 1. unRef 用于将 Ref 对象解包（不需要使用.value属性获取值） 6 | 7 | 8 | ## Run 9 | 10 | ```bash 11 | yarn install 12 | ``` 13 | 14 | ```bash 15 | yarn test 16 | ``` 17 | 18 | ## 具体实现 19 | 20 | ref.ts 21 | ```ts 22 | class RefImpl { 23 | // ... 24 | public __v_isRef = true 25 | // ... 26 | } 27 | export function isRef(ref) { 28 | return !!ref.__v_isRef 29 | } 30 | 31 | export function unRef(ref) { 32 | return isRef(ref) ? ref.value : ref 33 | } 34 | ``` 35 | -------------------------------------------------------------------------------- /Vue3/demos/demo14/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo14/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo14", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo14/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo15/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo15/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo15", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo15/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo16/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo16/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo16", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo16/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo17/README.md: -------------------------------------------------------------------------------- 1 | # 实现初始化 component 2 | 3 | 1. 实现初始化 component 流程 4 | 5 | 6 | ## Run 7 | 8 | ```bash 9 | yarn install 10 | ``` 11 | 12 | ```bash 13 | yarn test 14 | ``` 15 | 16 | ## 具体实现 17 | 18 | 见 runtime-core 和 example/helloworld -------------------------------------------------------------------------------- /Vue3/demos/demo17/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo17/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo17", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.17.8", 11 | "@babel/preset-env": "^7.16.11", 12 | "@babel/preset-typescript": "^7.16.7", 13 | "@types/jest": "^27.4.1", 14 | "babel-jest": "^27.5.1", 15 | "jest": "^27.5.1", 16 | "typescript": "^4.6.3" 17 | } 18 | } -------------------------------------------------------------------------------- /Vue3/demos/demo17/src/example/helloworld/App.js: -------------------------------------------------------------------------------- 1 | export const App = { 2 | render() { 3 | return h('div', null, "hi-mini-vue") 4 | }, 5 | setup() { 6 | return { 7 | msg: 'mini-vue' 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /Vue3/demos/demo17/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo17/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | createApp(App).mount('#app') -------------------------------------------------------------------------------- /Vue3/demos/demo17/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo17/src/runtime-core/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/Vue3/demos/demo17/src/runtime-core/index.ts -------------------------------------------------------------------------------- /Vue3/demos/demo17/src/runtime-core/vnode.ts: -------------------------------------------------------------------------------- 1 | export function createVNode(type, props?, children?) { 2 | const vnode = { 3 | type, 4 | props, 5 | children 6 | } 7 | return vnode 8 | } -------------------------------------------------------------------------------- /Vue3/demos/demo17/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo18/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo18/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/example/helloworld/App.js: -------------------------------------------------------------------------------- 1 | import { h } from '../../../lib/guide-mini-vue.esm.js' 2 | 3 | export const App = { 4 | render() { 5 | return h('div', null, "hi-mini-vue") 6 | }, 7 | setup() { 8 | return { 9 | msg: 'mini-vue' 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/runtime-core/vnode.ts: -------------------------------------------------------------------------------- 1 | export function createVNode(type, props?, children?) { 2 | const vnode = { 3 | type, 4 | props, 5 | children 6 | } 7 | return vnode 8 | } -------------------------------------------------------------------------------- /Vue3/demos/demo18/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo19/README.md: -------------------------------------------------------------------------------- 1 | # 实现初始化 element 主流程 2 | 3 | 4 | 5 | ## Run 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ```bash 12 | yarn build --watch 13 | ``` 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo19/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo19/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/example/helloworld/App.js: -------------------------------------------------------------------------------- 1 | import { h } from '../../../lib/guide-mini-vue.esm.js' 2 | 3 | export const App = { 4 | render() { 5 | return h('div', { 6 | id:'root', 7 | class:["red","hard"] 8 | }, [ 9 | "hi", 10 | h('div',{ 11 | class:'red' 12 | },'mini-vue') 13 | ]) 14 | }, 15 | setup() { 16 | return { 17 | msg: 'mini-vue' 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/runtime-core/vnode.ts: -------------------------------------------------------------------------------- 1 | export function createVNode(type, props?, children?) { 2 | const vnode = { 3 | type, 4 | props, 5 | children 6 | } 7 | return vnode 8 | } -------------------------------------------------------------------------------- /Vue3/demos/demo19/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo20/README.md: -------------------------------------------------------------------------------- 1 | # 实现组件代理对象 2 | 3 | 实现组件化代理对象 4 | 5 | ## Run 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ```bash 12 | yarn build --watch 13 | ``` 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo20/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo20/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/example/helloworld/App.js: -------------------------------------------------------------------------------- 1 | import { h } from '../../../lib/guide-mini-vue.esm.js' 2 | 3 | export const App = { 4 | render() { 5 | return h('div', { 6 | id: 'root', 7 | class: ["red", "hard"] 8 | }, [ 9 | "hi", 10 | h('div', { 11 | class: 'red' 12 | }, this.msg) 13 | ]) 14 | }, 15 | setup() { 16 | return { 17 | msg: 'mini-vue' 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/runtime-core/componentPublicInstance.ts: -------------------------------------------------------------------------------- 1 | const publicPropertiesMap = { 2 | $el: (i) => i.vnode.el 3 | } 4 | 5 | export const PublicInstanceProxyHandlers = { 6 | get({ _: instance }, key) { 7 | const { setupState } = instance 8 | if (key in setupState) { 9 | return setupState[key] 10 | } 11 | const publicGetter = publicPropertiesMap[key] 12 | if (publicGetter) { 13 | return publicGetter(instance) 14 | } 15 | 16 | // setup -> options data 17 | // $data 18 | } 19 | } -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/runtime-core/vnode.ts: -------------------------------------------------------------------------------- 1 | export function createVNode(type, props?, children?) { 2 | const vnode = { 3 | type, 4 | props, 5 | children, 6 | el: null 7 | } 8 | return vnode 9 | } -------------------------------------------------------------------------------- /Vue3/demos/demo20/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo21/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo21/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/example/helloworld/App.js: -------------------------------------------------------------------------------- 1 | import { h } from '../../../lib/guide-mini-vue.esm.js' 2 | 3 | export const App = { 4 | render() { 5 | return h('div', { 6 | id: 'root', 7 | class: ["red", "hard"] 8 | }, [ 9 | "hi", 10 | h('div', { 11 | class: 'red' 12 | }, this.msg) 13 | ]) 14 | }, 15 | setup() { 16 | return { 17 | msg: 'mini-vue shapFlag' 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/runtime-core/componentPublicInstance.ts: -------------------------------------------------------------------------------- 1 | const publicPropertiesMap = { 2 | $el: (i) => i.vnode.el 3 | } 4 | 5 | export const PublicInstanceProxyHandlers = { 6 | get({ _: instance }, key) { 7 | const { setupState } = instance 8 | if (key in setupState) { 9 | return setupState[key] 10 | } 11 | const publicGetter = publicPropertiesMap[key] 12 | if (publicGetter) { 13 | return publicGetter(instance) 14 | } 15 | 16 | // setup -> options data 17 | // $data 18 | } 19 | } -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 0010 4 | TEXT_CHILDREN = 1 << 2, // 0100 5 | ARRAY_CHILDREN = 1 << 3 // 1000 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo21/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo22/README.md: -------------------------------------------------------------------------------- 1 | # 实现注册事件功能 2 | 3 | 实现注册事件功能 4 | 5 | 6 | 在组件上绑定了 onClick 事件以及 onMousedown 事件 7 | 8 | ## Run 9 | 10 | ```bash 11 | yarn install 12 | ``` 13 | 14 | ```bash 15 | yarn build --watch 16 | ``` 17 | 18 | 19 | -------------------------------------------------------------------------------- /Vue3/demos/demo22/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo22/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/runtime-core/componentPublicInstance.ts: -------------------------------------------------------------------------------- 1 | const publicPropertiesMap = { 2 | $el: (i) => i.vnode.el 3 | } 4 | 5 | export const PublicInstanceProxyHandlers = { 6 | get({ _: instance }, key) { 7 | const { setupState } = instance 8 | if (key in setupState) { 9 | return setupState[key] 10 | } 11 | const publicGetter = publicPropertiesMap[key] 12 | if (publicGetter) { 13 | return publicGetter(instance) 14 | } 15 | 16 | // setup -> options data 17 | // $data 18 | } 19 | } -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 0010 4 | TEXT_CHILDREN = 1 << 2, // 0100 5 | ARRAY_CHILDREN = 1 << 3 // 1000 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo22/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo23/README.md: -------------------------------------------------------------------------------- 1 | # 实现组件props功能 2 | 3 | 实现组件props功能 4 | 5 | 6 | ## Run 7 | 8 | ```bash 9 | yarn install 10 | ``` 11 | 12 | ```bash 13 | yarn build --watch 14 | ``` 15 | 16 | 17 | -------------------------------------------------------------------------------- /Vue3/demos/demo23/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo23/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/example/helloworld/Foo.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const Foo = { 3 | setup(props) { 4 | console.log(props); 5 | }, 6 | render() { 7 | console.log("this=>", this); 8 | return h("div", {}, "foo:" + this.count); 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 0010 4 | TEXT_CHILDREN = 1 << 2, // 0100 5 | ARRAY_CHILDREN = 1 << 3 // 1000 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo23/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo24/README.md: -------------------------------------------------------------------------------- 1 | # 实现组件emit功能 2 | 3 | 实现组件emit功能 4 | 5 | 6 | ## Run 7 | 8 | ```bash 9 | yarn install 10 | ``` 11 | 12 | ```bash 13 | yarn build --watch 14 | ``` 15 | 16 | 17 | -------------------------------------------------------------------------------- /Vue3/demos/demo24/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo24/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/example/componentEmit/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { Foo } from "./Foo.js"; 3 | export const App = { 4 | name: "App", 5 | render() { 6 | return h("div", {}, [ 7 | h("div", {}, "App"), 8 | h(Foo, { 9 | onAdd(a, b) { 10 | console.log("on Add", a, b); 11 | }, 12 | onAddFoo() { 13 | console.log("onAddFoo"); 14 | }, 15 | }), 16 | ]); 17 | }, 18 | setup() { 19 | return { 20 | msg: "mini-vue shapFlag", 21 | }; 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/example/componentEmit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/example/componentEmit/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/example/helloworld/Foo.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const Foo = { 3 | setup(props) { 4 | console.log(props); 5 | }, 6 | render() { 7 | console.log("this=>", this); 8 | return h("div", {}, "foo:" + this.count); 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 0010 4 | TEXT_CHILDREN = 1 << 2, // 0100 5 | ARRAY_CHILDREN = 1 << 3 // 1000 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo24/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo25/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo25/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/componentEmit/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { Foo } from "./Foo.js"; 3 | export const App = { 4 | name: "App", 5 | render() { 6 | return h("div", {}, [ 7 | h("div", {}, "App"), 8 | h(Foo, { 9 | onAdd(a, b) { 10 | console.log("on Add", a, b); 11 | }, 12 | onAddFoo() { 13 | console.log("onAddFoo"); 14 | }, 15 | }), 16 | ]); 17 | }, 18 | setup() { 19 | return { 20 | msg: "mini-vue shapFlag", 21 | }; 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/componentEmit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/componentEmit/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/componentSlot/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { Foo } from "./Foo.js"; 3 | export const App = { 4 | name: "App", 5 | render() { 6 | const app = h("div", {}, "App"); 7 | const foo = h( 8 | Foo, 9 | {}, 10 | { 11 | header: ({ age }) => h("p", {}, "header" + age), 12 | footer: () => h("p", {}, "footer"), 13 | } 14 | ); 15 | return h("div", {}, [app, foo]); 16 | }, 17 | setup() { 18 | return { 19 | msg: "mini-vue shapFlag", 20 | }; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/componentSlot/Foo.js: -------------------------------------------------------------------------------- 1 | import { h, renderSlots } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const Foo = { 3 | setup() { 4 | return {}; 5 | }, 6 | render() { 7 | const foo = h("p", {}, "foo"); 8 | const age = 18; 9 | return h("div", {}, [ 10 | renderSlots(this.$slots, "header", { age }), 11 | foo, 12 | renderSlots(this.$slots, "footer"), 13 | ]); 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/componentSlot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/componentSlot/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/helloworld/Foo.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const Foo = { 3 | setup(props) { 4 | console.log(props); 5 | }, 6 | render() { 7 | console.log("this=>", this); 8 | return h("div", {}, "foo:" + this.count); 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from "../vnode"; 2 | 3 | 4 | export function renderSlots(slots, name, props){ 5 | const slot = slots[name] 6 | if(slot){ 7 | if( typeof slot ==='function' ){ 8 | return createVNode('div',{},slot(props)) 9 | } 10 | } 11 | return {} 12 | } -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h } from './h' 3 | export { renderSlots } from './helpers/renderSlots' -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo25/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo26/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo26/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/componentEmit/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { Foo } from "./Foo.js"; 3 | export const App = { 4 | name: "App", 5 | render() { 6 | return h("div", {}, [ 7 | h("div", {}, "App"), 8 | h(Foo, { 9 | onAdd(a, b) { 10 | console.log("on Add", a, b); 11 | }, 12 | onAddFoo() { 13 | console.log("onAddFoo"); 14 | }, 15 | }), 16 | ]); 17 | }, 18 | setup() { 19 | return { 20 | msg: "mini-vue shapFlag", 21 | }; 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/componentEmit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/componentEmit/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/componentSlot/Foo.js: -------------------------------------------------------------------------------- 1 | import { h, renderSlots } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const Foo = { 3 | setup() { 4 | return {}; 5 | }, 6 | render() { 7 | const foo = h("p", {}, "foo"); 8 | const age = 18; 9 | return h("div", {}, [ 10 | renderSlots(this.$slots, "header", { age }), 11 | foo, 12 | renderSlots(this.$slots, "footer"), 13 | ]); 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/componentSlot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/componentSlot/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/helloworld/Foo.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const Foo = { 3 | setup(props) { 4 | console.log(props); 5 | }, 6 | render() { 7 | console.log("this=>", this); 8 | return h("div", {}, "foo:" + this.count); 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/example/helloworld/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo26/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo27/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo27/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/example/currentInstance/App.js: -------------------------------------------------------------------------------- 1 | import { h, getCurrentInstance } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { Foo } from "./Foo.js"; 3 | export const App = { 4 | name: "App", 5 | render() { 6 | return h("div", {}, [h("p", {}, "currentInstance demo"), h(Foo)]); 7 | }, 8 | setup() { 9 | const instance = getCurrentInstance(); 10 | console.log("App:", instance); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/example/currentInstance/Foo.js: -------------------------------------------------------------------------------- 1 | import { h, getCurrentInstance } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const Foo = { 3 | name: "Foo", 4 | setup() { 5 | const instance = getCurrentInstance(); 6 | console.log("Foo:", instance); 7 | return {}; 8 | }, 9 | render() { 10 | return h("div", {}, "foo"); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/example/currentInstance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/example/currentInstance/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { getCurrentInstance } from './component' 3 | export { h, createTextVNode } from './h' 4 | export { renderSlots } from './helpers/renderSlots' -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo27/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo28/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo28/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | 3 | export * from './runtime-core' 4 | -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | import { render } from './renderer' 5 | export function createApp(rootComponent) { 6 | return { 7 | mount(rootContainer) { 8 | // 先把组件转换为虚拟节点 9 | const vnode = createVNode(rootComponent) 10 | 11 | render(vnode, rootContainer) 12 | } 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './createApp' 2 | export { getCurrentInstance } from './component' 3 | export { h, createTextVNode } from './h' 4 | export { renderSlots } from './helpers/renderSlots' 5 | export { provide, inject } from './apiInject' -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo28/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo29/README.md: -------------------------------------------------------------------------------- 1 | # 实现自定义渲染器 custom renderer 2 | 3 | 打开 tsconfig.json 里面的 `moduleResolution` 以 `node` 的方式解析路径 4 | 5 | ## 一个canvas库 6 | 7 | PixiJS 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | ## Run 14 | 15 | ```bash 16 | yarn install 17 | ``` 18 | 19 | ```bash 20 | yarn build --watch 21 | ``` 22 | 23 | 24 | -------------------------------------------------------------------------------- /Vue3/demos/demo29/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo29/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo29/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo30/README.md: -------------------------------------------------------------------------------- 1 | # 更新 element 流程搭建 2 | 3 | 4 | ## Run 5 | 6 | ```bash 7 | yarn install 8 | ``` 9 | 10 | ```bash 11 | yarn build --watch 12 | ``` 13 | 14 | 15 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo30/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/example/update/App.js: -------------------------------------------------------------------------------- 1 | import { h, ref } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | name: "App", 4 | setup() { 5 | const count = ref(0); 6 | const onClick = () => { 7 | count.value++; 8 | }; 9 | return { 10 | count, 11 | onClick, 12 | }; 13 | }, 14 | render() { 15 | return h("div", { id: "root" }, [ 16 | h("div", {}, "count:" + this.count), 17 | h("button", { onClick: this.onClick }, "click"), 18 | ]); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' 6 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo30/src/shared/index.ts: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign 2 | 3 | 4 | export function isObject(val) { 5 | return val !== null && typeof val === 'object' 6 | } 7 | 8 | 9 | export const hasChanged = (val, newValue) => { 10 | return !Object.is(val, newValue) 11 | } 12 | 13 | export const hasOwn = (val,key)=>Object.prototype.hasOwnProperty.call(val,key) -------------------------------------------------------------------------------- /Vue3/demos/demo31/README.md: -------------------------------------------------------------------------------- 1 | # 更新 element 的 props 2 | 3 | 4 | 5 | ## Run 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ```bash 12 | yarn build --watch 13 | ``` 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo31/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo31/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/runtime-core/componentEmit.ts: -------------------------------------------------------------------------------- 1 | import { tohandlerKey } from "../shared" 2 | 3 | export function emit(instance,event, ...args){ 4 | const { props } = instance 5 | const camelize = (str:string)=>{ 6 | return str.replace(/-(\w)/g,(_,c:string)=>{ 7 | return c ? c.toUpperCase():'' 8 | }) 9 | } 10 | 11 | const handleName = tohandlerKey(camelize(event)) 12 | const handler = props[handleName] 13 | handler && handler(...args) 14 | } -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' 6 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo31/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo32/README.md: -------------------------------------------------------------------------------- 1 | # 更新 element 的 children 2 | 3 | 4 | 5 | ## Run 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ```bash 12 | yarn build --watch 13 | ``` 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo32/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/patchChildren/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | // import TextToText from './TextToText.js' 4 | // import TextToArray from "./TextToArray.js"; 5 | // import ArrayToArray from './ArrayToArray.js' 6 | import ArrayToText from "./ArrayToText.js"; 7 | 8 | export const App = { 9 | name: "App", 10 | setup() {}, 11 | render() { 12 | return h("div", { tId: 1 }, [ 13 | h("p", {}, "主页"), 14 | h(ArrayToText), 15 | // h(TextToArray), 16 | // h(ArrayToArray), 17 | ]); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/patchChildren/ArrayToArray.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = [h("div", {}, "C")]; 3 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")]; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/patchChildren/ArrayToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "newChildren"; 3 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")]; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/patchChildren/TextToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "nextText"; 3 | const prevChildren = "text"; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/patchChildren/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/runtime-core/componentEmit.ts: -------------------------------------------------------------------------------- 1 | import { tohandlerKey } from "../shared" 2 | 3 | export function emit(instance,event, ...args){ 4 | const { props } = instance 5 | const camelize = (str:string)=>{ 6 | return str.replace(/-(\w)/g,(_,c:string)=>{ 7 | return c ? c.toUpperCase():'' 8 | }) 9 | } 10 | 11 | const handleName = tohandlerKey(camelize(event)) 12 | const handler = props[handleName] 13 | handler && handler(...args) 14 | } -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' 6 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo32/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo33/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo33/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/patchChildren/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | // import TextToText from './TextToText.js' 4 | // import TextToArray from "./TextToArray.js"; 5 | import ArrayToArray from "./ArrayToArray.js"; 6 | // import ArrayToText from "./ArrayToText.js"; 7 | 8 | export const App = { 9 | name: "App", 10 | setup() {}, 11 | render() { 12 | return h("div", { tId: 1 }, [ 13 | h("p", {}, "主页"), 14 | // h(ArrayToText), 15 | // h(TextToArray), 16 | h(ArrayToArray), 17 | ]); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/patchChildren/ArrayToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "newChildren"; 3 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")]; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/patchChildren/TextToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "nextText"; 3 | const prevChildren = "text"; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/patchChildren/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/runtime-core/componentEmit.ts: -------------------------------------------------------------------------------- 1 | import { tohandlerKey } from "../shared" 2 | 3 | export function emit(instance,event, ...args){ 4 | const { props } = instance 5 | const camelize = (str:string)=>{ 6 | return str.replace(/-(\w)/g,(_,c:string)=>{ 7 | return c ? c.toUpperCase():'' 8 | }) 9 | } 10 | 11 | const handleName = tohandlerKey(camelize(event)) 12 | const handler = props[handleName] 13 | handler && handler(...args) 14 | } -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' 6 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo33/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo34/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo34/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/patchChildren/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | // import TextToText from './TextToText.js' 4 | // import TextToArray from "./TextToArray.js"; 5 | import ArrayToArray from "./ArrayToArray.js"; 6 | // import ArrayToText from "./ArrayToText.js"; 7 | 8 | export const App = { 9 | name: "App", 10 | setup() {}, 11 | render() { 12 | return h("div", { tId: 1 }, [ 13 | h("p", {}, "主页"), 14 | // h(ArrayToText), 15 | // h(TextToArray), 16 | h(ArrayToArray), 17 | ]); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/patchChildren/ArrayToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "newChildren"; 3 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")]; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/patchChildren/TextToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "nextText"; 3 | const prevChildren = "text"; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/patchChildren/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/runtime-core/componentEmit.ts: -------------------------------------------------------------------------------- 1 | import { tohandlerKey } from "../shared" 2 | 3 | export function emit(instance,event, ...args){ 4 | const { props } = instance 5 | const camelize = (str:string)=>{ 6 | return str.replace(/-(\w)/g,(_,c:string)=>{ 7 | return c ? c.toUpperCase():'' 8 | }) 9 | } 10 | 11 | const handleName = tohandlerKey(camelize(event)) 12 | const handler = props[handleName] 13 | handler && handler(...args) 14 | } -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' 6 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo34/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo35/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo35/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/patchChildren/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | // import TextToText from './TextToText.js' 4 | // import TextToArray from "./TextToArray.js"; 5 | import ArrayToArray from "./ArrayToArray.js"; 6 | // import ArrayToText from "./ArrayToText.js"; 7 | 8 | export const App = { 9 | name: "App", 10 | setup() {}, 11 | render() { 12 | return h("div", { tId: 1 }, [ 13 | h("p", {}, "主页"), 14 | // h(ArrayToText), 15 | // h(TextToArray), 16 | h(ArrayToArray), 17 | ]); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/patchChildren/ArrayToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "newChildren"; 3 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")]; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/patchChildren/TextToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "nextText"; 3 | const prevChildren = "text"; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/patchChildren/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/runtime-core/componentEmit.ts: -------------------------------------------------------------------------------- 1 | import { tohandlerKey } from "../shared" 2 | 3 | export function emit(instance,event, ...args){ 4 | const { props } = instance 5 | const camelize = (str:string)=>{ 6 | return str.replace(/-(\w)/g,(_,c:string)=>{ 7 | return c ? c.toUpperCase():'' 8 | }) 9 | } 10 | 11 | const handleName = tohandlerKey(camelize(event)) 12 | const handler = props[handleName] 13 | handler && handler(...args) 14 | } -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' 6 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo35/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/README.md: -------------------------------------------------------------------------------- 1 | # 实现组件更新功能 2 | 3 | 4 | 5 | ## Run 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ```bash 12 | yarn build --watch 13 | ``` 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/componentUpdate/Child.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | export default { 4 | name:'Child', 5 | setup(){}, 6 | render(proxy){ 7 | return h('div',{},[h('div',{},'child - props - msg: ' + this.$props.msg)]) 8 | } 9 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/componentUpdate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/componentUpdate/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/patchChildren/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | // import TextToText from './TextToText.js' 4 | // import TextToArray from "./TextToArray.js"; 5 | import ArrayToArray from "./ArrayToArray.js"; 6 | // import ArrayToText from "./ArrayToText.js"; 7 | 8 | export const App = { 9 | name: "App", 10 | setup() {}, 11 | render() { 12 | return h("div", { tId: 1 }, [ 13 | h("p", {}, "主页"), 14 | // h(ArrayToText), 15 | // h(TextToArray), 16 | h(ArrayToArray), 17 | ]); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/patchChildren/ArrayToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "newChildren"; 3 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")]; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/patchChildren/TextToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "nextText"; 3 | const prevChildren = "text"; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/patchChildren/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/runtime-core/componentEmit.ts: -------------------------------------------------------------------------------- 1 | import { tohandlerKey } from "../shared" 2 | 3 | export function emit(instance,event, ...args){ 4 | const { props } = instance 5 | const camelize = (str:string)=>{ 6 | return str.replace(/-(\w)/g,(_,c:string)=>{ 7 | return c ? c.toUpperCase():'' 8 | }) 9 | } 10 | 11 | const handleName = tohandlerKey(camelize(event)) 12 | const handler = props[handleName] 13 | handler && handler(...args) 14 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/runtime-core/componentUpdateUtils.ts: -------------------------------------------------------------------------------- 1 | export function shouldUpdateComponent(n1, n2){ 2 | const { props: prevProps } = n1 3 | const { props: nextProps } = n2 4 | for(const key in nextProps){ 5 | if(nextProps[key]!==prevProps[key]){ 6 | return true 7 | } 8 | } 9 | return false 10 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | export { createTextVNode } from './vnode' 2 | import { createVNode } from './vnode' 3 | export function h(type, props?, children?) { 4 | return createVNode(type, props, children) 5 | } 6 | -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h, createTextVNode } from './h' 3 | export { renderSlots } from './helpers/renderSlots' 4 | export { provide, inject } from './apiInject' 5 | export { createRenderer } from './renderer' 6 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo36/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/README.md: -------------------------------------------------------------------------------- 1 | # 实现nextTick功能 2 | 3 | 4 | ## Run 5 | 6 | ```bash 7 | yarn install 8 | ``` 9 | 10 | ```bash 11 | yarn build --watch 12 | ``` 13 | 14 | 15 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/apiInject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/apiInject/main.js: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from '../../../lib/guide-mini-vue.esm.js' 3 | import { App } from './App.js' 4 | const root = document.querySelector('#app') 5 | createApp(App).mount(root) -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/componentUpdate/Child.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | export default { 4 | name:'Child', 5 | setup(){}, 6 | render(proxy){ 7 | return h('div',{},[h('div',{},'child - props - msg: ' + this.$props.msg)]) 8 | } 9 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/componentUpdate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/componentUpdate/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/customRenderer/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | export const App = { 3 | setup() { 4 | return { 5 | x: 100, 6 | y: 100, 7 | }; 8 | }, 9 | render() { 10 | return h("rect", { x: this.x, y: this.y }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/nextTick/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/patchChildren/App.js: -------------------------------------------------------------------------------- 1 | import { h } from "../../../lib/guide-mini-vue.esm.js"; 2 | 3 | // import TextToText from './TextToText.js' 4 | // import TextToArray from "./TextToArray.js"; 5 | import ArrayToArray from "./ArrayToArray.js"; 6 | // import ArrayToText from "./ArrayToText.js"; 7 | 8 | export const App = { 9 | name: "App", 10 | setup() {}, 11 | render() { 12 | return h("div", { tId: 1 }, [ 13 | h("p", {}, "主页"), 14 | // h(ArrayToText), 15 | // h(TextToArray), 16 | h(ArrayToArray), 17 | ]); 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/patchChildren/ArrayToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "newChildren"; 3 | const prevChildren = [h("div", {}, "A"), h("div", {}, "B")]; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/patchChildren/TextToText.js: -------------------------------------------------------------------------------- 1 | import { ref, h } from "../../../lib/guide-mini-vue.esm.js"; 2 | const nextChildren = "nextText"; 3 | const prevChildren = "text"; 4 | 5 | export default { 6 | name: "ArrayToText", 7 | setup() { 8 | const isChange = ref(false); 9 | window.isChange = isChange; 10 | return { 11 | isChange, 12 | }; 13 | }, 14 | render() { 15 | const self = this; 16 | return self.isChange === true 17 | ? h("div", {}, nextChildren) 18 | : h("div", {}, prevChildren); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/patchChildren/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/example/update/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "../../../lib/guide-mini-vue.esm.js"; 2 | import { App } from "./App.js"; 3 | 4 | createApp(App).mount(document.querySelector("#app")); 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/index.ts: -------------------------------------------------------------------------------- 1 | // mini-vue 的出口 2 | export * from './runtime-dom' 3 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/reactivity/index.ts: -------------------------------------------------------------------------------- 1 | export { ref, proxyRefs } from './ref' -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/componentEmit.ts: -------------------------------------------------------------------------------- 1 | import { tohandlerKey } from "../shared" 2 | 3 | export function emit(instance,event, ...args){ 4 | const { props } = instance 5 | const camelize = (str:string)=>{ 6 | return str.replace(/-(\w)/g,(_,c:string)=>{ 7 | return c ? c.toUpperCase():'' 8 | }) 9 | } 10 | 11 | const handleName = tohandlerKey(camelize(event)) 12 | const handler = props[handleName] 13 | handler && handler(...args) 14 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/componentProps.ts: -------------------------------------------------------------------------------- 1 | export function initProps (instance, rawProps){ 2 | instance.props = rawProps || {} 3 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/componentUpdateUtils.ts: -------------------------------------------------------------------------------- 1 | export function shouldUpdateComponent(n1, n2){ 2 | const { props: prevProps } = n1 3 | const { props: nextProps } = n2 4 | for(const key in nextProps){ 5 | if(nextProps[key]!==prevProps[key]){ 6 | return true 7 | } 8 | } 9 | return false 10 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/createApp.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { createVNode } from './vnode' 4 | 5 | export function createAppAPI(render){ 6 | return function createApp(rootComponent) { 7 | return { 8 | mount(rootContainer) { 9 | // 先把组件转换为虚拟节点 10 | const vnode = createVNode(rootComponent) 11 | 12 | render(vnode, rootContainer) 13 | } 14 | } 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/h.ts: -------------------------------------------------------------------------------- 1 | import { createVNode } from './vnode' 2 | export function h(type, props?, children?) { 3 | return createVNode(type, props, children) 4 | } 5 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/helpers/renderSlots.ts: -------------------------------------------------------------------------------- 1 | import { createVNode, Fragment } from "../vnode"; 2 | 3 | export function renderSlots(slots, name, props){ 4 | const slot = slots[name] 5 | if(slot){ 6 | if( typeof slot ==='function' ){ 7 | return createVNode(Fragment,{},slot(props)) 8 | } 9 | } 10 | return {} 11 | } -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/index.ts: -------------------------------------------------------------------------------- 1 | export { getCurrentInstance } from './component' 2 | export { h } from './h' 3 | export { createTextVNode } from './vnode' 4 | export { renderSlots } from './helpers/renderSlots' 5 | export { provide, inject } from './apiInject' 6 | export { createRenderer } from './renderer' 7 | export { nextTick } from './scheduler' 8 | export * from '../reactivity' -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/runtime-core/scheduler.ts: -------------------------------------------------------------------------------- 1 | const queue:any[] = [] 2 | 3 | let isFlushPending = false 4 | 5 | const p = Promise.resolve() 6 | 7 | export function nextTick(fn){ 8 | return fn ? p.then(fn) : p 9 | } 10 | 11 | export function queueJobs(job){ 12 | if(isFlushPending) return 13 | isFlushPending = true 14 | if(!queue.includes(job)){ 15 | queue.push(job) 16 | } 17 | 18 | nextTick(()=>{ 19 | isFlushPending = false 20 | let job; 21 | while(job = queue.shift()){ 22 | job && job() 23 | } 24 | }) 25 | } 26 | 27 | -------------------------------------------------------------------------------- /Vue3/demos/demo37/src/shared/ShapeFlags.ts: -------------------------------------------------------------------------------- 1 | export const enum ShapeFlags { 2 | ELEMENT = 1, // 0001 3 | STATEFUL_COMPONENT = 1 << 1, // 00010 4 | TEXT_CHILDREN = 1 << 2, // 00100 5 | ARRAY_CHILDREN = 1 << 3, // 01000 6 | SLOT_CHILDREN = 1 << 4 // 10000 7 | } -------------------------------------------------------------------------------- /Vue3/demos/demo38/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo38/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo38/src/compiler-core/src/ast.ts: -------------------------------------------------------------------------------- 1 | export const enum NodeTypes { 2 | INTERPOLATION, 3 | SIMPLE_EXPRETION, 4 | } -------------------------------------------------------------------------------- /Vue3/demos/demo39/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo39/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo39/src/compiler-core/src/ast.ts: -------------------------------------------------------------------------------- 1 | export const enum NodeTypes { 2 | INTERPOLATION, 3 | SIMPLE_EXPRETION, 4 | ELEMENT 5 | } -------------------------------------------------------------------------------- /Vue3/demos/demo40/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo40/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo40/src/compiler-core/src/ast.ts: -------------------------------------------------------------------------------- 1 | export const enum NodeTypes { 2 | INTERPOLATION, 3 | SIMPLE_EXPRETION, 4 | ELEMENT, 5 | TEXT 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo41/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo41/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo41/src/compiler-core/src/ast.ts: -------------------------------------------------------------------------------- 1 | export const enum NodeTypes { 2 | INTERPOLATION, 3 | SIMPLE_EXPRETION, 4 | ELEMENT, 5 | TEXT 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo42/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo42/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo42/src/compiler-core/src/ast.ts: -------------------------------------------------------------------------------- 1 | export const enum NodeTypes { 2 | INTERPOLATION, 3 | SIMPLE_EXPRETION, 4 | ELEMENT, 5 | TEXT 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo43/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo43/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo43/src/compiler-core/src/ast.ts: -------------------------------------------------------------------------------- 1 | export const enum NodeTypes { 2 | INTERPOLATION, 3 | SIMPLE_EXPRETION, 4 | ELEMENT, 5 | TEXT 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo44/README.md: -------------------------------------------------------------------------------- 1 | # 实现代码生成 string 类型 2 | 3 | 4 | 5 | ## Run 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ```bash 12 | yarn test --watch 13 | ``` 14 | 15 | 16 | -------------------------------------------------------------------------------- /Vue3/demos/demo44/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { targets: { node: 'current' } }], 4 | '@babel/preset-typescript', 5 | ], 6 | } -------------------------------------------------------------------------------- /Vue3/demos/demo44/rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json' 2 | import typescript from '@rollup/plugin-typescript' 3 | export default { 4 | input: './src/index.ts', // 配置入口 5 | output: [ // 配置出口 6 | // 1. cjs -> commonjs 7 | // 2. esm 8 | { 9 | format: 'cjs', 10 | file: pkg.main 11 | }, 12 | { 13 | format: 'es', 14 | file: pkg.module 15 | } 16 | ], 17 | plugins: [ // 转换ts @rollup/plugin-typescript 18 | typescript() 19 | ] 20 | } -------------------------------------------------------------------------------- /Vue3/demos/demo44/src/compiler-core/src/ast.ts: -------------------------------------------------------------------------------- 1 | export const enum NodeTypes { 2 | INTERPOLATION, 3 | SIMPLE_EXPRETION, 4 | ELEMENT, 5 | TEXT 6 | } -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import VueRouter from 'vue-router' 4 | import routes from './router-config' 5 | 6 | Vue.use(VueRouter) 7 | 8 | const router = new VueRouter({ 9 | routes, 10 | }) 11 | 12 | new Vue({ 13 | el:'#app', 14 | router, 15 | components:{ 16 | App, 17 | }, 18 | template:'' 19 | }) -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/src/pages/home.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/src/router-config.js: -------------------------------------------------------------------------------- 1 | const Home = () => import('./pages/home') 2 | const Page1 = () => import('./routes/page1') 3 | const Page2 = () => import('./routes/page2') 4 | const Page3 = () => import('./routes/page3') 5 | export default [ 6 | { path:'/', component: Home }, 7 | { path:'/page1', component: Page1 }, 8 | { path:'/page2', component: Page2 }, 9 | { path:'/page3', component: Page3 }, 10 | ] -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/src/routes/page1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/src/routes/page2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /VueRouter/demos/Router-Loaded-On-Demand/src/routes/page3.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/README.md: -------------------------------------------------------------------------------- 1 | # run tips 2 | 3 | ## 1 install system devDependencies 4 | 5 | ```bash 6 | npm i webpack -g 7 | npm i webpack-dev-server -g 8 | ``` 9 | 10 | ## 2 install dependencies 11 | 12 | ```bash 13 | npm i 14 | ``` 15 | 16 | ## 3 run 17 | 18 | ```bash 19 | npm run dev 20 | ``` -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import VueRouter from 'vue-router' 4 | import routes from './router-config' 5 | 6 | Vue.use(VueRouter) 7 | 8 | const router = new VueRouter({ 9 | routes, 10 | }) 11 | 12 | new Vue({ 13 | el:'#app', 14 | router, 15 | components:{ 16 | App, 17 | }, 18 | template:'' 19 | }) -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/src/pages/home.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/src/router-config.js: -------------------------------------------------------------------------------- 1 | import page1 from './routes/page1' 2 | import page2 from './routes/page2' 3 | import page3 from './routes/page3' 4 | import home from './pages/home' 5 | export default [ 6 | { path:'/', component: home }, 7 | { path:'/page1', component: page1 }, 8 | { path:'/page2', component: page2 }, 9 | { path:'/page3', component: page3 }, 10 | ] -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/src/routes/page1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/src/routes/page2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /VueRouter/demos/configRouter/src/routes/page3.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /ant-design-vue1.7.8/debugger.less: -------------------------------------------------------------------------------- 1 | ::v-deep .ant-table-hide-scrollbar { 2 | overflow-y: hidden !important; 3 | // padding-right: 8px; /* 根据需要调整，以确保表头和内容对齐 */ 4 | padding-bottom: 0 !important; 5 | } 6 | ::v-deep .ant-table-body { 7 | scrollbar-width: none; /* Firefox */ 8 | -ms-overflow-style: none; /* IE 10+ */ 9 | } 10 | ::v-deep .ant-table-body::-webkit-scrollbar { 11 | display: none; /* Chrome, Safari, Edge */ 12 | } 13 | -------------------------------------------------------------------------------- /es6/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/.DS_Store -------------------------------------------------------------------------------- /es6/README.md: -------------------------------------------------------------------------------- 1 | # 简介 2 | ES6是ECMAScript 6.0 的简称 是JavaScript 语言2015年6月制定的标准，他的目标是使得JS可以用来编写复杂的大型应用程序，成为企业级开发语言。 3 | 4 | 本仓库提供的是阮一峰大师的es6入门的简单拷贝 原资料地址： 5 | http://es6.ruanyifeng.com/ 6 | 7 | -------------------------------------------------------------------------------- /es6/Tools/assign.js: -------------------------------------------------------------------------------- 1 | function assign(){ 2 | var e = arguments[0] 3 | for(var t=1;t 2 | 3 | 4 | 5 | 6 | 7 | Learn decorator 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /es6/promsie/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/.DS_Store -------------------------------------------------------------------------------- /es6/promsie/demo/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/.DS_Store -------------------------------------------------------------------------------- /es6/promsie/demo/README.md: -------------------------------------------------------------------------------- 1 | # 如何运行demo 2 | 3 | ```bash 4 | git clone https://github.com/PsChina/Vue.git 5 | 6 | npm i http-server -g ## (mac sudo npm i http-server -g) 7 | 8 | cd ./Vue/ES6/promise/demo 9 | 10 | http-server 11 | ``` 12 | 13 | __在浏览器输入 http://localhost:8080__ -------------------------------------------------------------------------------- /es6/promsie/demo/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/favicon.ico -------------------------------------------------------------------------------- /es6/promsie/demo/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/.DS_Store -------------------------------------------------------------------------------- /es6/promsie/demo/images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/add.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/alipay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/alipay.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/bank-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/bank-card.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/cash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/cash.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/catch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/catch.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/club-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/club-card.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/credits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/credits.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/no-catch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/no-catch.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/top1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/top1.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/top2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/top2.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/top3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/top3.png -------------------------------------------------------------------------------- /es6/promsie/demo/images/wechatpay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/promsie/demo/images/wechatpay.png -------------------------------------------------------------------------------- /es6/s-Day2 数组的扩展.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/es6/s-Day2 数组的扩展.md -------------------------------------------------------------------------------- /images/range-picker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/images/range-picker.gif -------------------------------------------------------------------------------- /images/time-picker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/images/time-picker.jpg -------------------------------------------------------------------------------- /vue-env/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vetur.experimental.templateInterpolationService": true, 3 | "javascript.implicitProjectConfig.experimentalDecorators": true 4 | } -------------------------------------------------------------------------------- /vue-env/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true 4 | } 5 | } -------------------------------------------------------------------------------- /vue-env/src/component.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 17 | -------------------------------------------------------------------------------- /vue-env/src/demo.ts: -------------------------------------------------------------------------------- 1 | interface printer { 2 | print():void 3 | } 4 | 5 | 6 | class A implements printer { 7 | constructor(){ 8 | console.log('You Initialize a instance a') 9 | } 10 | print(){ 11 | 12 | } 13 | } 14 | 15 | export default A -------------------------------------------------------------------------------- /vue-env/src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /vue-env/src/less.less: -------------------------------------------------------------------------------- 1 | @redColor: red; 2 | 3 | body{ 4 | background: @redColor; 5 | } -------------------------------------------------------------------------------- /vue-env/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | // import './less.less' 3 | // import './scss.scss' 4 | import App from './App.vue' 5 | 6 | import A from './demo' 7 | 8 | new A() 9 | 10 | new Vue({ 11 | el: '#app', 12 | render(h){ 13 | return h(App) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /vue-env/src/scss.scss: -------------------------------------------------------------------------------- 1 | $greenColor:green; 2 | body { 3 | background: $greenColor; 4 | } -------------------------------------------------------------------------------- /vue-env/src/vue.shime.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } -------------------------------------------------------------------------------- /vue-env/tscofig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": false 4 | } 5 | } -------------------------------------------------------------------------------- /vue-env/tsconfig.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /vue/Vue基本环境/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets":["env"] 3 | } 4 | 5 | -------------------------------------------------------------------------------- /vue/Vue基本环境/entry.js: -------------------------------------------------------------------------------- 1 | import Vue from "./javascript/vue" 2 | import axios from "axios" 3 | import "./index.html" 4 | import "./style/style.css" 5 | import app from "./javascript/base" 6 | Vue.prototype.$http = axios 7 | app(Vue) 8 | -------------------------------------------------------------------------------- /vue/Vue基本环境/img/logo_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/vue/Vue基本环境/img/logo_01.png -------------------------------------------------------------------------------- /vue/Vue基本环境/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= htmlWebpackPlugin.options.title %> 8 | 9 | 10 |
11 |
12 | {{msg}}123 13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /vue/Vue基本环境/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "axios": "^0.18.1", 4 | "babel-core": "^6.26.0", 5 | "babel-loader": "^7.1.2", 6 | "babel-preset-env": "^1.6.1", 7 | "css-loader": "^0.28.7", 8 | "html-loader": "^0.5.1", 9 | "html-webpack-plugin": "^2.30.1", 10 | "style-loader": "^0.19.0", 11 | "uglifyjs-webpack-plugin": "^1.1.2", 12 | "url-loader": "^0.6.2", 13 | "webpack": "^3.10.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /vue/Vue基本环境/style/style.css: -------------------------------------------------------------------------------- 1 | .bg{ 2 | background: green 3 | } -------------------------------------------------------------------------------- /webpack/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/webpack/.DS_Store -------------------------------------------------------------------------------- /webpack/instance-demo/MyInstance.js: -------------------------------------------------------------------------------- 1 | 2 | const instance = Symbol('instance'); 3 | class MyInstance { 4 | constructor() { 5 | const inst = MyInstance[instance]; 6 | if (inst) { 7 | return inst; 8 | } 9 | MyInstance[instance] = this; 10 | } 11 | } 12 | 13 | export default MyInstance; -------------------------------------------------------------------------------- /webpack/instance-demo/b.js: -------------------------------------------------------------------------------- 1 | import MyInstance from './MyInstance'; 2 | 3 | const i = new MyInstance() 4 | console.log(MyInstance, i) 5 | i.name = 'instance' 6 | 7 | 8 | -------------------------------------------------------------------------------- /webpack/instance-demo/index.js: -------------------------------------------------------------------------------- 1 | import './b'; 2 | import MyInstance from './MyInstance'; 3 | 4 | 5 | const i = new MyInstance() 6 | 7 | console.log(i) 8 | -------------------------------------------------------------------------------- /webpack/instance-demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | module.exports = { 3 | entry: './index.js', 4 | output: { 5 | path: path.resolve(__dirname, 'dist'), 6 | filename: 'bundle.js' 7 | } 8 | } -------------------------------------------------------------------------------- /webpack/webpack-proxy-demo/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PsChina/Vue/4dd1aaf4aef08119d0723f2da590bb94d8991080/webpack/webpack-proxy-demo/.DS_Store -------------------------------------------------------------------------------- /webpack/webpack-proxy-demo/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /webpack/webpack-proxy-demo/entry.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios') 2 | const body = document.querySelector('body') 3 | 4 | axios({ 5 | // eslint-disable-next-line 6 | url: '/api/ssm-rest-ws/rest/ws/webmecter/getWebMecterCodeByProAndCity/pro=%E7%A6%8F%E5%BB%BA&city=%E5%8E%A6%E9%97%A8&county=%E5%8E%A6%E9%97%A8%E5%B8%82%E5%B8%82%E8%BE%96%E5%8C%BA&indexName=GDZB#', 7 | }).then(function(res) { 8 | body.innerHTML = JSON.stringify(res.data) 9 | }) 10 | -------------------------------------------------------------------------------- /webpack/webpack-proxy-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /webpack/webpack-proxy-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "entry.js", 6 | "dependencies": { 7 | "axios": "^0.18.0" 8 | }, 9 | "devDependencies": { 10 | "html-webpack-plugin": "^3.2.0", 11 | "webpack": "^4.28.4", 12 | "webpack-cli": "^3.2.1", 13 | "webpack-dev-server": "^3.1.14" 14 | }, 15 | "scripts": { 16 | "test": "echo \"Error: no test specified\" && exit 1" 17 | }, 18 | "author": "", 19 | "license": "ISC" 20 | } 21 | --------------------------------------------------------------------------------