声明式的描述UI

声明式的描述UI

首先我们要知道Vue.js3是一个声明式的UI框架，意思是说用户在使用Vue.js3开发页面时是声明式的描述UI的。

那么我们来思考一下，如果让你设计一个声明式的UI框架，你会怎么设计呢？我们了解一下编写前端页面都要涉及哪些内容，如下

1.DOM元素
2.属性
3.事件
4.元素层级结构

声明式的形式应该如何描述上面的内容呢？这就是框架设计需要思考的地方，vue3是这样解决的

1.使用与HTML标签一致的方法来描述DOM元素
2.使用与HTML标签一致的方式来描述属性，例如<div id="app"></div>
3.使用：或v-bind来描述动态绑定的属性，例如<div :id="dynamicId" ></div>
4.使用@或v-on来描述事件，例如点击事件<div @click="handler" ></div>
5.使用与HTML一致的方式来描述层级结构。

由上述可得，在Vue.js中，哪怕是事件，都有之对应的描述方式，用户不需要写任何命令式的代码，这就是所谓的声明式的UI。