Vue知识点6-computed计算属性

v-model 双向绑定 ：绑定 ref 响应式变量，输入框修改会同步更新 name、age
ref 定义基础响应式数据
- ref("张三") / ref(18)，得到 RefImpl 响应式包装对象
- 在 JS/TS 代码里访问、修改必须加 .value；模板中直接写变量名不用 .value
computed 计算属性两种写法
- ✅ 简写形式（只读）：只传一个 getter 函数，不能直接给 computed变量.value 赋值
- ✅ 对象形式（可读可写 ）：配置 get() 和 set()
  - get()：读取计算属性时触发，返回计算结果
  - set(新值)：给计算属性赋值时触发，接收赋过来的新值，内部去修改底层响应式数据（name、age）

可写 computed 执行流程（示例）

复制代码

introduce.value = "王五-20" 
→ 触发 set，latest = "王五-20"
→ split 拆分字符串，分别赋值给 name.value、age.value
→ name、age 更新 → 触发 get，重新计算 introduce

事件点击函数 ：@click 绑定方法，方法内部修改 ref.value 驱动视图更新
单文件组件双 script 说明
- <script lang="ts">：选项式，这里用来配置组件 name
- <script lang="ts" setup>：setup 语法糖，写组合式 API（ref/computed），推荐写法
样式：普通 css，作用域这里没有加 scoped，样式是全局生效

一句话核心

只读 computed 只能读；配置 get+set 的 computed 支持赋值写入，赋值时进入 set 函数，在 set 里更新原始响应式数据。

html 复制代码

<template>
  <div class="person">
    <!--v-model是双向绑定的 -->
    <input type="text" v-model="name"><br>
    <input type="text" v-model="age"><br>
    <span>{{ introduce }}</span><br>
    <button @click="changeName">改变名称</button>
    <button @click="changeIntroduce">改变介绍</button>
  </div>
</template>


<script lang="ts">
//导出组件名称，叫做"App"
export default {
  name: "Person"
}
</script>

<script lang="ts" setup>
import {computed, ref} from "vue"

let name = ref("张三")
let age = ref(18)
//这种是只可读的,返回的是RefImpl
// let introduce = computed(() => {
//   return name.value + ":" + age.value
// })

//这种是可读可写的，返回的是RefImpl
let introduce = computed({
  get() {
    return name.value + ":" + age.value
  },
  set(latest) {
    console.log(latest) //王五-20，来自于changeIntroduce方法
    const [str1, str2] = latest.split("-")
    name.value = str1
    age.value = Number(str2)
  }
})

function changeName() {
  //name是响应式对象RefImpl，所以要用.value读取值
  name.value = "李四"
}

function changeIntroduce() {
  //这里会触发Computed计算中的set方法，并且把值传递给latest变量
  introduce.value = "王五-20"
}
</script>

<style scoped>
.person {
  background-color: green;
}
</style>

v-model实现双向绑定

javascript 复制代码

<template>
  <input v-model="name" />
  <p>你输入的：{{ name }}</p>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>