【vue3 学习】

模版语法

1. 文本插值

   <span>Message: {
       { msg }}</span>
   

2. Attribute 绑定

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

响应式基础

1. ref()​

   • Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构；
   • Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到

2. reactive()

   • 与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性
   • reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装
   • 值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：

     const raw = {}
     const proxy = reactive(raw)
     
     // 代理对象和原始对象不是全等的
     console.log(proxy === raw) // false
     

     • 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
     • 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
     • 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：

计算属性

1. 计算属性来描述依赖响应式状态的复杂逻辑

   <script setup>
   import { reactive, computed } from 'vue'
   
   const author = reactive({
     name: 'John Doe',
     books: [
       'Vue 2 - Advanced Guide',
       'Vue 3 - Basic Guide',
       'Vue 4 - The Mystery'
     ]
   })
   
   // 一个计算属性 ref
   const publishedBooksMessage = computed(() => {
     return author.books.length >