#Vue

<div id="app">{{ message }}</div>

<!-- 我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue： -->
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<script type="module">
  import { createApp, ref } from "vue";
  const app = createApp({
    setup() {
      const message = ref("Hello Vue!");
      return {
        message,
      };
    },
  });
  app.mount("#app");
</script>

<script type="module">
  import { createApp } from "vue";

  /*
    根组件：
        - 我们传入的createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件
        - 大多数真实的应用都是由一颗嵌套的、可重用的组件树组成的。例如：一个待办事项（Todos）应用的组件书可能是这样的：
        App (root component)
            ├─ TodoList
            │  └─ TodoItem
            │     ├─ TodoDeleteButton
            │     └─ TodoEditButton
            └─ TodoFooter
               ├─ TodoClearButton
               └─ TodoStatistics
*/

  const app = createApp({
    /* 根组件选项 */
  });
</script>

<div id="app"></div>

<script type="module">
  /*  
      应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
      .mount()方法应该始终在整个应用配置和资源注册完成之后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件而非应用实例。
  */
  app.mount("#app");
</script>

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<!--
    当组件没有设置`template`选项时，Vue将会自动使用容器的`innerHTML`作为模板
-->

<script type="module">
  import { createApp } from "vue";

  const app = createApp({
    data() {
      return {
        count: 0,
      };
    },
  });

  app.mount("#app");
</script>

<script type="module">
  app.config.errorHandler = (err) => {
    /* 处理错误 */
  };

  /* 
        应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：
        
        这使得`TodoDeleteButton`在应用的任何地方都是可用的。
    */
  app.component("TodoDeleteButton", TodoDeleteButton);
</script>

<script type="module">
  /*
      如果你正在使用Vue来增强服务端渲染HTML，并且只想要Vue去控制一个大型页面中特殊的一小部分，应避免将一个单独的Vue应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去
  */

  const app1 = createApp({
      /* ... */
  })

   const app2 = createApp({
      /* ... */
  })

   const app3 = createApp({
      /* ... */
  })

  app1.mount('#app1')
  app2.mount("#app2")
  app3.mount("#app3")

  ...
</script>

<!--
    Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现DOM上。所有的Vue模板都是语法层面合法的HTML，可用被符合规范的浏览器和HTML解析器解析。
    在底层机制中，Vue会将模板编译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。
-->

<!--
    文本插值：最基本的数据绑定形式是文本插值，使用“Mustache”语法（即：双大括号）
    双大括号标签会被替换为相应组件实例中的msg属性的值，同时每次msg属性更改时，它也会同步更新
-->
<span> Message: {{ msg }} </span>

<!--
    v-html: 双大括号会将数据解释为纯文本，而不是HTML。若想插入HTML，则需要使用v-html指令
    
    安全警告：
        在网站上动态渲染任何HTML是非常危险的，因为这非常容器造成XSS漏洞。请仅在内容安全可信时再使用v-html，并且永远不要使用用户提供的HTML内容。
