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