<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('组件已挂载')
  }
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 响应式数据
    const count = ref(0)
    
    // 方法
    function increment() {
      count.value++
    }
    
    // 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    // 返回模板需要使用的数据和方法
    return {
      count,
      increment
    }
  }
}
</script>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

// 可复用的鼠标位置跟踪逻辑
function useMousePosition() {
  const x = ref(0)
  const y = ref(0)
  
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  
  return { x, y }
}

export default {
  setup() {
    const { x, y } = useMousePosition()
    
    return { x, y }
  }
}
</script>

<template>
  <div>鼠标位置: {{ x }}, {{ y }}</div>
</template>

// setup() 函数在 beforeCreate 之前执行
// 1. 创建独立的响应式上下文（setupContext）
// 2. 将 setup 返回的 refs/reactive 代理到组件实例上
// 3. 生命周期钩子（onMounted 等）映射到组件选项

// 限制（与 Vue 3 的重要区别）：
// - 不支持 <script setup> 语法糖（需要编译器支持）
// - defineProps/defineEmits 不可用
// - 不支持 Suspense、Teleport 等新内置组件
// - 响应式仍然是 Object.defineProperty（非 Proxy）

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

// 响应式数据（自动暴露给模板）
const count = ref(0)

// 方法（自动暴露给模板）
function increment() {
  count.value++
}

// 无需 return！
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义 props
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})

// 定义 emits
const emit = defineEmits(['update:count', 'submit'])

function handleClick() {
  emit('update:count', props.count + 1)
}
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>Count: {{ count }}</p>
    <button @click="handleClick">更新计数</button>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

// 导入的组件直接可用，无需注册
</script>

<template>
  <ChildComponent title="Hello" />
</template>

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // 响应式更新

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  user: {
    name: 'Alice'
  }
})

state.count++ // 响应式更新
state.user.name = 'Bob' // 响应式更新

import { ref, computed } from 'vue'

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

import { ref, watch, watchEffect } from 'vue'

const count = ref(0)

// watch: 显式指定侦听源
watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})

// watchEffect: 自动追踪依赖
watchEffect(() => {
  console.log(`当前 count 值: ${count.value}`)
})

import { onMounted, onUnmounted } from 'vue'

setup() {
  onMounted(() => {
    console.log('组件已挂载')
  })
  
  onUnmounted(() => {
    console.log('组件已卸载')
  })
}

import { 
  ref, 
  toRef, 
  toRefs, 
  unref, 
  isRef, 
  isReactive,
  shallowRef,
  shallowReactive,
  readonly
} from 'vue'

const state = reactive({ count: 0, name: 'Alice' })

// toRefs: 将响应式对象转为普通对象，每个属性都是 ref
const { count, name } = toRefs(state)

// toRef: 为某个属性创建 ref
const countRef = toRef(state, 'count')

// unref: 如果参数是 ref 则返回其值，否则返回参数本身
console.log(unref(count)) // 等同于 isRef(count) ? count.value : count

// isRef: 检查是否为 ref
console.log(isRef(count)) // true

// isReactive: 检查是否为 reactive 对象
console.log(isReactive(state)) // true

import { reactive } from 'vue'

const state = reactive({})

// ❌ Vue 2.7 无法检测属性添加
state.newProperty = 'value' // 非响应式

// ❌ Vue 2.7 无法检测属性删除
delete state.existingProperty // 非响应式

// ❌ Vue 2.7 无法检测数组索引赋值
const arr = reactive([1, 2, 3])
arr[0] = 10 // 非响应式

// ❌ Vue 2.7 无法检测数组长度修改
arr.length = 0 // 非响应式

import { reactive } from 'vue'

const state = reactive({})

// ✅ Vue 3 可以检测属性添加
state.newProperty = 'value' // 响应式

// ✅ Vue 3 可以检测属性删除
delete state.existingProperty // 响应式

// ✅ Vue 3 可以检测数组索引赋值
const arr = reactive([1, 2, 3])
arr[0] = 10 // 响应式

// ✅ Vue 3 可以检测数组长度修改
arr.length = 0 // 响应式

<!-- ❌ Vue 2.7 不支持 -->
<template>
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</template>

<!-- ✅ Vue 2.7 正确写法 -->
<template>
  <div>
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
  </div>
</template>

<!-- ✅ Vue 3 支持 -->
<template>
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</template>

// 阶段 1: 在新组件中使用 Composition API
export default {
  setup() {
    // 新逻辑使用 Composition API
    const count = ref(0)
    return { count }
  },
  
  // 阶段 2: 保留旧代码
  data() {
    return {
      // 旧数据
    }
  }
}

// 阶段 3: 逐步迁移到 <script setup>
<script setup>
const count = ref(0)
</script>

// ✅ 推荐：使用组合式函数
function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return { count, increment, decrement, reset }
}

// 使用
<script setup>
const { count, increment } = useCounter(10)
</script>

// ✅ 推荐使用 ref 的场景
const count = ref(0)           // 基本类型
const user = ref({ name: '' }) // 需要整体替换的对象

// ✅ 推荐使用 reactive 的场景
const state = reactive({       // 复杂对象，不需要整体替换
  user: { name: '' },
  settings: { theme: 'dark' },
  items: []
})

// ❌ 避免对 reactive 对象解构
const { user } = state         // 失去响应性！

// ✅ 使用 toRefs 保持响应性
const { user } = toRefs(state) // 保持响应性

import { onMounted, onUnmounted } from 'vue'

// ✅ 推荐：相关逻辑组织在一起
function useEventListener(target, event, callback) {
  onMounted(() => {
    target.addEventListener(event, callback)
  })
  
  onUnmounted(() => {
    target.removeEventListener(event, callback)
  })
}

// 而不是分散在组件各处

<script setup lang="ts">
import { ref, computed } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

// ✅ 类型推断
const user = ref<User | null>(null)

// ✅ Props 类型定义
const props = defineProps<{
  title: string
  count?: number
}>()

// ✅ Emits 类型定义
const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'submit'): void
}>()
</script>

// ❌ 错误：在 setup 中使用 this
setup() {
  this.count = 1 // 报错！
}

// ❌ 错误：直接解构 reactive
const state = reactive({ count: 0 })
const { count } = state // 失去响应性

// ✅ 正确：使用 toRefs
const { count } = toRefs(state)

// ❌ 错误：在 Vue 2.7 中使用 Teleport
<Teleport to="body">
  <Modal />
</Teleport> <!-- Vue 2.7 不支持 -->

// ❌ 错误：多根节点模板
<template>
  <div>A</div>
  <div>B</div> <!-- Vue 2.7 报错 -->
</template>

// vue.config.js
module.exports = {
  // 启用 Composition API
  transpileDependencies: true,
  
  // 如果使用 TypeScript
  chainWebpack: config => {
    config.resolve.extensions.add('.ts')
  }
}

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

# 使用 npm
npm update vue vue-template-compiler

# 或使用 yarn
yarn upgrade vue vue-template-compiler

// main.js
import Vue from 'vue'

// 检查版本
console.log(Vue.version) // 应显示 2.7.x

// 验证 Composition API 是否可用
import { ref, reactive, computed } from 'vue'
console.log('Composition API 可用:', typeof ref === 'function')

# 清理缓存重新安装
rm -rf node_modules package-lock.json
npm install

// main.js
import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  pinia,
  // ...
})