-->
<p>Using text interpolation: {{ rawHTML }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<p>
  <!--
    Attribute绑定：    
        双大括号不能在HTML attribute中使用，想要响应式地绑定一个attribute，应该使用v-bind指令。
        v-bind指令指示Vue将元素的id attribute与组件的dynamicId属性保存一致。如果绑定的值是null或undefined，那么该attribute将会从渲染的元素上移除
        
    简写：
        因为v-bind非常常用，所以提供了特定的简写语法： <div :id="dynamicId"></div>
        
    同名简写：
        仅支持3.4版本及以上，如果attribute的名称与绑定的JavaScript变量的名称相同，那么可用进一步简化语法，省略attribute值  
        <div :id></div> === <div v-bind:id></div> === <div :id="id"></div>
 -->
</p>

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
<div v-bind:id></div>
<div :id></div>

<!--
    布尔型 Attribute:
        布尔型 Attribute: 依据 true / false 值来决定 attribute 是否应该存在于该元素上。
        disabled就是最常见的例子之一，当isButtonDisable为真值或一个空字符串(即<button disable="">)时，元素包含这个disbaled的attribute。而当其为其他假值时，attribute将被忽略
-->
<button :disabled="isButtonDisabled">
  Button<button>
    <!--
    动态绑定多个值：
        如果有这样一个包含多个attribute的JavaScript对象：
        const objectOfAttrs = {
            id: 'container',
            class: 'wrapper',
            style: 'background-color: green'
        }
    通过不带参数的v-bind，可用将它们绑定到单个元素上
-->
    <div v-bind="objectOfAttrs"></div>

    <!--
    使用JavaScript表达式：
        Vue实际上在所有的数据绑定中，都支持完整的JavaScript表达式，这些表达式都会被作为JavaScript代码，以当前组件实例为作用域进行解析。
        在Vue模板内，JavaScript表达式可用被使用在如下场景中：
            - 在文本插值中(双大括号)
            - 在任何Vue指令(以v-开头的特殊attribute)attribute的值中
        仅支持表达式：
            - 每个绑定仅支持单一表达式，也就是一段能被求值的JavaScript代码，一个简单的判断方法就是是否可用合法地写在return后面
        调用函数：
            可用在绑定的表达式中使用一个组件暴露的方法，但是绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
        受限的全局访问：
            模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表，该列表中会暴露常用的内置全局对象，比如Math和Date。没有显示包含在列表中的全局对象将不能够在模板内表达式中访问，列入用户附加在window上的属性。但是，你可以自行在app.config.globalProperties上显示地添加它们，供所有的Vue表达式使用。
-->
    <div>{{ number + 1 }}</div>
    <div>{{ ok ? 'yes' : 'no' }}</div>
    <div>{{ message.split("").reverse().join('') }}</div>
    <div :id="`list-${id}`"></div>
    <time :title="toTitleDate(date)" :datetime="date"
      >{{ formatDate(date) }}</time
    >

    <!--
    v-if：指令会基于表达式的值的真假来移除或插入该元素
-->
    <div v-if="seen">...</div>

    <!--
    v-on：它将监听DOM事件
-->
    <a v-on:click="doSometing">...</a>
    <a @click="doSomething">...</a>
    <form @submit.prevent="onSubmit">...</form>
  </button>
</button>

<div id="app">
  <!-- 动态绑定字符串 -->
  <!-- class="bbb foo bar baz" -->
  <div class="bbb" :class="foo">{{ foo }}</div>

  <!-- 绑定值为一个对象，那么会通过对象的value的真假值来决定是否把key添加到类中 -->
  <!-- 这里isActive为true，渲染结果class='active' -->
  <div :class="{ active: isActive }">{{ isActive }}</div>

  <!-- 绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象 -->
  <!-- 这将渲染：class='active' -->
  <div :class="classObject">
    {{ classObject.active }} - {{ classObject['text-danger'] }}
  </div>

  <!-- 也可以绑定一个返回对象的计算属性，这也是一个常见且很有用的技巧 -->
  <div :class="classObjectComputed">Mio</div>

  <!-- 我们还可以给:class绑定一个数组来渲染多个class -->
  <!-- 数组里面的元素可以是字符串，对象和表达式等 -->
  <div :class="classArray">YQZ</div>
</div>

<script setup lang="ts">
  import { ref, reactive, computed } from "vue";
  const foo = ref("foo bar baz");
  const isActive = ref(true);

  const classObject = reactive({
    active: true,
    "text-danger": false,
  });

  const classObjectComputed = computed(() => ({
    active: isActive.value,
    "text-danger": !isActive.value,
  }));

  const classArray = ref([
    "foo",
    "bar",
    { active: true },
    classObjectComputed.value,
  ]);
</script>

<!-- 对于只有一个根元素的组件，当使用class attribute时，这些class会被添加到根元素上并与该元素上已有的class合并 -->

<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>

<!-- 在使用时添加了一些class -->
<my-component class="baz boo"></my-component>

<!-- 渲染出的HTML为 -->
<p class="foo bar baz boo">Hi!</p>

<!-- 如果你的组件有多个根元素，那么需要指定哪个根元素来接收这个class，可以通过$attrs属性来指定接收 -->

<!-- my-component 模板使用 $attrs时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<my-component class="baz"></my-component>
<!-- 这将被渲染为 -->
<p class="baz">Hi!</p>
<span>This is a child component</span>

<div id="app">
  <!-- :style支持绑定JavaScript对象值，对于的是HTML元素style属性 -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Mio</div>

  <!-- 尽管推荐使用camelCase，但:style也支持kebab-cased形式的CSS属性key(对应其CSS中的实际名称) -->
  <div :style="{ color: activeColor, 'font-size': fontSize + 'px' }">Mio</div>

  <!-- 直接绑定一个样式对象和计算属性，这样可以使模板更加简洁 -->
  <!-- 同时，:style指令也可以和常规的style attribute共存，就和:class一样 -->
  <div style="color: red" :style="styleObject">YQZ</div>

  <!-- 绑定数组 -->
  <!-- 这些对象会被合并后渲染在同一元素上 -->
  <div :style="[styleObject, 'color: red', { display: 'inline' }]">Foo</div>
</div>

<script setup lang="ts">
  import { ref } from "vue";
  const activeColor = ref("red");
  const fontSize = ref(30);

  const styleObject = ref({
    fontSize: 24 + "px",
    "background-color": "pink",
  });
</script>

<!--
    v-if、v-else-if和v-else
    v-if和v-show
-->

<!-- v-if指令用于条件性地渲染一块内容，这块内容只会在指定的表达式返回值为真值时才会被渲染 -->
<!-- v-else-if和v-else必须是和v-if在同一级别的作用域下才会生效，和JavaScript的逻辑一样 -->
<div v-if='type === "A"'>A</div>

<div v-else-if="type === 'B'">B</div>

<div v-else-if="type === 'C'">C</div>

<div v-else>Not A/B/C</div>

<!-- 另外一个可以按条件显示一个元素的指令是v-show，其用法基本和v-if一样 -->
<!-- 不同之处在于v-show会在DOM渲染中保留该元素，v-show仅切换了该元素上名为display的css属性 -->
<!-- v-show不支持在template元素上使用，并且也不能与v-else-if和v-else搭配使用 -->
<h1 v-show="ok">Hello!</h1>

<!--
  我们可以使用v-for指令来渲染一个数组列表，v-for指令的值需要使用`item in items`形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名。
  
  在v-for块中可以完整地访问父级作用域内的属性和变量，同时,v-for也支持使用可选的第二个参数表示当前项的位置索引。
  
  对于多层嵌套的v-for，作用域的工作方式和函数的作用域很类似。每个v-for作用域都可以访问到父级作用域。
  
  当然，也可以使用of作为分隔符来代替in，这更接近JavaScript的迭代器语法。
-->

<app id="app">
  <ul>
    <li v-for="({ foo }, index) in items">{{ foo }} - {{ index }}</li>
  </ul>
</app>

<script setup lang="ts">
  import { ref } from "vue";

  const items = ref([{ foo: "Mio" }, { foo: "YQZ" }]);
</script>

<!-- 
   你也可以使用v-for来遍历一个对象的所有属性，遍历的顺序会基于该对象调用的Object.values()的返回值来决定。
   
   其中，也可以通过提供第二个参数来表示属性名(例如Key)，第三个参数将表示索引值
 -->

<div id="app">
  <h2 v-for="(value, key, index)">{{ value }} - {{ key }} - {{ index }}</h2>
</div>

<script setup lang="ts">
  import { ref } from "vue";

  const obj = ref({
    name: "Mio",
    age: 16,
  });
</script>

<div id="app">
  <ul>
    <li v-for="item in range">{{ item }}</li>
  </ul>
</div>

<script setup lang="ts">
  import { ref } from "vue";

  const range = ref(30);
</script>

<!-- 
  与模板上的v-if类似，你也可以在template标签上使用v-for来渲染一个包含多个元素的块
 -->

<div id="app">
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation">{{ item.desc }}</li>
  </template>
</div>

<!--
  这会抛出一个错误，因为属性 todo 此时没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}</li>

