Vue3的最大的一个特点就是setup
Setup中完全就是按照了一个JavaScript的语法环境,可以在里面自己定义变量然后去修改这个变量,也可以自己去定义一些函数,然后直接在模板中去使用,但是这些函数的最后运行环境还是在这setup里面的,因为函数会在哪里声明就在哪里运行,返回的是setup的一个对象这个对象里面的所有的函数,变量都可以我们自己去运行的,vue2中就需要把变量放在data里面,函数放在methods里面等等,在vue3中所有的都可以放在setup中,set虽然改变量了,但是不是响应式的数据,就算你的改变了变量也不会使得页面刷新。
setup函数的两种返回值:
若返回一个对象,则对象中的数据、方法、在模板中均可直接使用(重点)
export default {
setup() {
let lyh='帅哥'
function fn (){
console.log(lyh)
}
function fm(){
lyh='handsome boy'
}
return {
lyh,fn,fm
}
}
}
<h1>{{lyh}}</h1>
<button @click="fn()">Look</button>
<button @click="fm()">Change</button>
若返回一个渲染函数,则可以自定义渲染内容(了解)
export default {
setup() {
// 返回一个渲染函数
// h相当于document.CreateElement()
return ()=>{return h("h1","vue3返回渲染函数")}
}
}<h></h>
我们也可以直接在 script 旁边写setup
这样就扫描的时候 就会认为当前环境都在setup(){}
函数当中,会默认导出这些功能