《Vue3 三》Vue 中的 options 选项

template 选项：

template 选项：用于编写模板。

data 返回的对象中定义的数据可以通过插值语法等方式绑定到 template 模板中。当数据发生变化时，template 模板会自动进行更新来显示最新的数据。
template 模板对数据的监听默认就是深度的，即使改变的是对象中的某个属性，template 也可以监听到并自动更新显示。

<div id="app">
    // 当有 template 属性时，Vue 会忽略下面的内容；当没有 template 属性时，Vue 会将下面的内容作为模板来渲染
    <div>当前数字：{
  {count}}</div>
</div>

// 创建 app
const app = Vue.createApp({
    // 模版
    template: '<div>当前数字：{
  {count}}</div>',
    data() {
        return {
            count: 0,
        }
    },
})
// 挂载 app
app.mount('#app')

data 选项：

data 选项：属性值必须是一个函数，函数的返回值是一个对象，返回的对象会被 Vue 的响应式系统劫持，之后对该对象的任何访问或者修改都会在劫持中被处理。

在 Vue2.x 中，data 的属性值可以是一个函数，也可以是一个对象；但是在 Vue3.x 中，data 的属性值必须是一个函数，否则会在浏览器中直接报错。

<div id="app">
    <div>当前数字：{
  {count}}</div>
</div>

<script>
const app = Vue.createApp({
    // 必须是一个函数，返回一个对象
    data() {
        return {
            count: 0,
        }
    },
})
app.mount('#app')

methods 选项：

methods 选项：属性值是一个对象；在这个对象中可以定义方法，这些方法可以被绑定到模板中，在这些方法中可以通过 this 关键字直接访问到 data 返回的对象中的数据。

methods 中的函数不能使用箭头函数，因为箭头函数没有自己的作用域，会继承上级的作用域，this 将不会按照期望指向组件实例。

<div id="app">
    <div>当前数字：{
  {count}}</div>
    <button @click="handleAdd">+1</button>
    <button @click="handleDelete">-1<