<!--
  在外先包装一层template再在其上使用v-for可以解决这个问题(当然，这也更加明显易读)
-->
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>

<!--
    在没有Key的情况下，删掉数组中第一个元素后，复用旧DOM 0，只替换标签和文本内容，导致了保留输入框的临时值, 发现新的列表长度是1，没有索引1上的VNode，然后销毁旧DOM1
    
    有key的情况下：发现key=101在新列表中不存在了，删掉整个旧DOM 0， 发现key=102任然存在，但位置从索引1移动到了索引0，Vue会移动/重排序整个旧DOM 1到索引0的位置
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        width: 900px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
      }

      .button {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <div>
          <h2>没有Key</h2>
          <div v-for="item in forms">
            {{ item.label }}({{item.id}})<input type="text" />
          </div>
        </div>

        <div>
          <h2>有Key</h2>
          <div v-for="item in forms" :key="item.id">
            {{ item.label }}({{item.id}})<input type="text" />
          </div>
        </div>
      </div>
      <div class="button">
        <button @click="deleteFirstArry">删除第一项</button>
      </div>
    </div>

    <!-- 我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue： -->
    <script type="importmap">
      {
        "imports": {
          "vue": "./../lib/vue.esm-browser.js"
        }
      }
    </script>

    <script type="module">
      import { createApp, ref } from "vue";
      const app = createApp({
        setup() {
          const forms = ref([
            {
              label: "姓名",
              id: 101,
            },
            {
              label: "邮箱",
              id: 102,
            },
          ]);

          const deleteFirstArry = () => {
            forms.value.shift();
          };

          return {
            forms,
            deleteFirstArry,
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

<!-- 
  但是，不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递props
  不自动将item注入组件的原因是，这会使组件与v-for的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用
 -->
<my-component v-for="item in items" :key="item.id"></my-component>

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
>
</my-component>

<li v-for="n in evenNumbers">{{ n }}</li>

<!-- 在计算属性不可行的情况下(列入在多层嵌套的v-for循环中)，可以使用如下方法 -->
<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

<script setup>
  import { ref, computed } from "vue";

  const numbers = ref([1, 2, 3, 4, 5]);
  const sets = ref([
    [1, 2, 3, 4, 5],
    [6, 7, 8, 9, 10],
  ]);

  const evenNumbers = computed(() => {
    return numbers.value.filter((n) => n % 2 === 0);
  });

  function even(numbers) {
    return numbers.filter((number) => number % 2 === 0);
  }

  /* 
   在计算属性中使用reverse()和sort()的时候务必小心！ 这两个方法将变更原始数组，计算函数中不应该这么做，请在调用这些方法之前创建一个原数组的副本：
   - return numbers.reverse()
   + return [...numbers].reverse()
 */
</script>

<!-- 内联事件处理器 -->
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

<!-- 方法事件处理器 -->
<!-- 
  方法事件处理器会自动接收原生DOM事件并触发执行。下面例子中，我们能够通过触发事件的`event.target`访问到该DOM元素
 -->
<button @click="greet">Greet</button>

<!-- 在内联事件处理器中访问事件参数 -->
<!-- 
  有时我们需要在内联事件处理器中访问原生DOM事件。那么可以向该处理器方法传入一个特殊的 `$event` 变量，或者使用内联箭头函数
-->
<!-- 使用特殊的 `$event` 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">Submit</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be sumiteed yet.', event)">
  Submit
</button>

<script setup lang="ts">
  import { ref } from "vue";
  const count = ref(0);
  const name = ref("Vue.js");

  function greet(event) {
    alert(`Hello ${name.value}!`);
    /* `event` 是DOM原生事件 */
    if (event) {
      alert(event.target.tagName);
    }
  }

  function warn(message, event) {
    /* 这里可以访问原生事件 */
    if (event) {
      event.preventDefault();
    }
    alert(message);
  }
</script>

<script setup lang="ts">
  function handleChange(event) {
    /* `event` 隐式地标注为 any 类型 */
    console.log(event.target.value);
  }

  /* 使用类型断言 */
  function handleChange(event: Event) {
    console.log((event.target as HTMLInputElement).value);
  }
</script>

<template>
  <input type="text" @change="handleChange" />
</template>

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<from @submit.prevent="onSubmit"></from>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThis"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThis">...</div>

<!--
  .capture、.once和.passive修饰符与原生`addEventListener`事件相对应
-->
<!-- 添加事件监听器，使用`capture`捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理器，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为(scrolling)将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<!-- .passive修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能 -->
<div @scroll.passive="onScroll">...</div>

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

<!-- 
  你可以直接使用 `KeyboardEvent.key` 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式 
  下面这个例子中，仅会在 `$event.key` 为 `PageDown` 时调用事件处理
-->
<input @keyup.page-down="onPageDown" />

<!--
  TIP:
    请注意，`系统按键修饰符`和`常规按键不同`，与`keyup`事件一起使用时，`该按键必须在事件发出时处于按下状态`。换句话说：`keyup.ctrl`只会在你仍然按 `CTRL` 但松开了`另一个键时被触`发。若你`单独松开ctrl键将不会触发`。
-->

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

<!-- .exact修饰符允许精确控制触发事件所需的系统修饰符的组合 -->
<!-- 当按下ctrl时，即使同时按下Alt或shift也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

<!-- .left .right .middle -->
<!--
  但请注意，.left，.right 和 .middle 这些修饰符名称是基于常见的右手用鼠标布局设定的，但实际上它们分别指代设备事件触发器的“主”、“次”，“辅助”，而非实际的物理按键。因此，对于左手用鼠标布局而言，“主”按键在物理上可能是右边的按键，但却会触发 .left 修饰符对应的处理程序。又或者，触控板可能通过单指点击触发 .left 处理程序，通过双指点击触发 .right 处理程序，通过三指点击触发 .middle 处理程序。同样，产生“鼠标”事件的其他设备和事件源，也可能具有与“左”，“右”完全无关的触发模式。
-->

<!--
  另外，`v-model`还可以用于各种不同类型的输入，<textarea>、<select>元素。它会根据所使用的元素自动使用对应的DOM属性和事件组合。
  文本类型的<input>和<textarea>元素会绑定value property并侦听input事件。
  <input type="checkbox">和<input type="radio">会绑定checked property并侦听change事件。
  <select>会绑定value property并侦听change事件。
-->
<!--
  注意：
    v-model会忽略任何表单上初始的value、checked或selected attribute。它将始终将当前绑定的JavaScript状态视为数据的正确来源。你应该在JavaScript中使用响应式系统的API声明该初始值。
-->

<input :value="text" @input="event => text = event.target.value" />
<input v-model="text" />

<script setup lang="ts">
  import { ref } from "vue";

  const text = ref("");
</script>

<!-- 默认情况下，v-model会在每次input事件后更新(IME拼写阶段的状态例外)，你可以添加lazy修饰符来改为在每次change事件后更新数据 -->

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="ms" />

<!--
  .number: 如果想让用户输入自动转换为数字，可以在v-model后添加.number修饰符来管理输入
  如果该值无法被parseFloat()处理，那么将返回原始值。特别时当输入为空时(例如用户清空输入字段之后)，会返回一个空字符串。这种行为与DOM属性valueAsNumber有所不同。
  number修饰符会在输入框有type="number"时自动启用。
-->
<input v-model.number="age" />

<!-- 
  .trim: 如果想要默认自动去除用户输入内容两端的空格，可以在v-model后添加.trim修饰符
 -->
<input v-model.trim="msg" />

<script setup>
  import { ref, watch } from "vue";

  const question = ref("");
  const answer = ref("Questions usually contain a question mark. ;-)");
  const loading = ref(false);

  /* 可以直接侦听一个ref */
  watch(question, async (newQuestion, oldQuestion) => {
    if (newQuestion.includes("?")) {
      loading.value = true;
      answer.value = "Thinking...";
      try {
        const res = await fetch("https://yesno.wtf/api");
        answer.value = (await res.json()).answer;
      } catch (error) {
        answer.value = "Error! Could not reach the API. " + err;
      } finally {
        loading.value = false;
      }
    }
  });
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />
  </p>
</template>

<script setup>
    import { ref } from "vue"

    const x = ref(0)
    const y = ref(0)

    /* 单个 ref */
    watch(x, (newX) => {
      console.log(`X is ${newX}`)
    })

    /* getter 函数 */
    watch(
      () => x.value + y.value,
      (sum) => {
        console.log(`sum of x + y is: ${sum}`)
      }
    )

  /* 多个来源组成的数组*/
  watch([x, () => y.value], [newX, newY] => {
    console.log(`x is ${newX} and y is ${newY}`)
  })
</script>

<script setup>
  import { reactive } from "vue";

  const obj = reactive({ count: 0 });

  /* 错误，因为 watch() 得到的参数是一个 number */
  watch(obj.count, (count) => {
    console.log(`Count is: ${count}`);
  });

  /* 这里需要用一个返回该属性的 getter 函数 */
  watch(
    () => obj.count,
    (count) => {
      console.log(`Count is: ${count}`);
    },
  );
</script>

<script setup>
  import { reactive } from "vue";

  const obj = reactive({ count: 0 });

  watch(obj, (newValue, oldValue) => {
    /* 在嵌套的属性变更时触发 */
    /* 注意：`newValue` 此处和 `oldValue` 是相等的 */
    /* 因为它们是同一个对象 */
  });

  /* --------------------------- 内容分割线--------------------------- */

  /* 相比之下，一个返回响应式对象的getter函数，只有在返回不同的对象时，才会触发回调 */
  watch(
    () => state.someObject,
    () => {
      /* 仅当 state.someObject 被替换时触发 */
    },
  );

  /* 当然，也可以给上面这个例子显示地加上`deep`选项，强制转成深层侦听器 */
  watch(
    () => state.someObject,
    (newValue, oldValue) => {
      /* 注意： `newValue` 此处和 `oldValue` 是相等的 */
      /* 除非 state.someObject 被整个替换掉了 */
    },
    { deep: true },
  );
</script>

<script setup>
  /* 我们可以传入`immediate: true`选项来强制侦听器的回调立即执行 */
  watch(
    source,
    () => {
      /* 立即执行，且当`source`改变时再次执行 */
    },
    { immediate: true },
  );
</script>

<script setup>
  watch(
    source,
    (newValue, oldValue) => {
      /* 当 `source` 变化时，仅触发一次 */
    },
    { once: true },
  );
</script>

<script setup>
  import { ref, watch, watchEffect } from "vue";

  const todoId = ref(1);
  const data = ref(null);
  const foo = ref("FOO");

  watch(
    todoId,
    async () => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${todoId.value}`,
      );
      data.value = await response.json();
    },
    { immediate: true },
  );

  /* 上面的watch可用watchEffect改写 */
  /* 在第一次执行中，因为data.value是在await之后，不会被Vue添加到依赖列表中，就算data.value发生改变，也不会执行回调 */
  watchEffect(async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`,
    );
    data.value = await response.json();
  });

  /* 因为在第一次执行回调中，遇到了return，没有执行到下面一行代码，所以foo不会被添加到Vue的依赖里面，就算foo.value的值发生了改变，也不会执行回调 */
  watchEffect(() => {
    if (true) return;
    console.log(foo.value);
  });
</script>

<script setup>
  import { watch, watchEffect, ref, onWatcherCleanup } from "vue";

  const id = ref(0);

  /* 
    在这里案例中，如果在请求完成之前`id`发生了变化怎么办？ 当上一个请求完成时，它仍会使用已经过时的ID值触发回调。
    理想情况下，我们希望能够在`id`变为新值时取消过时的请求。
  */
  watch(id, (newId) => {
    fetch(`/api/${newId}`).then(() => {
      /* 回调逻辑 */
    });
  });

  /*
    有两种方式可以做到，第一种可以使用`onWatcherCleanup()`API来注册一个清理函数，当侦听器失效并准备重新运行时会被调用。第二种可以使用`onCleanup`函数作为第三个参数传递给侦听器回调，以及watchEffect作用函数的第一个参数
  */
  watch(id, (newId) => {
    const controller = new AbortController();

    fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
      /* 回调逻辑 */
    });

    onWatcherCleanup(() => {
      /* 终止过期请求 */
      controller.abort();
    });
  });

  watch(id, (newId, oldId, onCleanup) => {
    const controller = new AbortController();

    fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
      /* 回调逻辑 */
    });

    /* 钩子在下一次 watch 运行前被调用 */
    onCleanup(() => {
      controller.abort();
    });
  });
