快速入门Vue模板里的JS表达式有啥不能碰？计算属性为啥比方法更能打？

一、模板中的JavaScript表达式

在Vue 3的模板语法中，我们可以通过**Mustache插值（双大括号）或指令属性（如v-bind/:）**嵌入JavaScript表达式，让模板具备动态计算的能力。这是连接组件数据与DOM的核心桥梁。

1.1 什么是模板表达式？

模板表达式是Vue允许在模板中写入的单条JavaScript计算语句，它会被Vue编译为渲染函数的一部分，并在组件数据变化时自动重新计算。

比如：

<template>
  <!-- 算术运算：number是组件内的ref变量 -->
  <p>{{ number + 1 }}</p>
  <!-- 三元表达式：根据ok的值显示YES/NO -->
  <p>{{ ok ? 'YES' : 'NO' }}</p>
  <!-- 字符串反转：处理message变量 -->
  <p>{{ message.split('').reverse().join('') }}</p>
  <!-- 动态属性：拼接id生成div的id -->
  <div :id="`list-${id}`"></div>
</template>

<script setup>
import { ref } from 'vue'
const number = ref(1)   // 初始值1，表达式结果为2
const ok = ref(true)    // 结果为YES
const message = ref('Hello Vue')  // 结果为"euV olleH"
const id = ref(10)      // 动态id为"list-10"
</script>

余下文章内容请点击跳转至 个人博客页面 或者 扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长，阅读完整的文章：快速入门Vue模板里的JS表达式有啥不能碰？计算属性为啥比方法更能打？

1.2 表达式的使用场景

模板表达式仅能用于两个位置：

• 文本插值：{{ 表达式 }}，替换元素的文本内容；
• 指令属性值：v-bind:attr="表达式"（或简写:attr="表达式"），动态绑定HTML属性。

1.3 表达式的限制与注意事项

Vue对模板表达式有严格约束，避免滥用导致维护问题：

（1）只能是“单表达式”，不能用语句

模板表达式必须是可求值的代码片段（能放在return后的内容），以下写法均无效：

<!-- 错误：var是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 错误：if是流程控制，不是表达式 -->
{{ if (ok) { return message } }}

如需流程控制，应使用三元表达式（ok ? A : B）代替if，或把逻辑移到computed/methods中。

（2）调用函数时避免“副作用”

模板中的函数调用会在每次组件更新时重新执行，因此函数不能修改组件状态（如改变ref的值）、发起网络请求或操作DOM。比如：

<!-- 错误：函数修改了count的值（副作用） -->
{{ incrementCount() }}

正确的做法是把修改状态的逻辑放在methods中，通过事件触发（如@click="incrementCount"）。

（3）全局变量访问限制

模板表达式只能访问有限的全局变量（如Math、Date），自定义全局变量需通过app.config.globalProperties注册：

// main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
  formatDate(date) {
    return new Date(date).toLocaleDateString()
  }
}

之后可在模板中使用：{{ $filters.formatDate(time) }}。

二、计算属性：更优雅的复杂逻辑处理

当模板中的表达式变得复杂（如多次重复、包含多步计算）时，直接写在模板里会让代码难以阅读和维护。**计算属性（Computed）**就是为解决这个问题而生——它将复杂逻辑封装为组件的“派生状态”，兼具可读性、缓存性和响应性。

2.1 为什么需要计算属性？

看一个例子：我们需要判断作者是否出版过书籍，模板中的表达式是{{ author.books.length > 0 ? 'Yes' : 'No' }}。如果这个逻辑要在模板中重复使用多次，或者逻辑更复杂（比如过滤书籍类型），模板会变得混乱：

<!-- 混乱的模板：重复的复杂逻辑 -->
<p>Has books: {{ author.books.length > 0 ? 'Yes' : 'No' }}</p>
<p>Book count: {{ author.books.length }}</p>
<p>First book: {{ author.books[0] || 'None' }}</p>

这时候，计算属性可以把这些逻辑“提取”为组件的一个“虚拟属性”，让模板更简洁。

2.2 基础用法：从模板逻辑到 computed

计算属性通过computed函数（或选项式API的computed对象）定义，返回一个计算ref（与ref类似，.value访问值，模板中自动解包）。

改写上面的例子：

<template>
  <p>Has published books: {{ publishedBooksMessage }}</p>
  <p>Book count: {{ bookCount }}</p>
  <p>First book: {{ firstBook }}</p>
</template>

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

const author = reactive({
  name: 'John Doe',
  books: ['Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide']
})

// 计算属性1：判断是否有书
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

// 计算属性2：书籍数量
const bookCount = computed(() => author.books.length)

// 计算属性3：第一本书（无则返回None）
const firstBook = computed(() => author.books[0] || 'None')
</script>

