这是我参与「 第五届青训营 」伴学笔记创作活动的第 8 天。
前言
今天是 2023 年 1 月 22 日星期日，农历大年初一。
祝大家兔年快乐🐰
今天我继续写一些关于 Vue 框架的学习笔记。Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue3 组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。
下面是一个 button-counter 组件的实例，在每次点击后，计数器会加 1:
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
<button @click="count++">
点了 {{ count }} 次！
</button>`
})
app.mount('#app')
</script>
Vue3 监听属性
Vue3 具有监听属性 watch，可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器：
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script>
const app = {
data() {
return {
counter: 1
}
}
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
Vue3 计算属性
计算属性关键词是 computed，计算属性在处理一些复杂逻辑时很有用。
我们也可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
computed 属性默认只有 getter ，不过在需要时也可以提供一个 setter。