</script>

<!-- Post Watchers -->
<!-- 如果想在侦听器回调中能访问被Vue更新之后的所属组件的DOM，需要指明`flush: 'post'`选项 -->

<script setup>
  import { watch, watchEffect, watchPostEffect, watchSyncEffect } from "vue";

  watch(source, callback, { flush: "post" });
  watchEffect(callback, { flush: "post" });

  /* 后置刷新的watchEffect有一个更方便的别名watchPostEffect */
  watchPostEffect(() => {
    /* 在Vue更新后执行 */
  });

  /* 同步侦听器 */
  /* 还可以创建一个同步触发的侦听器，它会在Vue进行任何更新之前触发 */
  watch(source, callback, { flush: "sync" });
  watchEffect(callback, { flush: "sync" });

  /* 当然，同步触发的watchEffect也有一个方便的别名，watchSyncEffect */
  watchSyncEffect(() => {
    /* 在响应式数据变化时同步执行 */
  });
</script>

<script setup>
  import { ref, watchEffect } from "vue";

  /* 它会自动停止 */
  watchEffect(() => {});

  /* ...这个则不会 */
  setTimeout(() => {
    watchEffect(() => {});
  }, 1000);

  /* 要手动停止一个侦听器，需要调用watch或watchEffect返回的函数 */
  const unwatch = watchEffect(() => {});
  /* ...当侦听器不再需要时 */
  unwatch();

  /* 注意：需要异步创建侦听器的情况很少，尽可能选择同步创建。如果需要等待一些异步数据，可以使用条件式的侦听逻辑 */
  const data = ref(null); /* 需要异步请求得到的数据 */

  watchEffect(() => {
    if (data.value) {
      /* 数据加载后执行某些操作 */
    }
  });
