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

 

 

posted @ 2020-11-14 19:25  一封未寄出的信  阅读(1426)  评论(1编辑  收藏  举报