学习vue源码(17)再探生命周期之初始化实例属性及事件

在前一篇文章学习vue源码(16)初探生命周期各阶段都在干嘛

Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶段。

而初始化阶段又可分为

在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。

这一次,我们就来探究第一阶段:初始化阶段的属性、事件,如代码所示,研究initLifecycle,initEvents,initRender。都干了什么。这件这三个初始化 都在beforeCreate钩子函数触发前初始化的。

Vue.prototype._init = function(options){
   
	vm.$options = mergeOptions(
		resolveConstructorOptions(vm.constructor),
		options || {
   },
		vm
	)
 
	initLifecycle(vm);
	initEvents(vm);
	initRender(vm);
	callHook(VM,'beforeCreate');
	initInjections(vm);//在data/props前初始化inject
	initState(vm);
	initProvide(vm);//在data/props前初始化provide
	callHook(vm,'created');
 
	if(vm.$options.el){
   
		vm.$mount(vm.$options.el);
	}
}

一、初始化实例属性

在Vue.js的整个生命周期中,初始化实例属性是第一步。

需要实例化的属性既有Vue.js内部需要用到的属性(如vm._watcher),也有提供给外部使用的属性(例如vm.$parent)。

以$开发的属性是提供给用户使用的外部属性,以_开头的属性是提供给内部使用的内部属性。

Vue.js通过initLifecycle函数向实例中挂载属性,该函数接收Vue.js实例作为参数。所以在函数中,只需要向Vue.js实例设置属性即可达到向Vue.js实例挂载属性的目的。

(5)实现

export function initLifecycle(vm){
   
	const options = vm.$options;
	//找出第一个非抽象父类
	let parent = options.parent;
	if(parent&&!options.abstract){
   
		while(parent.$options.abstract&&parent.$parent){
   
			parent = parent.$parent;
		}
		parent.$children.push(vm);
	}
	vm.$parent = parent;
	vm
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue3可视化Echarts图的源码可以通过以下步骤实现: 1. 引入echarts库:首先,在Vue3项目中安装echarts库。可以通过在终端中运行`npm install echarts --save`命令来安装echarts。然后,在需要使用可视化图的Vue组件中,引入echarts库:`import echarts from 'echarts'`。 2. 创建图表容器:在Vue组件的模板中,创建一个容器元素,用于承载echarts图表。例如,可以在模板中添加一个`<div id="chartContainer"></div>`。 3. 初始化图表实例:在Vue组件中的`mounted`生命周期钩子函数中,初始化echarts图表实例。首先,获取图表容器的DOM元素:`const chart = document.getElementById('chartContainer')`。然后,创建echarts实例:`const myChart = echarts.init(chart)`。 4. 配置图表选项:使用echarts实例的`setOption`方法,配置图表的选项。例如,可以设置图表的类型、标题、x轴和y轴等:`myChart.setOption({ type: 'bar', title: { text: '柱状图' }, xAxis: { data: ['A', 'B', 'C'] }, yAxis: {} })`。 5. 绑定数据:将需要的数据绑定到图表中。可以通过Vue组件的props属性传递数据,或者通过axios等方式请求后端API获取数据,并将数据传递给图表实例的`setOption`方法。 6. 更新图表:在数据变化时,更新图表的显示。可以通过Vue组件的watch属性监听数据变化,并在数据变化后,调用图表实例的`setOption`方法更新图表。 7. 销毁实例:在Vue组件的`beforeUnmount`生命周期钩子函数中,调用echarts实例的`dispose`方法销毁图表实例。 通过以上步骤,我们可以基于Vue3实现echarts可视化图的源码。这样,我们可以根据实际需求,灵活地配置和更新图表,实现丰富的可视化效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值