vue组件Vnode

vue实例挂载流程是,$mount->mountComponent->定义updateComponent->new Watcher->执行getter即执行updateComponent,执行_render->执行update

执行render,就是执行vnode = render.call(vm._renderProxy, vm.$createElement),即执行$createElement即执行createElement即执行_createElement

 

 后面会根据tag类型做一次判断,如果是组件对象,则走到createComponent逻辑

 执行createComponent函数,先执行baseCtor = context.$options._base,这个其实就是Vue,_base是再global-api下的index文件里进行赋值的

 后续在通过mergeOption到$options上,所以他就是Vue

后续执行 Ctor = baseCtor.extend(Ctor),Vue.extend也是定义在golbal-api下的,cachedCtors主要是对组件做缓存,相同组件不同地方多次引用,可以用缓存,然后定义sub,做了一个继承,使组件拥有Vue相同的方法,然后在合并options

 

 然后createComponent继续往下走,执行installComponentHooks,这个主要是填加了一些钩子函数,以后patch会用到,然后后续创建组件Vnode,我们可以看到组件Vnode,第3、4、5参数为空,即children、text、elm为空,但是多了componentOptions参数

Vue的canvas vnodeVue框架中用于创建和管理canvas元素的虚拟节点。 虚拟节点(vnode)是Vue中抽象出来的一种数据结构,用于描述DOM元素。通过使用虚拟节点,Vue可以跟踪每个组件的状态变化,并在需要时更新DOM。在Vue中,每个canvas元素都会被表示为一个独立的vnode。 canvas vnode提供了一种将Vue和canvas元素相结合的灵活方式。通过创建canvas vnode,我们可以在Vue组件中使用canvas元素,并利用Vue的数据驱动特性来动态更新canvas的内容。 在使用canvas vnode时,我们可以通过Vue的模板语法或者render函数来创建vnode。然后,我们可以将这些vnode添加到Vue组件的模板中。一旦vnode被添加到模板中,Vue会将其转换为真实的DOM元素,并将其插入到页面中。 一旦canvas vnode被渲染到页面中,我们可以使用canvas的API操作它。这些API包括绘制线条、绘制图形、绘制文本等功能。我们可以通过监听Vue组件的数据变化,来实现动态更新canvas的内容。当数据发生变化时,Vue会自动重新渲染vnode,并更新canvas的内容。 使用canvas vnode,我们可以利用Vue的响应式系统来管理canvas元素的状态。当事件发生或数据变化时,我们可以通过更新VNode的数据来实现动态的canvas绘制。同时,由于canvas vnode会被Vue管理,我们可以利用Vue的生命周期钩子函数来控制canvas的绘制时机,以提高应用的性能和用户体验。 总之,Vue的canvas vnode为我们提供了一种简单、灵活的方式来操作canvas元素,并将其和Vue的数据驱动特性相结合。通过使用canvas vnode,我们可以实现动态的、响应式的canvas绘制,提高应用的可维护性和交互性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值