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

// 響應(yīng)式狀態(tài)
const count = ref(0)

// 計算屬性
const doubleCount = computed(() => count.value * 2)

// 方法
function increment() {
  count.value++
}

// 生命周期鉤子
onMounted(() => {
  console.log('組件已掛載')
})
</script>

<template>
  <div>
    <p>計數(shù): {{ count }}</p>
    <p>雙倍計數(shù): {{ doubleCount }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('組件已掛載')
  }
}

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    onMounted(() => {
      console.log('組件已掛載')
    })
    
    return {
      count,
      doubleCount,
      increment
    }
  }
}

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

// 基本類型的響應(yīng)式
const count = ref(0)
console.log(count.value) // 訪問值需要.value

// 對象類型的響應(yīng)式
const state = reactive({
  name: '張三',
  age: 25
})
console.log(state.name) // 直接訪問屬性

// 計算屬性
const doubleCount = computed(() => count.value * 2)

// 監(jiān)聽特定數(shù)據(jù)
watch(count, (newValue, oldValue) => {
  console.log(`count從${oldValue}變?yōu)?{newValue}`)
})

// 自動追蹤依賴
watchEffect(() => {
  console.log(`count: ${count.value}, name: ${state.name}`)
})

import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('組件已掛載')
    })
    
    onBeforeUnmount(() => {
      console.log('組件即將卸載')
    })
  }
}

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  return {
    count,
    doubleCount,
    increment,
    decrement
  }
}

<script setup>
import { useCounter } from './composables/useCounter'

const { count, doubleCount, increment, decrement } = useCounter(10)
</script>

<template>
  <div>
    <p>計數(shù): {{ count }}</p>
    <p>雙倍計數(shù): {{ doubleCount }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">減少</button>
  </div>
</template>

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  
  return { x, y }
}

// useLocalStorage.js
import { ref, watch } from 'vue'

export function useLocalStorage(key, defaultValue) {
  const value = ref(JSON.parse(localStorage.getItem(key)) || defaultValue)
  
  watch(value, val => {
    localStorage.setItem(key, JSON.stringify(val))
  })
  
  return value
}

<script setup>
import { ref, computed } from 'vue'
import { useLocalStorage } from './composables/useLocalStorage'

// 使用本地存儲保存待辦事項
const todos = useLocalStorage('todos', [])
const newTodo = ref('')

// 計算屬性：未完成的待辦事項數(shù)量
const remaining = computed(() => {
  return todos.value.filter(todo => !todo.completed).length
})

// 添加待辦事項
function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      completed: false
    })
    newTodo.value = ''
  }
}

// 刪除待辦事項
function removeTodo(id) {
  todos.value = todos.value.filter(todo => todo.id !== id)
}

// 切換待辦事項完成狀態(tài)
function toggleTodo(id) {
  const todo = todos.value.find(todo => todo.id === id)
  if (todo) {
    todo.completed = !todo.completed
  }
}
</script>

<template>
  <div class="todo-app">
    <h1>待辦事項列表</h1>
    
    <!-- 添加待辦事項 -->
    <div class="add-todo">
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo"
        placeholder="添加新的待辦事項" 
      />
      <button @click="addTodo">添加</button>
    </div>
    
    <!-- 待辦事項列表 -->
    <ul class="todo-list">
      <li v-for="todo in todos" :key="todo.id" :class="{ completed: todo.completed }">
        <input 
          type="checkbox" 
          :checked="todo.completed" 
          @change="toggleTodo(todo.id)" 
        />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">刪除</button>
      </li>
    </ul>
    
    <!-- 底部狀態(tài) -->
    <div class="todo-footer" v-if="todos.length">
      <span>{{ remaining }} 項待完成</span>
    </div>
  </div>
</template>

<style scoped>
.todo-app {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.add-todo {
  display: flex;
  margin-bottom: 20px;
}

.add-todo input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

.add-todo button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-list li.completed span {
  text-decoration: line-through;
  color: #999;
}

.todo-list li span {
  flex-grow: 1;
  margin: 0 15px;
}

.todo-list li button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.todo-footer {
  margin-top: 20px;
  color: #666;
}
</style>

// 不好的做法：創(chuàng)建不需要響應(yīng)式的大型數(shù)據(jù)
const data = reactive(hugeData)

// 好的做法：僅對需要響應(yīng)式的數(shù)據(jù)使用reactive或ref
const data = hugeData  // 普通對象
const reactiveState = reactive({ count: 0 })  // 只對需要響應(yīng)式的狀態(tài)使用reactive

import { shallowRef, shallowReactive } from 'vue'

// 只有.value的變更是響應(yīng)式的，而不會深度追蹤
const state = shallowRef({ count: 0 })

// 只有頂層屬性的變更是響應(yīng)式的
const user = shallowReactive({
  name: '張三',
  address: { city: '北京' } // 修改city不會觸發(fā)更新
})

<!-- 只渲染一次 -->
<div v-once>{{ expensiveComputation() }}</div>

<!-- 依賴項變化時才重新渲染 -->
<div v-memo="[item.id]">{{ item.name }}</div>

// 不好的做法：在方法中計算
function getFilteredItems() {
  return items.value.filter(item => item.price > 100)
}

// 好的做法：使用計算屬性
const filteredItems = computed(() => {
  return items.value.filter(item => item.price > 100)
})