Vue3初使用

script标签

这里vue3在script标签上加上了setup，可以简化使用，如下所示，引入组件后可以直接使用

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

数据和函数

vue3中的数据和函数是在setup函数中定义的，由于script标签添加了setup因此直接定义即可

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import {reactive,ref} from "vue"
let name = ref("李四")
let person = reactive({
    age:18,
    sex:"男"
})
function setName(){
    name.value = "王五"
}
</script>

另外由于需要实现响应式，因此数据的定义需要使用vue提供的函数，其中普通数据使用ref函数，对象数据推荐使用reactive，另外对象数据动态添加删除属性的时候可以直接添加，不需要像vue2中使用Vue.set()/Vue.delete()来实现，还要注意的是ref函数和reactive函数需要进行引入才能使用

补充

如果对于script标签上加入setup使用不习惯的话可以将setup属性去掉，然后跟vue2那样写

<script>
import HelloWorld from './components/HelloWorld.vue'
import {reactive,ref} from "vue"
export default{
    components:{
        HelloWorld
    },
    setup() {
        let name = ref("李四")
        let person = reactive({
            age:18,
            sex:"男"
        })
        function setName(){
            name.value = "王五"
        }
        return {
            name,
            person,
            setName
        }
    }
}
</script>