</script>

<input ref="inputEl" />

<script setup>
  import { ref, onMounted } from "vue";

  const inputEl = ref(null);

  onMounted(() => {
    input.value.focus();
  });
</script>

<!-- 在使用TypeScript时，Vue的IDE支持和`vue-tsc`将根据匹配的`ref`attribute所用的元素或组件自动推断input.value的类型 -->

<script setup>
  import { useTemplateRef, onMounted, watchEffect } from "vue";

  /* Vue 3.5+ */
  /* 第一个参数必须与模板中的 ref 值匹配 */
  const input = useTemplateRef("my-input");

  onMounted(() => {
    input.value.focus();
  });

  watchEffect(() => {
    if (input.value) {
      input.value.focus();
    } else {
      /* 此时还未挂载，或此元素已经被卸载(例如通过v-if控制) */
    }
  });
</script>

<template>
  <input ref="my-input" />
</template>

<!-- 在3.5之前的版本尚未引入useTempalteRef()，我们需要声明一个与模板里ref attribute匹配的引用 -->
<script setup>
  import { ref, onMounted } from "vue";

  /* 声明一个 ref 来存放该元素的引用 */
  /* 必须和模板里的 ref 同名 */
  const input = ref(null);

  onMounted(() => {
    input.value.focus();
  });
