Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()

1.ref() 定义一个响应式的数据

但是获取的时候要 .value 才能获取定义的值

Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()_第1张图片

2.isRef() 判断一个值是否为一个 ref 对象。

Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()_第2张图片

3.unref() 如果参数是一个 ref 则返回它的 value,否则返回参数本身。

unref():是 val = isRef(val) ? val.value : val 的语法糖。

Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()_第3张图片

4.reactive() 函数,用来创建 响应式的数据对象

当需要大量数据的时候reactive()是一个很好的选择,不需要重复声明。

定义完data数据之后,可以使用es6语法将其导出,但是这样的话数据就会失去响应式,这样的话就需要使用toRefs(),toRefs()使用在下面。

Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()_第4张图片

5.toRefs()  通常搭配reactive使用

这样的话数据就会继续保持响应式的效果

Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()_第5张图片

6.computed()创建计算属性,返回值是一个只读的 ref 的实例

不传参

Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()_第6张图片

传参

Vue3.0 ref()、isRef()、unref()、reactive()、toRefs()、computed()_第7张图片

 

你可能感兴趣的:(vue.js,前端,javascript)