Vue 声明式渲染

何以解忧，唯有..

310人浏览 · 2025-11-27 11:10:31

何以解忧，唯有.. · 2025-11-27 11:10:31 发布

一、前言

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

二、reactive 和 ref 对别

维度	ref	reactive
适用类型	原始值（string/number/boolean）或单对象	仅限对象/数组（深层响应式）
读写语法	模板自动解包；JS 需 `.value`	直接 `obj.key` 读写，无 `.value`
解构/替换	解构后仍响应（需 `toRef/toRefs`）	整体替换会丢失响应式
深层追踪	对对象属性不递归（需 `reactive` 包）	默认递归深度追踪
使用场景	表单字段、开关、单值状态	复杂状态树、嵌套配置

总结：原始值用 ref，复杂对象用 reactive；模板都直接写，JS 里 ref 记得加 .value。

三、使用说明

下面展示了我们如何使用双花括号语法，根据 counter 对象和 message ref 的值渲染动态文本：

<h1>{{ message }}</h1>
<p>Count is: {{ counter.count }}</p>

注意我们在模板中访问的 message ref 时不需要使用 .value：它会被自动解包，让使用更简单。

在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。

<h1>{{ message.split('').reverse().join('') }}</h1>

Vue {{ }} 的作用：

{{ }} 是 Vue 的“实时文本插值”，把任意 JS 表达式结果渲染到页面，数据变 → DOM 自动变，是数据驱动视图最直观的体现。

基本用法：

<span>{{ msg }}</span>

msg 可以是 ref、reactive 属性、计算值、函数返回值等。

渲染结果：把变量值转字符串后插入标签内。

可以放什么表达式：

合法	例子	结果
变量	`{{ count }}`	变量当前值
计算	`{{ price * num }}`	实时计算结果
三元	`{{ ok ? 'YES' : 'NO' }}`	条件文本
函数调用	`{{ formatDate(date) }}`	函数返回值
字符串拼接	`{{ 'Hi,' + name }}`	拼接后文本

禁止：

流控制 if / for

赋值 {{ count = 1 }}

多行语句

四、代码示例

<script setup>
import { ref,reactive  } from 'vue'
  
const counter = reactive({count:0})
const message = ref("AAA")
// 组件逻辑
// 此处声明一些响应式状态
</script>

<template>
  <h1>{{message}}</h1>
  <p>count is:{{counter.count}}</p>
  <button @click="counter.count++">加1</button><br><br>
  <input v-model="message" />
</template>