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

一、模板中的JavaScript表达式

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

1.1 什么是模板表达式？

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

比如：

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后的内容），以下写法均无效：

vue 复制代码

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

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

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

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

vue 复制代码

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

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

（3）全局变量访问限制

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

js 复制代码

// 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' }}。如果这个逻辑要在模板中重复使用多次，或者逻辑更复杂（比如过滤书籍类型），模板会变得混乱：

vue 复制代码

<!-- 混乱的模板：重复的复杂逻辑 -->
<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访问值，模板中自动解包）。

改写上面的例子：

vue 复制代码

<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也能实现同样的逻辑：

vue 复制代码

<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：

vue 复制代码

<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：

vue 复制代码

<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（修改逻辑）定义：

js 复制代码

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...

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

一、模板中的JavaScript表达式

1.1 什么是模板表达式？

1.2 表达式的使用场景

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

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

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

（3）全局变量访问限制

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

2.1 为什么需要计算属性？

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

2.3 computed vs methods：缓存的意义

2.4 可写计算属性：getter 与 setter

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

课后Quiz：巩固你的理解

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

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

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

常见报错与解决

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

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

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

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

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