文章目录
Reactivity API
响应式数据
vue3的响应式系统是脱离组件的,下面的代码可在js文件中直接执行。
reactive
reactive可以使数据变成响应式。
import {
reactive} from 'vue'
//本质上,下面的代码等于new Poxy({ count: 0 })
const obj = reactive({
count: 0 })
当只需要只读的代理,可以使用readonly,任何被访问的嵌套 property 也是只读的。
import {
readonly} from 'vue'
const obj = readonly({
count: 0 })
readonly也可以传入代理,返回新的代理,新的代理不可修改,新代理与传入的代理是不相同的。
import {
reactive,readonly} from 'vue'
const obj = reactive({
count: 0 })
const newObj = readonly(obj)
reactive和readonly不可以传入基本数据。
ref
我们知道Proxy只能代理对象,当我们需要代理基本数据时,我们可以使用ref。(ref啥都可以传)
import {
ref} from 'vue'
const count = ref(0)
const newRef = ref(count)
console.log(count.value) //0
console.log(newRef.value) //0
console.log(newRef === count)