共计 8664 个字符,预计需要花费 22 分钟才能阅读完成。
导航
[[深刻 01] 执行上下文 ](https://juejin.im/post/684490…)
[[深刻 02] 原型链 ](https://juejin.im/post/684490…)
[[深刻 03] 继承 ](https://juejin.im/post/684490…)
[[深刻 04] 事件循环 ](https://juejin.im/post/684490…)
[[深刻 05] 柯里化 偏函数 函数记忆 ](https://juejin.im/post/684490…)
[[深刻 06] 隐式转换 和 运算符 ](https://juejin.im/post/684490…)
[[深刻 07] 浏览器缓存机制(http 缓存机制)](https://juejin.im/post/684490…)
[[深刻 08] 前端平安 ](https://juejin.im/post/684490…)
[[深刻 09] 深浅拷贝 ](https://juejin.im/post/684490…)
[[深刻 10] Debounce Throttle](https://juejin.im/post/684490…)
[[深刻 11] 前端路由 ](https://juejin.im/post/684490…)
[[深刻 12] 前端模块化 ](https://juejin.im/post/684490…)
[[深刻 13] 观察者模式 公布订阅模式 双向数据绑定 ](https://juejin.im/post/684490…)
[[深刻 14] canvas](https://juejin.im/post/684490…)
[[深刻 15] webSocket](https://juejin.im/post/684490…)
[[深刻 16] webpack](https://juejin.im/post/684490…)
[[深刻 17] http 和 https](https://juejin.im/post/684490…)
[[深刻 18] CSS-interview](https://juejin.im/post/684490…)
[[深刻 19] 手写 Promise](https://juejin.im/post/684490…)
[[深刻 20] 手写函数 ](https://juejin.im/post/684490…)
[[react] Hooks](https://juejin.im/post/684490…)
[[部署 01] Nginx](https://juejin.im/post/684490…)
[[部署 02] Docker 部署 vue 我的项目 ](https://juejin.im/post/684490…)
[[部署 03] gitlab-CI](https://juejin.im/post/684490…)
[[源码 -webpack01- 前置常识] AST 形象语法树 ](https://juejin.im/post/684490…)
[[源码 -webpack02- 前置常识] Tapable](https://juejin.im/post/684490…)
[[源码 -webpack03] 手写 webpack – compiler 简略编译流程 ](https://juejin.im/post/684490…)
[[源码] Redux React-Redux01](https://juejin.im/post/684490…)
[[源码] axios ](https://juejin.im/post/684490…)
[[源码] vuex ](https://juejin.im/post/684490…)
[[源码 -vue01] data 响应式 和 初始化渲染 ](https://juejin.im/post/684490…)
[[源码 -vue02] computed 响应式 – 初始化,拜访,更新过程 ](https://juejin.im/post/684490…)
[[源码 -vue03] watch 侦听属性 – 初始化和更新 ](https://juejin.im/post/684490…)
[[源码 -vue04] Vue.set 和 vm.$set ](https://juejin.im/post/684490…)
[[源码 -vue05] Vue.extend ](https://juejin.im/post/684490…)
[[源码 -vue06] Vue.nextTick 和 vm.$nextTick ](https://juejin.im/post/684790…)
前置常识
一些单词
built-in tag:内置标签
reserved:保留
(tag is reserved so that it cannot be registered as a component 如果是保留标签,不能组件名)
specification:标准
(html5 specification HTML5 标准)
further:进一步
(allow further extension/mixin/plugin usage 容许进一步扩大...)
(1) 组件注册
- 全局注册 和 部分注册
-
(1) 全局注册
-
<font color=red>Vue.component(id, [definition] )</font>
-
参数
- id:string 类型,能够是 MyComponent 或 my-component
-
definition:可选,函数或对象
- <font color=red>data 必须是函数 </font>
- <font color=red> 不蕴含 el</font>
-
作用
- 注册 或 获取 全局组件
- 全局注册的组件能在
-
留神点:
- definition 对象中的 (data) 必须是 (函数),这样每个组件实例能力保护一份返回对象的独立拷贝
- id 能够是 MyComponent 或 my-component 这两种写法的字符串
- 全局注册的组件能够供所有子组件应用
-
-
-
(2) 部分注册
- 在 new Vue() 的参数对象中通过 components 属性对象进行部分注册
-
案例 123
-
// 注册组件,传入一个扩大过的结构器
Vue.component(‘my-component’, Vue.extend({ / … / }))// 注册组件,传入一个选项对象 (主动调用 Vue.extend)
Vue.component(‘my-component’, { / … / })// 获取注册的组件 (始终返回结构器)
var MyComponent = Vue.component(‘my-component’)
-
Base/BaseButton.ts
// 全局注册组件
// 1. 这里是 ts 文件
// 2. 如果是 .vue 文件能够应用 webpack 的 require.context
Vue.component(‘BaseButton’, {
data() {
return {message: '这是一个根底组件 -button'
}
},
template: `
<div>
<div>BaseButton</div>
<div>{{message}}</div>
</div>
`,
})
// 留神:在 vue-cli3 中须要在 vue.config.js 中配置 (runtimeCompiler: true) 示意开启 runtime+compiler 版本
// vue.config.js
module.exports = {
runtimeCompiler: true, // runtime + compiler 版本
}
-
Base
/ BaseButton.ts —————— 简略的 Vue.component 全局注册 BaseButton 组件
/ BaseButton.vue —————– 利用 require.context 实现 Base 文件夹中的所有组件的自动化全局注册
/ index.ts ———————– 自动化全局注册逻辑index.ts 如下
import Vue from ‘vue’
const requireContext = require.context(‘.’, false, /.vue$/)
requireContext.keys().forEach(fileName => {
const componentModule = requireContext(fileName)
const component = componentModule.default
Vue.component(component.name, component)
})require.context 在 vue 中的应用官网案例:https://cn.vuejs.org/v2/guide/components-registration.html
(2) Vue.extend(options) – api
-
参数
- options:一个蕴含组件选项对象
-
留神:
- options.data 必须是一个函数
Vue.component()
和Vue.extend()
的参数对象中的data
都必须是一个函数
-
用法
- 应用根底的 Vue 结构器,创立一个子类
-
案例 (<font color=red> 封装一个全局根底 toast 组件 </font>)
- toast 是一个根底组件,多个中央会用到,所以不要在每个用到的组件中 import 再在 components 中注册,而是挂在到 vue.prototype 上
- toast 的组件不放在 vue 我的项目的 DOM 根节点中,因为会受到路由的影响,而是独立的节点
Base 全局根底组件 目录构造 src /components /base / index.js / toast.vue
-
src/components/base/toast.vue
- 失常的写一个展现的 toast 组件
-
toast 组件中的 data 能够通过 Vue.extend 生成的子类的实例的参数对象中的 data 来批改
[src/components/base/toast.vue]
<template>
<div
class=”base-toast”
v-if=”show”
:class=”[animateFn, backgrondType]”{{message}}</div>
</template>
<script>
export default {
name: “BaseToast”,
data() {
return {message: "", // toast 显示内容 show: true, // 显示暗藏 fade: true, // 显示暗藏动画 type: "", typeArr: ['error', 'success']
};
},
computed: {
backgrondType() {return 'toast-' + this.typeArr.find(type)
},
animateFn() {return this.fade ? 'fadein' : 'fadeout'
}
}
};
</script>
<style lang=”css”>
.base-toast {
padding: 10px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 50%;
top: 10px;
transform: translate(-50%, 0);
display: inline-block;
margin: 0 auto;
text-align: center;
}
.fadein {
animation: animation_fade_in 0.5s;
}
.fadeout {
animation: animation_fade_out 0.5s;
}
@keyframes animation_fade_in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes animation_fade_out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.toast-success {
background: green;
}
.toast-error {
background: red;
}
</style> -
src/components/base/index.js
--- 第二步:[src/components/base/index.js] import Vue from "vue"; import Toast from "./toast.vue"; const generatorToast = ({message, type, duration = 200}) => {const ToastConstructor = Vue.extend(Toast); // ------------------- Vue.extend() 生成 Vue 子类 const toastInstance = new ToastConstructor({ // ------------------ new 子类,生成组件实例 el: document.createElement("div"), // -------------------------- 组件挂在节点 data() { // ---------------------------------------------------- 将和 Toast 组件中的 data 合并 return { message, type, show: true, fade: true, }; }, }); setTimeout(() => {toastInstance.fade = false; // -------------------------------- 动画,提前执行}, duration - 500); setTimeout(() => {toastInstance.show = false; // -------------------------------- 显示暗藏}, duration); document.body.appendChild(toastInstance.$el); // ---------------- 组件挂在地位 }; export default { // ----------------------------------------------- 插件对象的 install 办法 install() {Vue.prototype.$BaseToast = generatorToast;}, }; // Vue.use(option) // option 能够是 函数 或者 具备 install 办法的对象 // 这里将 toast/index 封装成 vue 插件,通过 Vue.use() 注册,即执行 install 办法
-
src/main.js 入口文件
第三步:
- 引入 src/components/base/index.js
-
Vue.use() 注册插件
import Vue from ‘vue’
import App from ‘./App.vue’
import Toast from ‘./components/base’Vue.config.productionTip = false
Vue.use(Toast) // ———————————————– vue 插件注册new Vue({
render: h => h(App),
}).$mount(‘#app’) -
src/App.vue
第四步:[src/App.vue]
-
应用
<template>
<div id=”app”>
<HelloWorld msg=”Welcome to Your Vue.js App”/>
</div>
</template>
<script>
import HelloWorld from ‘./components/HelloWorld.vue’
export default {
name: ‘App’,
components: {
HelloWorld
},
mounted() {
this.$BaseToast({// ————————————— 通过 this.$BaseToast() 调用message: '111', duration: 3000, type: 'error'
})
}
}
</script>
Vue.extend() 源码
-
一句话总结:<font color=red> 应用 根底 Vue 结构器,创立一个子类 </font>
Vue.extend = function (extendOptions) {extendOptions = extendOptions || {}; // 没有传参,就赋值空对象 var Super = this; // this 指的是 Vue var SuperId = Super.cid; // SuperId => id var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {}); // cachedCtors // 用来缓存 Constructor // 参数对象中不存在 _Ctor 属性,就将 extendOptions._Ctor = {} 赋值为空对象 if (cachedCtors[SuperId]) { // 存在缓存,间接返回 return cachedCtors[SuperId] } var name = extendOptions.name || Super.options.name; // name // 参数对象中不存在 name 属性,就是用父类的 options 的 name 属性 if (name) {validateComponentName(name); // validateComponentName() 验证 name 的合法性 // 1. 不能是 slot component 这样的内置标签名 // 2. 不能是 HTML5 的保留关键字标签 } var Sub = function VueComponent(options) { // 定义子类 this._init(options); }; Sub.prototype = Object.create(Super.prototype); // 将 (子类的 prototype 的原型) 指向 (父类 prototype) // 这样 (子类的实例) 就能继承 (父类 prototype) 上的属性和办法 Sub.prototype.constructor = Sub; // 将原型上的 constructor 属性指向本人,避免批改了原型后 prototype.constructor 不再是指向 Sub Sub.cid = cid++; Sub.options = mergeOptions( Super.options, extendOptions ); // 合并 options => 将父类的 options 和参数对象合并 Sub['super'] = Super; // 在子类上挂载 super 属性,指向父类 // For props and computed properties, we define the proxy getters on // the Vue instances at extension time, on the extended prototype. This // avoids Object.defineProperty calls for each instance created. if (Sub.options.props) {initProps$1(Sub); // props 属性存在,就将 props 做一层代理 // initProps 办法能够让用户拜访 this[propName] 时相当于拜访 this._props[propName] } if (Sub.options.computed) {initComputed$1(Sub); // 同上 } // allow further extension/mixin/plugin usage // 继承相干属性 Sub.extend = Super.extend; Sub.mixin = Super.mixin; Sub.use = Super.use; // create asset registers, so extended classes // can have their private assets too. ASSET_TYPES.forEach(function (type) {Sub[type] = Super[type]; }); // 继承 component directive filter // var ASSET_TYPES = [ // 'component', // 'directive', // 'filter' // ]; // enable recursive self-lookup if (name) {Sub.options.components[name] = Sub; // 保留 Sub 到 components 属性中 } Sub.superOptions = Super.options; Sub.extendOptions = extendOptions; Sub.sealedOptions = extend({}, Sub.options); // cache constructor cachedCtors[SuperId] = Sub; // 存在 Sub return Sub // 返回 Sub };
材料
Vue.extend 源码 https://juejin.im/post/684490…
Vue.extend 源码 https://zhuanlan.zhihu.com/p/…
toast 组件 1 https://juejin.im/post/684490…
toast 组件 2 https://juejin.im/post/684490…