</script>

<template>
  <input ref="input" />
</template>

<script setup>
  import { ref } from "vue";

  const a = 1;
  const b = ref(2);

  /* 像 defineExpose 这样的编译器宏不需要导入 */
  /* 
    当父组件通过模板引用获取到了该组件的实例时，得到的实例类型为{ a: number, b: number }(ref都会自动解包，和一般的实例一样) 
    请注意：defineExpose必须在任何await操作之前调用。否则，在await操作后暴露的属性和方法将无法访问
  */
  defineExpose({
    a,
    b,
  });
</script>

<!-- 
  为了获取导入组件的实例类型，我们需要先通过 typeof 获取其类型，然后使用TypeScript的内置 InstanceType 工具提取其实例类型
-->
<script setup lang="ts">
  import { useTemplateRef } from "vue";

  import Foo from "./Foo.vue";
  import Bar from "./Bar.vue";

  type FooType = InstanceType<typeof Foo>;
  type BarType = InstanceType<typeof Bar>;

  const compRef = useTemplateRef<FooType | BarType>("comp");
</script>

<template>
  <component :is="Math.random() > 0.5 ? Foo : Bar" ref="comp" />
</template>

<!--
  如果组件的具体类型无法获得，或者并不关心组件的具体类型，那么可以使用 `ComponentPublicInstance`，这是会包含所有组件都共享的属性，比如 $el