模板瞬间变得清晰！计算属性会自动跟踪依赖（如author.books），当依赖变化时，计算属性会重新计算值。

2.3 computed vs methods：缓存的意义

你可能发现，用methods也能实现同样的逻辑：

<template>
  <p>{{ calculateBooksMessage() }}</p>
</template>

<script setup>
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}
</script>

但computed和methods的核心区别是“缓存”：

• computed：只有当依赖的author.books变化时，才会重新计算；多次访问publishedBooksMessage会直接返回缓存值。
• methods：每次组件渲染（如父组件更新、其他数据变化）都会重新调用，即使author.books没变化。

什么时候用computed？
当逻辑需要频繁访问且计算成本高时（比如遍历1000条数据过滤），缓存能大幅提升性能。

2.4 可写计算属性：getter 与 setter

默认情况下，计算属性是只读的（只有getter）。如果需要“修改”计算属性（如通过v-model绑定），可以定义setter：

比如“全名”的例子：fullName = firstName + lastName，修改fullName时自动分割为firstName和lastName：

<template>
  <input v-model="fullName" placeholder="Enter full name" />
  <p>First Name: {{ firstName }}</p>
  <p>Last Name: {{ lastName }}</p>
</template>

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

const firstName = ref('John')
const lastName = ref('Doe')

// 可写计算属性：getter拼接，setter分割
const fullName = computed({
  // getter：读取时返回拼接后的全名
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  // setter：修改时分割输入到firstName和lastName
  set(newValue) {
    const [first, last] = newValue.split(' ')
    firstName.value = first || ''  // 处理空输入
    lastName.value = last || ''
  }
})
</script>

当你在输入框中输入“Alice Smith”，firstName会变成“Alice”，lastName变成“Smith”——计算属性的setter自动处理了分割逻辑。

2.5 进阶：获取计算属性的 previous 值（Vue 3.4+）

Vue 3.4+允许计算属性的getter访问上一次的计算结果（previous参数），适用于需要“保留历史值”的场景。比如：当count超过3时，保持alwaysSmall为之前的最大值3：

<template>
  <p>Count: {{ count }}</p>
  <p>Always Small: {{ alwaysSmall }}</p>
  <button @click="count++">Increment</button>
</template>

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

const count = ref(2)

// 当count <=3时返回当前值，否则返回之前的值
const alwaysSmall = computed((previous) => {
  if (count.value <= 3) {
    return count.value  // count=2→2，count=3→3
  }
  return previous       // count=4→3，count=5→3
})
</script>

点击按钮递增count：

• count=2→alwaysSmall=2
• count=3→alwaysSmall=3
• count=4→alwaysSmall=3（保持之前的3）
• count=5→alwaysSmall=3

课后Quiz：巩固你的理解

问题1：模板中的表达式为什么不能使用var a = 1？

答案：模板表达式必须是“单表达式”（可求值的代码片段），而var a = 1是语句（用于声明变量），Vue编译时会报错。如需变量声明，应将逻辑移到script中。

问题2：computed和methods的核心区别是什么？举一个适合用computed的场景。

答案：

• 核心区别：computed有缓存，依赖变化才重新计算；methods每次渲染都调用。
• 适合场景：一个需要频繁访问的昂贵计算（如过滤1000条商品数据中的“折扣商品”），用computed缓存结果，避免重复计算。

问题3：如何实现可写计算属性？用fullName例子说明。

答案：通过get（读取逻辑）和set（修改逻辑）定义：

const fullName = computed({
  get() { return `${firstName.value} ${lastName.value}` },
  set(newValue) {
    const [first, last] = newValue.split(' ')
    firstName.value = first || ''
    lastName.value = last || ''
  }
})

常见报错与解决

1. 报错："Property or method 'xxx' is not defined..."

• 原因：模板中使用的xxx未在组件中定义（如{{ xxx }}中的xxx未在data/computed/methods中声明）。
• 解决：检查变量是否拼写错误，或是否通过props传递。

2. 报错："Computed property 'xxx' has no setter..."

• 原因：尝试修改一个“只读计算属性”（只有getter），比如fullName.value = 'Alice'但fullName没有setter。
• 解决：给计算属性添加set方法（参考2.4节的fullName例子）。

3. 报错："Avoid mutating a computed value directly..."

• 原因：直接修改了计算属性的结果（如alwaysSmall.value = 5），但计算属性是“派生状态”，应修改它依赖的源数据（如count）。
• 解决：修改count.value而不是alwaysSmall.value，让计算属性自动更新。

参考链接：

• 模板表达式：vuejs.org/guide/essen…
• 计算属性：vuejs.org/guide/essen…