本篇博文主要介绍vue3当中ref,reactive的响应式用法
知识点
- ref
- reactive
在setup函数定义变量之后,这个变量默认不是响应式的,也就是说,这个变量的值改变以后,页面上面显示的值不会改变,而如果要将变量转化为响应式的,我们需要使用ref和reactive
- ref 用来将基本数据类型转变为响应式变量
- reactive用来将复合数据类型转变为响应式变量
ref用法举例
如果在定义变量的时候不使用ref,这个变量默认不是响应式的
cost myview=Vue.creatApp({
template:"<div>{ name }</div>",
setup(props,context){
let name="aaa";
settimeout(
()=>{
name="bbb";
console.log(name);
},2000 );
return { name};
},
;})
const vm=myview.mount("#mydiv");
//执行代码,我们发现控制台输出的name是bbb,这说明name的值已经发生了变化,但是在页面上面显示的值仍为aaa,这说明了setup定义的值默认是不响应的
而如果我们在setup函数当中,在定义变量的时候使用ref修饰,那么这个变量就会转变为响应式变量
const myview=Vue.creatApp({
template:'<div> { name}</div>',
setup(props,context){
const { ref }=Vue;//引入ref
let name =ref("aaa");//用ref来将变量变为响应式变量,ref函数底层使用的是proxy代理函数实现双向绑定,而proxy函数必须要接收一个对象,如果传入的数据是基本类型,例如'aaa',ref函数会将这个数据先转变为{value:'aaa'},所以我们在修改name的值的时候不能直接name='bbb',而是要使用name.value='bbb'
settimeout(()=>{
name.value="bbb";
console.log(name);},2000);},
return {name};})
const vm=myview.mount("#mydiv");
//变量经过ref修饰以后变为响应式变量,我们看到,程序执行两秒以后,setup函数内的变量值发生了改变,并且页面所显示的变量值也发生了改变
reactive用法说明
reactive用法与ref类似,区别在于ref用于将基本数据类型变为响应式数据,而reactive则用于将符合数据类型(对象)转变为响应式数据
const myview=Vue.creatApp({
template:'<div> { objname.name}</div>',
setup(props,context){
const { rective }=Vue;//引入reactive
let objname=reactive("{name:'abc'}");
settimeout(()=>{
objname.name='def';
console.log(objname.name);
},2000);
},
return{objname.name;}
;})
const vm=myview.mount('mydiv');
//当setup函数当中objname.name的值发生变化时,页面上所显示的值也会发生变化
reactive还可以将数组数据变为响应式数据
const myview=Vue.creatApp({
template:"<div> { myarr[0] } </div>",
setup(props,context){
const { reactive }=Vue;
const myarr=reactive([111]);//用reactive来修饰数组,将数组变为响应式数据
settimeout(()=>{
myarr[0]=222;
console.log(myarr[0]);
},2000);
},
return{ myarr}
})
const vm=myview.mount("#mydiv");
总结
本篇博文主要讲了通过ref函数将基本数据类型转变为响应式数据,通过reactive函数将符合数据类型(对象,数组等)转变为响应式数据,让读者学会了在vue3当中,两个常用的响应式函数ref和reactive的用法。