Vue3的ref和reactive的用法和区别
ref与reactive的区别
·
ref 和 reactive的用法
① ref的用法
引入: import {ref} from ‘vue’
使用:
setup(){
const refVal= ref( 5 );
return { refVal}
}
//常用于简单数据类型,也可以用于复杂对象。
② reactive的用法
引入: import {reactive} from ‘vue’
使用:
setup(){
const reactiveVal= reactive({ num:5 });
return { reactiveVal}
}
//常用于复杂的数据类型。
ref 和 reactive区别
①修改内部的值:
setup(){
const refVal= ref( 5 );
refVal.value = 666;
//ref修改的时候实际上是修改的{ value:5} 上的value属性。
const reactiveVal= reactive({ num:5 });
reactiveVal.num = 666;
//reactive的本身也是ref,只不过是通过进一步处理,省去了value属性。
return { refVal,reactiveVal}
}
②在html的渲染
# 错误写法:
<p>{{refValue.value}}</p>
<p>{{reactiveValue.num}}</p>
#正确写法:
<p>{{refValue}}</p>
<p>{{reactiveValue.num}}</p>
分析:
1.前面说了ref想拿到ref的值需要它的.value属性,为什么html中不要呢
2.首先我们打印一下ref对象:
3.我们可以看到有一个 v_isRef的属性 且为true,系统就是通过判断这个属性且为true而省略 .value 属性的。
更多推荐
已为社区贡献8条内容
所有评论(0)