这里记录下学习vue3的过程中的关键知识点和自己之前不懂的知识点

计算属性

通过vue3的computed()API可以创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value

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

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

vue官方互动教程地址：https://cn.vuejs.org/tutorial/#step-8

这里面有个不太常见的事件绑定写法，这里记录一下。
<button @click="hideCompleted = !hideCompleted">

这段代码是一个简短的Vue.js模板语法示例。

具体来说：

这是一个HTML按钮元素。

@click="hideCompleted = !hideCompleted"：这是Vue.js的事件监听语法。

@click：表示当按钮被点击时触发的事件。
"hideCompleted = !hideCompleted"：这是一个JavaScript表达式，当按钮被点击时执行。它的意思是取hideCompleted的当前值，将其取反（如果为true则变为false，如果为false则变为true），然后再将结果赋值给hideCompleted。
所以，这个按钮的主要功能是切换hideCompleted的值。如果hideCompleted初始值为true，点击按钮后它会变为false，再次点击则变为true，以此类推。

这种写法常见于Vue.js框架中，用于简洁地绑定事件和处理数据。