-->
<script setup lang="ts">
  import { useTemplateRef } from "vue";
  import type { ComponentPublicInstance } from "vue";

  const child = useTemplateRef<ComponentPublicInstance>("child");
</script>

<!-- 如果引用的组件是一个泛型组件，例如MyGenericModal -->
<!-- MyGenericModal.vue -->
<script setup lang="ts" generic="ContentType extends string | number">
  import { ref } from "vue";

  const content = ref<ContentType | null>(null);

  const open = (newContent: ContentType) => (content.value = newContent);

  defineExpose({
    open,
  });
</script>

<!-- 
  则需要使用 vue-component-type-helpers库中的ComponentExposed引用组件类型，因为InstanceType在这种场景下不起作用
-->
<!-- App.vue -->
<script setup lang="ts">
  import { useTemplateRef } from "vue";
  import MyGenericModal from "./MyGenericModal.vue";
  import type { ComponentExposed } from "vue-component-type-helpers";

  const modal =
    useTemplateRef<ComponentExposed<typeof MyGenericModal>>("modal");

  const openModal = () => {
    modal.value?.open("newValue");
  };
</script>

<script setup>
  import { ref, useTemplateRef, onMounted } from "vue";

  const list = ref([
    /* ... */
  ]);

  const itemRefs = useTemplateRef("items");

  onMounted(() => console.log(itemRefs.value));
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">{{ item }}</li>
  </ul>
