Vue3——setup语法糖

setup概述

setup是Vue3中新的配置项，值是一个函数，组件中所用到的数据、方法、计算属性、监视等等，均配置在setup中。

• setup函数返回的对象中的内容，可直接在模版中使用。
  
• setup中不能使用this关键字，this是undefined。
  
• setup会在beforeCreate()函数之前调用，领先所有的钩子函数执行的。
  

写法一（用于理解，不推荐这种写法）

代码

1. <template>
2.   
3.     <h2> 数字：{{ n }} </h2>
4.     <button @click="alertInformation">显示信息</button>
5.   
6. </template>

复制代码

运行结果

注意：此时定义的变量n不是响应式的，更改n不会在页面渲染。

数字没有重新渲染到页面

代码

1. <template>
2.   
3.     <h2> 数字：{{ n }} </h2>
4.     <button @click="alertInformation">显示信息</button>
5.   
6. </template>  n加1      

复制代码

运行结果

写法二（推荐写法）

使用setup语法糖

在script标签上添加setup

插件名：Vue-Official

代码

1. <template>
2.   
3.     <h2> {{ n }} </h2>
4.     <button @click="alertInformation">显示信息</button>
5.   
6. </template>

复制代码

注意：此时变量n也不是响应式。
需要了解响应式，查看官方文档

或者文章Vue3-ref和reactive

小提示：.value，可以通过Vue-Official插件自动生成。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！