Vue3属性绑定方式分析

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会将<template>解析并构造成vdom，收集其中的数据绑定放在props对象中。到了mount阶段Vue会根据vdom创建为真实DOM，然后放到页面中。

创建过程大致为遍历vdom中的vnode节点，执行mountElement()，关键代码如下，根据vnode创建真实el元素，进行数据绑定和事件绑定，然后把el元素插入到父容器中，最后完成页面的加载。

const mountElement = (