Vue

在开始之前，我们做一些前提设置，这个极简框架的目标是让我们避免去写一些常规的html和JavaScript代码，比如： <p id="cool-para"></p> <script> const coolPara = 'Lorem ipsum.'; const el = document.getElementById('cool-para'); el.innerText = coolPara; </script> 这个极简框架是让我们可以写一些神奇的HTML和JavaScript，就像Vue一样： <script setup> const coolPara = 'Lorem ipsum.'; </script> <template> <p>{{ coolPara }}</p> </template> 或者像React一样： export default function Para() { const coolPara = 'Lorem ipsum'; return <p>{ coolPara }</p>; } 这样的一个框架的好处是显而易见的，写代码的时候问题要记住多章节的内置变量和方法是困难的，如document、innerText、getElementById，而且也不利于软件的扩展。 我们的极简框架有两个特点：响应式和组合式。 响应式 在Vue和React代码中，数据和UI元素的显示内容有一个绑定，只要我们修改了数据，html元素的innerText值就会自动进行更新。这被称作响应式（Reactivity） 组合式 可以定义一个组件并重复使用它，而无需每次使用到它的时候还要再次定义它，这被称为可组合性。普通的HTML + JavaScript并不具备这个特性。因此，下面的代码并没有达到预期效果（仅仅是做了定义而，这有点类似Web Components的做法）： <!-- Defining the component --> <component name="cool-para"> <p> <content /> </p> </component> <!-- Using the component --> <cool-para>Lorem ipsum.</cool-para> 响应式和组合式是现代前端框架的两个主要特性，例如Vue, React等待。 要利用这些抽象概念（例如框架和库），我们需要先学习很多特定的概念。当这些东西以某种神奇的方式运作时，我们还要处理它们可能产生的问题。更不用说，我们还要处理一大堆容易出错的依赖关系。 但事实上，使用现代 Web API 来实现这两件事并不困难。而且，在大多数情况下，我们可能并不需要大而全的框架及其纷繁复杂的特性… 响应式（Reactivity） 一个句话解释响应式就是：当数据更新时，自动更新 UI。 ...