VUE3中setup ref return取代vue2中的data return

//在VUE3中

<div>{{num}}</div>

import {reactive,computed} from 'vue'

//setup：因为在执行setup时还没有执行created所以不能使用data和methods，setup是处于                //beforecreated和created生命周期之间的所以不能使用。

//setup:是Composition API 的入口。

setup(){
    //第一种写法 可以用ref()形式,通过定义ref变量把普通的变量变成了响应式变量
    
注意:1、通过ref定义变量，在用到变量的时候必须通过num.value去取,
     2、定义的变量必须return返回出去，这样才能在template中渲染出来
    const num=ref(0)

    //第二种写法可以用reactive的形式，
注意：通过reactive的形式必须先引入reactive,再使用。
      
    const data=reactive({
        name:'123456',
        count:1,
        add:()=>{data.name===''},
        computed:(()=>{return data.count++})
    })
    return{
        num,
        name,
        count,
        add,
    }
}



//在vue2中

<div>{{name}}</div>


data(){
    return{
        name:""
    }
 }
}