好家伙,
0.完整代码已开源
https://github.com/Fattiger4399/analytic-vue.git
1.思路
1.1.什么是组件化?
Vue 组件化是指将复杂的应用程序拆分成多个独立的、可复用的组件,这些组件可以实现特定的功能或局部功能。
组件化有助于提高开发效率、方便重复使用、简化调试步骤、提升项目可维护性,并便于多人协同开发。
以下是 Vue 组件化的好处:
代码复用,模块化,提高可维护性,便于 debug,适应性,提升性能(局部更新),有利于团队协
总之,Vue 组件化有助于提高开发效率、降低维护成本、提高应用程序性能,并便于团队协作。它是 Vue 框架的核心概念,也是 Vue 应用开发的关键优势之一。
1.2.在项目中组件化的使用
vue中使用组件的方式无非两种,全局组件与局部组件
let vm = new Vue({
el: "#app",
data: {
firstName: 'pang',
lastName: 'hu'
},
component: {
'my-button': {
template: ``
}
}
})
Vue.component('my-button', {
template: ``
})
本篇涉及Vue.component()和Vue.extend()
1. Vue.component:
- 用于创建可复用的、独立的、一次性(单例)的组件。
- 创建的组件实例之间互不干扰,各自拥有独立的实例状态。
- 无法继承父组件的属性和方法。
2. Vue.extend():
- 用于创建可复用的、独立的、多次使用的(原型链继承)组件。
- 创建的组件实例之间可以通过原型链继承父组件的属性和方法。
- 相当于创建了一个新的组件类,可以理解为对父组件的扩展。
来vue的官网看一看
2.代码实现
global-api/index.js
Vue.component = function (id, componentDef) {
componentDef.name = componentDef.name || id
console.log(componentDef)
console.log(this)
componentDef = this.extend(componentDef) //返回一个实例
console.log(componentDef)
this.options.components[id] = componentDef
console.log(this.options)
}
Vue.extend = function (options) {
let spuer = this
const Sub = function vuecomponet(opts) { //opts 子组件的实例
//
//初始化
this._init(opts)
}
//属性如何处理??
//子组件继承父组件中的属性Vue 类的继承
Sub.prototype = Object.create(spuer.prototype)
//问题 子组件中this的执行
Sub.prototype.constructor = Sub
//重点,将父组件的属性与子组件的属性合并到一起
Sub.options = mergeOptions(this.options, options)
console.log(Sub.options)
return Sub
}
问题一:
此处为什么要执行
Sub.prototype.constructor = Sub
答:
在 JavaScript 中,每个对象都有一个内部属性constructor
,该属性指向创建该对象的构造函数。
通常情况下,每个对象的constructor
属性都指向它自身对应的构造函数。
在 Vue 中,通过Vue.extend
方法创建的子组件构造函数,它们的原型对象(Sub.prototype
)默认情况下并没有正确的constructor
属性,即constructor
指向的是Vue
而不是子组件自身。
这样的话,在使用new
运算符来创建子组件实例时,实际上会调用父组件的构造函数,导致创建子组件实例失败。
因此,在这段代码中,使用Sub.prototype.constructor = Sub
将子组件的constructor
属性设置为子组件自身,用于正确地设置子组件的构造函数。
这样,在使用new
运算符来创建子组件实例时,就可以正确地使用子组件的构造函数来创建实例了。
3.实现效果
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: 【Python批处理Word】Python 给Word文档添加文本水印或图片水印
Word 文档中的水印是可以在文档背景中添加的半透明的图形或文字,可以帮助保护文档的原创性,防止未经授权的复制或使用。除了安全作用外,水印还可以用来展示文档创作者的信息,也可以展示附加的文档信息,或单纯地用于装饰文档。本文将介绍如何使用Spire.Doc fo…