Vue3_setup

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(){}

函数当中,会默认导出这些功能

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值