持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前文我们已经读完了前2章，第三章的名字叫Vue.Js 3的设计思路，但我觉得这其实是大概讲一下vue3的渲染、编译、模板语法与之前有什么不同，引出后续几个大章节。

Vue.Js 3的设计思路

3.1声明式的描述UI

其实在vue里的声明式描述UI,就是模板语法。vue3的模板语法变化不大，我这里就给大家复习一下。

• 使用html语法。例如<div></div>
• 可以使用原生的属性.<div class='one'></div>
• 使用:或v-bind表示动态绑定的属性 <div :class="a"></div>
• 使用@或v-on表示绑定事件<button @click='handleClick'></button>
• 使用内部指令或自定义指令完成特定功能<div v-show="a"></div>

这里其实很好掌握，但是我们还需要掌握用对象来表示UI

const a = 'hello'
const dom = {
    tag:'div'
    props:{
      className:a
    },
    children:[
        {tag:'p'}
    ]
}

上述翻译为模板就是

<div :class="a"><p></p></div>

既然有了模板语法，为什么又要有对象语法呢？

其实很多时候，对象语法会比模板语法更灵活。原书举了一个简单的例子 我们现在需要h1~h6,如果用模板语法

<div>
    <h1></h1>
    <h2></h1>
    <h3></h1>
    <h4></h1>
    <h5></h1>
    <h6></h1>
</div>

用对象语法呢

const list = new Array(6).fill('')
const dom = {
    tag:'div',
    children:list.map((e,i)=>({tag:`h${i+1}`}))
}

哪个简单显而易见，那个可读性更好也显而易见。

当然这里的对象格式并不与vue相同，在vue中我们有具体的格式，同时还有一个辅助函数h,具体可以参考这里

这里不由得想说，其实JSX也是很不错的一个解决方法，同时兼具了可读性和功能性，不过它需要编译.在JSX中上述需求是这样写的

const dom = (<div>
    new Array(6).fill('').map((e,i)=>(<h{i+1}></h>))
</div>)

其实在我们使用的时候也应该按需要去使用，在vue中也提供了函数式组件。