vue3数据变化和数据解包
在vue3中和vue2中数据会有所不一样,不一样的地方在于数据的写法和变化
在vue3中数据的变化是需要用到reactive的
在父级中引入
inport{ toRefs, reactive} from "vue
数据:
set(){
const data=reactive({
resource:[
{
_id:"1",
title:"新闻1",
description:"新闻新闻",
type:"video",
link:""
},
{
_id:"2",
title:"新闻2",
description:"新闻新闻",
type:"video2",
link:""
},
{
_id:"3",
title:"新闻3",
description:"新闻新闻",
type:"video3",
link:""
},
{
_id:"4",
title:"新闻4",
description:"新闻新闻4",
type:"video",
link:""
},
{
_id:"5",
title:"新闻5",
description:"新闻新闻5",
type:"video",
link:""
},
{
_id:"6",
title:"新闻6",
description:"新闻新闻6",
type:"video",
link:""
},
{
_id:"7",
title:"新闻7",
description:"新闻新闻7",
type:"video",
link:""
}
]
})
return{ .../toRefs(data)}
}
声明:
1.数据是需要用到reactive的 完整的写法就是 import {reactive} from 'vue'
2.数据解包:是需要用到toRefs 完整的写法就是 import{ toRefs} from "vue"
3. .../toRefs(data)是解包数据的 因为上述的写法在没有使用解包.../toRefs(data)的时候。调用数据是写成2data.resource,当解包之后可以直接获取数据resource