Vue3 通常使用 v-bind 绑定数据到子元素上,对于一个元素接收数据的方式有两种:通过property或通过attribute,本文通过分析源码得到结论:Vue会通过判断元素实例el上是否有需要绑定的property,如果有就把数据传给子元素的property,否则传给attribute。当然还有会一些特殊处理,我们这里只讨论一般情况。
首先说结论,对于一般的属性,Vue会判断元素el
上是否有对应的property
属性,如果有就赋值给对应的property
,否则添加到attribute
上。然后Vue会对一些属性做特殊处理直接绑定到attribute
,此外对input/textarea/select
元素也会有特殊处理。
Vue3.2版本还提供了
:xxx.prop
和:xxx.attr
写法指定绑定数据到property
或attribute
上(文档链接)
直接从源码入手。
在Vue初始化过程中,Vue会将解析并构造成
vdom
,收集其中的数据绑定放在props
对象中。到了mount
阶段Vue会根据vdom
创建为真实DOM,然后放到页面中。
创建过程大致为遍历vdom
中的vnode
节点,执行mountElement()
,关键代码如下,根据vnode
创建真实el
元素,进行数据绑定和事件绑定,然后把el
元素插入到父容器中,最后完成页面的加载。
const mountElement = (