双向绑定是 Vue 最核心的特性之一。其本质在于实现模板(template)中的视图数据与脚本(script)中的逻辑数据自动同步，当任意一方数据发生变化时，另一方会即时响应更新。
2.1 OptionsAPI双向绑定示例
TypeScript
<template>
<div>
Name:<input v-model="userName"/>{{ userName }} <br/>
Salary:<input v-model="salary" /> {{ salary }}<br/>
<button v-on:click="addSalary"> confirm </button>
</div>
</template>
<script lang="ts">
//OptionsAPI方式
export default{
//返回数据
data(){
return {
userName:'roy',
salary:15000
}
},
//返回方法
methods:{
addSalary(){
this.salary +=100
}
}
}
</script>
<style scoped>
</style>2.2 OptionsAPI和CompositonAPI
Vue2中常用的这种编写方式称为OptionsAPI(配置式)。其实现方式是用一个统一的配置对象来实现全部代码逻辑。在这个对象中，通过data、methods、computed等配置选项来控制逻辑。
OptionsAPI是Vue2时的标准API编写方式。Vue3向下兼容了Vue2的API。因此，Vue2的老项目，在Vue3中基本可以无缝迁移。实际上，OptionsAPI是在CompositionAPI的基础上实现的。关于Vue的基础概念和知识，在这两种API之间是通用的。另外，官方建议，如果采用Vue构建完整的SPA应用，那么更建议使用CompositionAPI。
但是，OptionsAPI所有逻辑都混在一起，不便于维护和复用。Vue3另外通过了一种更方便的API,CompositionAPI(组件式API)。
2.3 CompostionAPI简单示例
新建mysalary.ts文件，代码如下：
TypeScript
import { ref } from 'vue';
//不需要使用this
export default function(){
let userName = ref('roy')
let salary = ref(15000)
function addSalary(){
salary.value += 100
}
return {userName,salary,addSalary}
}引用mysalary.ts，注意setup语法糖，代码如下
TypeScript
<template>
<div>
Name:<input v-model="userName"/>{{ userName }} <br/>
Salary:<input v-model="salary" /> {{ salary }}<br/>
<button v-on:click="addSalary"> confirm </button>
</div>
</template>
<script setup lang="ts">
import MySalary from '@/components/MySalary';
let {userName,salary,addSalary}=MySalary() //拆包
</script>
<style scoped>
</style>通过 Composition API 可以将组件数据拆分到独立的 ts 文件中，更利于模块化管理和维护。
ref和reactive是两个用于创建响应式数据的核心 API，它们在使用方式和适用场景上有所不同。
ref用于创建一个响应式的引用，可以包装任意类型的值，包括基本类型（如数字、字符串）和对象。reactive用于将一个对象或数组转换为响应式代理。它只能处理对象或数组。
2.4 控件上的ref绑定
通过 ref 绑定控件，可以直接获取对应 DOM 元素的值。在组件模块化开发中，便于数据在子组件和父组件间相互传递；
2.4.1 子组件向父组件传递数据示例
步骤1，新建类型SalaryInfo，代码如下
TypeScript
export interface SalaryInfo{
userName:string,
salary:number
}步骤2：新建mysalaryInfo.vue组件，代码如下
TypeScript
<template>
Name:<input v-model="salaryInfo.userName"/> <br/>
Salary:<input v-model="salaryInfo.salary" /> <br/>
{{ salaryInfo }}
</template>
<script lang="ts">
export default{
name:"SalaryInfo" //组件名称,不声明的话默认使用文件名
}
</script>
<script setup lang="ts">
import { ref } from 'vue';
import type{ SalaryInfo } from '@/types/salaryInfo';
let salaryInfo = ref<SalaryInfo>({
userName:'roy',
salary:15000
})
//给父组件暴露数据和方法
defineExpose({
salaryInfo
})
</script>
<style>
</style>步骤3：父组件引用mysalaryInfo组件，代码如下：
TypeScript
<template>
//控件上使用ref
<mySalaryInfoe ref="salaryInfoInner"> </mySalaryInfoe>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import mySalaryInfoe from "./views/mySalaryInfo.vue"
let salaryInfoInner = ref() //组件实例
function showRes(){
console.log(salaryInfoInner)
console.log(salaryInfoInner.value) //控件DOM对象
console.log(salaryInfoInner.value.getAtrribute('abc')) //获取自定义属性
console.log(salaryInfoInner.value.userName) //获取子组件数据
console.log(salaryInfoInner.value.salary) //获取子组件数据
}
</script>
<style scoped>
</style>2.4.2 父组件向子组件传递数据示例
步骤1：修改mysalaryInfo.vue组件代码
TypeScript
<template>
Name:<input v-model="salaryInfo.userName"/> <br/>
Salary:<input v-model="salaryInfo.salary" /> <br/>
{{ salaryInfo }}
</template>
<script lang="ts">
export default{
name:"SalaryInfo" //组件名称，不声明的话默认使用文件名
}
</script>
<script setup lang="ts">
import { ref } from 'vue';
import type{ SalaryInfo } from '@/types/salaryInfo';
//接收父组件传递的数据
defineProps<{
salaryInfo:SalaryInfo //会自动生成一个salary-info的props属性,父组件可以通过这个属性传递数据
}>()
</script>
<style>
</style>步骤2：父组件向子组件传递数据
TypeScript
<template>
<mySalaryInfoe :salary-info="salaryInfo"> </mySalaryInfoe>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import mySalaryInfoe from "./views/mySalaryInfo.vue"
let salaryInfo = ref({
userName:'roy',
salary:15000
})
</script>
<style scoped>
</style>