用过Flutter，对数据的响应式，有进一步了解。于是，回过头来再看看VueJS，自然而然地理解了。
找到一个比较好的Vue3示例代码，展示了使用Vue3的主要代码，涉及Vue3的模板语言、组件等。
我在代码加上注释，更容易理解：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>Learn Vue3</title>
</head>
<body>
<!-- 界面模板 -->
<div id="app">
<!-- 两个大括号，获取data()方法返回对象的属性的值，给文本绑定值 -->
<p>{{counter}}</p>
<p>
<!-- :title是v-bind:title的缩写，给HTML标签的属性绑定值 -->
<span :title="message">{{message}}</span>
</p>
<!-- @click 是 v-on:click 的缩写，指定事件的执行方法 -->
<p><button @click="reverseMessage">翻转文字</button></p>
<!-- “v-”前缀的特殊属性，是Vue的指令 -->
<!-- 使用 v-model 指令来实现双向数据绑定 -->
<p><input type="text" v-model="message"></p>
<!-- v-if ，当值为true时，才显示对应HTML -->
<p v-if="seen">你能看到我吗？</p>
<p><button @click="seenYN">显示/隐藏</button></p>
<h4>我爱吃的水果：</h4>
<ul>
<!-- v-for，循环输出HTML -->
<li v-for="fruit in fruits">{{fruit}}</li>
</ul>
<h4>周末计划：</h4>
<ol>
<!-- todo-item对应自定义组件TodoItem -->
<todo-item v-for="todo in todos" :todo="todo" :key="todo"></todo-item>
</ol>
</div>
<script>
// 定义自定义组件
const TodoItem = {
props: ['todo'],
template: '<li>{{todo}}</li>'
}
// 数据对象，有点像Flutter的State或者Provider
const dataObj = {
// 声明用到的自定义组件
components: {
TodoItem
},
// 定义数据对象，有用的属性可以先设置null，用于占位
data() {
console.log("vue3 demo, data()");
return {
counter: 0,
message: "hello vue",
seen: true,
fruits: ["apple", "orange", "bananas"],
todos: ["钢琴课", "绘画课", "看电影"]
}
},
// 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
created() {
console.log("vue3 demo, created()");
},
// 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
mounted() {
console.log("vue3 demo, mounted()");
setInterval(() => {
this.counter++
}, 1000);
},
// 操作数据的方法，一般用于页面元素的事件处理
methods: {
reverseMessage: function () {
// 操作数据，让Vue更新界面
this.message = this.message.split('').reverse().join('');
},
seenYN: function () {
this.seen = !this.seen;
}
}
}
// 数据与模板绑定
Vue.createApp(dataObj).mount('#app')
</script>
</body>
</html>
更详细的介绍和相关文档，可以访问Vue3的官网：