Vue Computed Properties and Watchers

Computed Properties

Computed properties are properties derived from reactive data. They cache their results and only recompute when their dependencies change.

Basic Usage

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

const firstName = ref('张')
const lastName = ref('三')

// 计算属性
const fullName = computed(() => {
  return firstName.value + lastName.value
})
</script>

<template>
  <div>
    <p>姓：<input v-model="firstName" /></p>
    <p>名：<input v-model="lastName" /></p>
    <p>全名：{{ fullName }}</p>
  </div>
</template>

Writable Computed Properties

Computed properties are read-only by default, but getters and setters can also be provided:

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

const firstName = ref('张')
const lastName = ref('三')

const fullName = computed({
  // getter
  get() {
    return firstName.value + lastName.value
  },
  // setter
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

function updateFullName() {
  fullName.value = '李 四' // 会触发 setter
}
</script>

<template>
  <div>
    <p>全名：{{ fullName }}</p>
    <button @click="updateFullName">更改为李四</button>
  </div>
</template>

Computed Properties vs. Methods

Although methods also achieve the same functionality, computed properties are cached:

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

const count = ref(0)

// 计算属性 - 有缓存
const doubleCount = computed(() => {
  console.log('计算属性执行')
  return count.value * 2
})

// 方法 - 无缓存
function getDoubleCount() {
  console.log('方法执行')
  return count.value * 2
}
</script>

<template>
  <div>
    <p>计数：{{ count }}</p>
    <p>双倍（计算属性）：{{ doubleCount }}</p>
    <p>双倍（计算属性）：{{ doubleCount }}</p> <!-- 不会重新计算 -->
    <p>双倍（方法）：{{ getDoubleCount() }}</p>
    <p>双倍（方法）：{{ getDoubleCount() }}</p> <!-- 会重新执行 -->
    <button @click="count++">增加</button>
  </div>
</template>

Watchers

Watchers are used to listen for changes in reactive data and perform corresponding actions.

Basic watch Usage

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

const count = ref(0)

// 侦听单个 ref
watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`)
})

function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

Watching Multiple Sources

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

const firstName = ref('张')
const lastName = ref('三')

// 侦听多个数据源
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`姓名从 ${oldFirst}${oldLast} 变为 ${newFirst}${newLast}`)
})
</script>

<template>
  <div>
    <input v-model="firstName" placeholder="姓" />
    <input v-model="lastName" placeholder="名" />
  </div>
</template>

Watching Reactive Objects

<script setup>
import { reactive, watch } from 'vue'

const user = reactive({
  name: '张三',
  age: 25,
  address: {
    city: '北京'
  }
})

// 侦听整个对象（深度侦听）
watch(user, (newValue, oldValue) => {
  console.log('用户信息变化了', newValue)
}, { deep: true })

// 侦听对象的某个属性
watch(() => user.name, (newName, oldName) => {
  console.log(`姓名从 ${oldName} 变为 ${newName}`)
})
</script>

<template>
  <div>
    <input v-model="user.name" placeholder="姓名" />
    <input v-model.number="user.age" placeholder="年龄" />
    <input v-model="user.address.city" placeholder="城市" />
  </div>
</template>

watchEffect

watchEffectWill automatically track the reactive data used internally:

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

const count = ref(0)
const message = ref('Hello')

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

// 只要 count 或 message 变化，就会重新执行
</script>

<template>
  <div>
    <p>计数：{{ count }}</p>
    <p>消息：{{ message }}</p>
    <button @click="count++">增加计数</button>
    <button @click="message = 'Hi'">改变消息</button>
  </div>
</template>

Watcher Options

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

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log('count 变化了')
}, {
  immediate: true,  // 立即执行一次
  deep: true,       // 深度侦听
  flush: 'post'     // 在 DOM 更新后执行
})
</script>

Practical Example: Search Feature

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

const searchQuery = ref('')
const searchResults = ref([])
const isLoading = ref(false)

// 模拟 API 调用
function searchAPI(query) {
  return new Promise(resolve => {
    setTimeout(() => {
      const results = [
        '苹果', '香蕉', '橙子', '葡萄', '西瓜'
      ].filter(item => item.includes(query))
      resolve(results)
    }, 500)
  })
}

// 侦听搜索关键词
watch(searchQuery, async (newQuery) => {
  if (!newQuery) {
    searchResults.value = []
    return
  }
  
  isLoading.value = true
  try {
    searchResults.value = await searchAPI(newQuery)
  } finally {
    isLoading.value = false
  }
})
</script>

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      placeholder="搜索水果..."
      class="search-input"
    />
    
    <div v-if="isLoading" class="loading">搜索中...</div>
    
    <ul v-else-if="searchResults.length" class="results">
      <li v-for="result in searchResults" :key="result">
        {{ result }}
      </li>
    </ul>
    
    <div v-else-if="searchQuery" class="no-results">
      没有找到结果
    </div>
  </div>
</template>

<style scoped>
.search-container {
  max-width: 400px;
  margin: 20px auto;
}

.search-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 4px;
}

.loading, .no-results {
  padding: 20px;
  text-align: center;
  color: #666;
}

.results {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.results li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.results li:last-child {
  border-bottom: none;
}

.results li:hover {
  background-color: #f5f5f5;
}
</style>

Practical Example: Form Validation

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

const email = ref('')
const password = ref('')
const confirmPassword = ref('')

const emailError = ref('')
const passwordError = ref('')
const confirmPasswordError = ref('')

// 验证邮箱
watch(email, (newEmail) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!newEmail) {
    emailError.value = '邮箱不能为空'
  } else if (!emailRegex.test(newEmail)) {
    emailError.value = '邮箱格式不正确'
  } else {
    emailError.value = ''
  }
})

// 验证密码
watch(password, (newPassword) => {
  if (!newPassword) {
    passwordError.value = '密码不能为空'
  } else if (newPassword.length < 6) {
    passwordError.value = '密码至少6个字符'
  } else {
    passwordError.value = ''
  }
})

// 验证确认密码
watch([password, confirmPassword], ([newPassword, newConfirm]) => {
  if (!newConfirm) {
    confirmPasswordError.value = '请确认密码'
  } else if (newPassword !== newConfirm) {
    confirmPasswordError.value = '两次密码不一致'
  } else {
    confirmPasswordError.value = ''
  }
})

// 表单是否有效
const isFormValid = computed(() => {
  return !emailError.value && 
         !passwordError.value && 
         !confirmPasswordError.value &&
         email.value && 
         password.value && 
         confirmPassword.value
})

function handleSubmit() {
  if (isFormValid.value) {
    alert('注册成功！')
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit" class="form">
    <div class="form-group">
      <label>邮箱：</label>
      <input v-model="email" type="email" />
      <span v-if="emailError" class="error">{{ emailError }}</span>
    </div>
    
    <div class="form-group">
      <label>密码：</label>
      <input v-model="password" type="password" />
      <span v-if="passwordError" class="error">{{ passwordError }}</span>
    </div>
    
    <div class="form-group">
      <label>确认密码：</label>
      <input v-model="confirmPassword" type="password" />
      <span v-if="confirmPasswordError" class="error">{{ confirmPasswordError }}</span>
    </div>
    
    <button type="submit" :disabled="!isFormValid">注册</button>
  </form>
</template>

<style scoped>
.form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.error {
  display: block;
  color: red;
  font-size: 14px;
  margin-top: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

Summary

Computed properties: Used for derived data, with caching; automatically update when dependencies change
Watchers: Used for side effects such as API calls and data validation
watch requires explicitly specifying the data source to watch
watchEffect automatically tracks dependencies
Computed properties are suitable for simple data transformations; watchers are suitable for complex asynchronous operations

Next Steps

Next, learn about Conditional Rendering to understand how to show or hide elements based on conditions.

#Vue Computed Properties and Watchers

#Computed Properties

#Basic Usage

#Writable Computed Properties

#Computed Properties vs. Methods

#Watchers

#Basic watch Usage

#Watching Multiple Sources

#Watching Reactive Objects

#watchEffect

#Watcher Options

#Practical Example: Search Feature

#Practical Example: Form Validation

#Summary

#Next Steps