数据绑定
在 template 里面使用 作为占位符,即可一次性显示对应变量内的数据。
另外,。
响应式数据绑定
被数据绑定的变量应使用ref(单个变量)或reactive(用于对象类型)函数赋值,只有这样,才可以在变量内数据发生改变时才会相应修改 里面的内容。
ref 和 reactive 的核心区别
| 特性 | ref | reactive |
|---|---|---|
| 数据类型 | 适用于基本类型和引用类型 | 仅适用于对象类型 |
| 访问方式 | 需要通过 .value 访问 | 直接访问属性 |
| 响应式原理 | 使用对象包装 + getter/setter | 使用 Proxy 代理 |
| 模板中使用 | 自动解包,无需 .value | 直接使用属性 |
| 重新赋值 | 可以重新赋值整个对象 | 不能直接替换整个对象 |
v-model
另外,v-model 可以在组件上使用以实现双向绑定。
| 维度 | ref/reactive | v-model |
|---|---|---|
| 性质 | 响应式数据创建API | 模板指令 |
| 作用 | 创建响应式数据 | 实现双向数据绑定 |
| 层级 | 数据层 | 视图层(模板语法) |
| 依赖关系 | v-model 依赖 ref/reactive | 需要 ref/reactive 提供数据 |
具体用法查看 指令#v-model