第一篇框架设计概览

这一篇中作者主要讲述了设计vue时候的一些思考，一些选择。其实也是在讲明vue与其他前端框架的不同。

权衡的艺术

权衡：这次词其实就是表示日常生活中的秤，由秤砣和秤杆组成。引申出来就是比较得失，比较利弊之意。

在人生之中，处处都有选择，每次选择即是一次权衡，对于vue也是一样。从一开始，有vue这个想法的时候，尤老板就做了很多权衡。

声明式与命令式

声明式与命令式其实是两种不同的编程范式，其实也是2种思维方式。当我们需要一个按钮时，我们其实有这样两种写法。

命令式

const button = document.createElement('button')
button.innerHTML = 'hello world'
button.onclick=()=>alert('hello')
document.querySelector('body').appendChild(button)

声明式

<template>
    <button @click="handleClick">hello world</button>
</template>
<script setup>
    const handleClick = ()=>alert('hello')
</script>

我认为这两者写法是有如下区别的：
1.声明式更体现结果，就好比html，其实展示在浏览里就是这样。而命令式更体现过程，它展示了这个按钮的创建过程，使用了哪些API，看着一段代码就好比看着程序员的思考过程。 2.声明式只要求你有正确的结果，那么一定会显示。命令式则不一定，如果你思路错了，那么写出来的代码也不会达到预期。 声明式最大的优点就是可阅读性好 在vue中，其实是结合了声明式与命令式的。

性能与可维护性的权衡

那么声明式与命令式与命令式哪个性能更好呢？作者认为，声明式代码的性能不优于命令式代码的性能。

其实也很好理解，当浏览器一段HTML的代码，它需要解析dom树，解析css树，然后渲染。而对于一段js，其实也就是正常的执行而已，又能浪费多少性能呢。甚至于它只需要在appendChild的时候再去重绘，当createElement的时候，也只是创建了一个变量而已。

现在我们做一个最简单的操作，改变button中的文字

命令式 document.querySelector('button').innerHTML='hello'
声明式

<template>
    <button @click="handleClick">{{text}}</button>
</template>
<script setup>
    const handleClick = ()=>alert('hello')
    const text = ref('hello world')
    text.value='hello'
</script>

属性vue的都应该知道了，这时候用diff算法，对比虚拟dom哪些变化了，然后更新虚拟dom树，最后虚拟dom转化为真实dom.这中间有许多逻辑，它的效率永远比不上命令式一条语句。

这其实也说明，vue虽然表面上结合了声明式与命令式，但是其内部实现一定是命令式的。而命令式与声明式的转换比如会消耗一部分性能。

那么vue为什么要这样做呢。书中的原因是：为了可维护性与可阅读性。

声明式代码直接展现了结果，而我们无需去思考如何得到这个结果，这便是可阅读性。当我们修改的时候，我们也可以减少副作用（这里的副作用是指修改一个bug而造成的新bug）,这便是可维护性。

精读《Vuejs设计与实现》(1)

第一篇 框架设计概览

权衡的艺术

声明式与命令式

性能与可维护性的权衡

第一篇框架设计概览