• v-if 和 v-show

• 1、v-if 创建、删除DOM元素，v-show 仅切换了该元素上名为 display 的 CSS 属性。
• 2、v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。
• 3、频繁切换，使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

• v-if 和 v-for

• 当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

计算属性缓存 vs 方法

• 计算属性具有缓存性 相关属性变化时才重新计算，否则返回之前计算的结果

• 方法 调用总是会在重渲染发生时再次执行函数

• 将逻辑代码写在计算属性里

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

<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 > 0 ? 'Yes' : 'No'
})
</script>

声明响应式状态

• ref()

• 在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

import { ref } from 'vue'

const count = ref(0)

• reactive()

• 还有另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

reactive() 的局限性

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

应用实例

• 通过 createApp 函数创建一个新的 应用实例：

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

• 在命令行中运行以下命令

npm create vue@latest

• 接着是TypeScript 和测试支持之类的可选功能提示：

? Project name: … <your-project-name>
? Add TypeScript? … No / Yes
? Add JSX Support? … No / Yes
? Add Vue Router for Single Page Application development? … No / Yes
? Add Pinia for state management? … No / Yes
? Add Vitest for Unit testing? … No / Yes
? Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

• 如果不确定是否要开启某个功能，可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

Vue 是渐进式框架

• 1、无需构建步骤，渐进式增强静态的 HTML
• 2、在任何页面中作为 Web Components 嵌入
• 3、单页应用 (SPA)
• 4、全栈 / 服务端渲染 (SSR)
• 5、Jamstack / 静态站点生成 (SSG)
• 6、开发桌面端、移动端、WebGL，甚至是命令行终端中的界面