第一种 :不采用语法糖以及不考虑响应式数据
姓名:{{name}}
年龄:{{age}}
第二种 : 采用语法糖写法以及响应式数据(基本数据类型)
{{a}}
{{b.name}}
{{b.age}}
ref
函数
- 作用: 定义一个响应式的数据
- 语法:
const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
- JS中操作数据:
xxx.value
- 模板中读取数据: 不需要
.value
,直接:
{{xxx}}- 备注:
- 接收的数据可以是:基本类型、也可以是对象类型。
- 基本类型的数据:响应式依靠的是类上的
getter
与setter
完成的- 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数——
reactive
函数。
reactive
函数
- 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用
ref
函数)- 语法:
const 代理对象= reactive(源对象)
接收一个对象(或数组),返回一个代理对象(Proxy
的实例对象,简称proxy
对象)reactive
定义的响应式数据是“深层次的”。- 内部基于 ES6 的
Proxy
实现,通过代理对象操作源对象内部数据进行操作。
上一篇:给你一台新linux机器
下一篇:vue3.2 pinia的使用