Vue3——setup语法糖
setup概述setup是Vue3中新的配置项，值是一个函数，组件中所用到的数据、方法、计算属性、监视等等，均配置在setup中。
[*]setup函数返回的对象中的内容，可直接在模版中使用。
[*]setup中不能使用this关键字，this是undefined。
[*]setup会在beforeCreate()函数之前调用，领先所有的钩子函数执行的。
写法一（用于理解，不推荐这种写法）
代码
<template>
<h2> 数字：{{ n }} </h2>
<button @click="alertInformation">显示信息</button>
</template>运行结果
注意：此时定义的变量n不是响应式的，更改n不会在页面渲染。
数字没有重新渲染到页面
代码
<template>
<h2> 数字：{{ n }} </h2>
<button @click="alertInformation">显示信息</button>
</template>n加1 运行结果
写法二（推荐写法）
使用setup语法糖
在script标签上添加setup
插件名：Vue-Official
代码
<template>
<h2> {{ n }} </h2>
<button @click="alertInformation">显示信息</button>
</template>注意：此时变量n也不是响应式。
需要了解响应式，查看官方文档
或者文章Vue3-ref和reactive
小提示：.value，可以通过Vue-Official插件自动生成。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]