</template>

<!-- Vue 3.5 版本以下的用法 -->
<script setup>
  import { ref, onMounted } from "vue";

  const list = ref([
    /* ... */
  ]);

  const itemRefs = ref([]);

  onMounted(() => console.log(itemRefs.value));
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">{{ item }}</li>
  </ul>
</template>

<input :ref="(el) => { /* 将el赋值给一个数据属性或ref变量 */ }" />

<!-- child.vue -->
<script setup>
  import { ref } from "vue";

  const count = ref(0);
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

<!-- 不适用构建工具 -->
<script type="module">
  import { ref } from "vue";

  /*
    这里的模板是一个内联的JavaScript字符串，Vue将会在运行时编译它。你也可以使用ID选择器来指向一个元素（通常是原生的<template>元素），Vue将会使用其内容作为模板来源。
  */
  export default {
    setup() {
      const count = ref(0);
      return {
        count,
      };
    },
    /* 也可以针对一个DOM内联模板，使用选择器：template: '#child' */
    template: `<button @click="count++"> You clicked me {{ count }} times.</button>`,
  };
</script>

<div id="child">
  <button @click="count++">You clicked me {{ count }} times.</button>
</div>

<!-- BlogPost.vue -->
<!--
  defineProps是一个仅<script setup>中可用的编译宏命令，并不需要显式地导入。声明的props会自动暴露给模板。defineProps会返回一个对象。其中包含了可以传递给组件的所有props
-->
<script setup>
  const props = defineProps(["title"]);
  console.log(props.title);
</script>

<template>
  <h2>{{ title }}</h2>
</template>

<!-- 如果没有使用<script setup>，props必须以props选项的方式声明，props对象会作为setup()函数的第一个参数被传入 -->
<script>
  export default {
    props: ["title"],
    setup(props) {
      console.log(props.title);
    },
  };
</script>

<!-- 当一个prop被注册后，可以像这样以自定义attribute的形式传递数据给它 -->
<BlogPost title="My Journey with Vue" />
<BlogPost title="Blogging with Vue" />
<BlogPost title="Why Vue is so fun" />

<!-- 在实际运用中，我们可能在父组件中会有如下的一个博客文章数组 -->
<script setup>
  import { ref } from "vue";

  const posts = ref([
    { id: 1, title: "My journey with Vue" },
    { id: 2, title: "Blogging with Vue" },
    { id: 3, title: "Why Vue is so fun" },
  ]);
</script>

<!-- 这种情况下，我们可以使用v-for来渲染它们 -->
<BlogPost v-for="post in posts" :key="post.id" :title="post.title" />

<!-- 
  这被称之为“运行时声明”，因为传递给defineProps()的参数会作为运行时的props选项使用
-->
<script setup lang="ts">
  const props = defineProps({
    foo: { type: string, required: true },
    bar: Number,
  });

  props.foo; /* string */
  props.bar; /* number | undefined */
</script>

<!-- 然而，通过泛型参数来定义props的类型通常更直接 -->
<!--
  这被称之为“基于类型的声明”。编译器会尽可能地尝试根据类型参数推导出等价的运行时选项。在这种场景下，我们第二个例子中编译出的运行时选项和第一个完全一致的。
  基于类型的声明或者运行时声明可以择一使用，但是不能同时使用
-->
<script setup lang="ts">
  const props = defineProps<{
    foo: string;
    bar?: number;
  }>();
</script>