vue3中的< script setup>和< script> setup()有什么区别?
我一开始学vue3学的是 setup()这种写法的知道我在学uni-app的时候,我发现我使用setup()这种老传统的写法它报错,我一直找不到原因是什么,所以我只能去学习< script setup> 这种写法。知道我看了这篇文章https://juejin.cn/post/7078865301856583717#heading-8 非常棒。虽然不是很懂但是我实践了以下,证明了我的猜测,事实上我猜对了。如果看不懂这文章,可以看下面的实践。
先看看< script> setup()这种的写法
<template>
<div>
{{name}}//显示为李华
<button @click="fun">点我</button>//点击时会改变name的值 显示为 ‘张三’
</div>
</template>
<script>
import {toRefs,reactive} from 'vue'
export default {
setup(){
//定义数据域
const data = reactive({
name:'李华',
age:23
})
//方法区begin
const fun =()=>{
data.name = "张三"
console.log(data.name)//在打印结果为 张三
}
//end
return {
...toRefs(data),fun
}
}
}
</script>
写完这个你就会发现,你是不是要先写 import {toRefs,reactive} from ‘vue’ 然后写 export default { } ,里面还得写 setup()、数据域、方法区 、和 return { …toRefs(data),fun } 。每次新建一个文件都要写一次,或者复制一次。是不是觉得太费事了?对的,就是。
我们再看< script setup> 这种怎么写。
<template>
<view class="content">
<view class="text-area">
<text class="title">{{title}}</text>
<text> {{user.name}}</text>
</view>
<button @click="change(user)">点我</button>
</view>
</template>
<script setup>
import {
ref,
reactive
} from "vue"
const title = ref("hello -- uniapp")
const user = reactive({
name:'李华',
age: 23,
gender: "男"
})
const change=(user)=>{
user.name = "张三"
// console.log(user);结果是张三
}
</script>
发现了什么吗?这里我写了< script setup> ,除此之外,我还写了什么?你会发现,我没写export default { }
setup(){} 还有return { }。因为在 < script setup> 里面直接就能用。不需要return 去定义,去暴露。看看这个再结合上面的文章就很容易理解了。