学习vue源码（2）手写Vue.extend方法

最新推荐文章于 2024-07-09 10:37:13 发布

前端阳光

最新推荐文章于 2024-07-09 10:37:13 发布

阅读量412

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43964148/article/details/106470384

版权

本文探讨Vue.js中的Vue.extend方法，详细解释其作用和用法。通过介绍如何创建子类并实现继承，阐述Vue.extend的缓存策略、name选项校验以及子类如何获得Vue的能力，包括原型继承、选项合并、props和computed的初始化等关键步骤。最后，提供了完整的Vue.extend实现代码，帮助理解Vue.js的内部工作原理。

摘要由CSDN通过智能技术生成

Vue.extend( optons );

（1）参数

{ object } options

（2）用法

使用基础Vue构造器创建一个“子类”，其参数是一个包含“组件选项”的对象。data选项是特例，在Vue.extend（）中，它必须是函数。

<div id="mount-point"></div>
<!-- 创建构造器 -->
var Profile = Vue.extend({
   
	template:'<p>{
   {firstName}} {
   {lastName}} aka{
   {alias}}</p>',
	data:function(){
   
		return{
   
			firstName:'Walter',
			lastName:'White',
			alias:'Heisenberg'
		}
	}
})
<!-- 创建Profile实例，并挂载到一个元素上 -->
new Profile().$mount('#mount-point');

（3）全局API和示例方法不同，后者是在Vue的原型上挂载方法，也就是在Vue.prototype上挂载方法，而前者是直接在Vue上挂载方法。

Vue.extend = function(extendOptions){
   
	<!-- 做点什么 -->
}

（4）作用

Vue.extend的作用是创建一个子类，所以可以创建一个子类，然后让它继承Vue身上的一些功能。

二、实现
（1）创建一个子类

Vue.cid = 0
let cid = 1;
 
Vue.extend = function(extendOptions){
   
	extendOptions = extendOptions || {
   };
	const Super = this; // 指向 Vue这个构造函数
	const SuperId = Super.cid; 指向 Vue这个构造函数的id
	const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {
   });
	if(cachedCtors[SuperId]){
   
		return cachedCtors[SuperId];
	}
	const name = extendOptions.name || Super.options.name;
	if(process.env.NODE_ENV !== 'production'){
   
		if(!/^[a-zA-Z][\w-]*$/.test(<