Vue3——setup语法糖

setup概述

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

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

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

代码

<template>   <div>     <h2> 数字：{{ n }} </h2>     <button @click="alertInformation">显示信息</button>   </div> </template>  <script lang='ts'> export default {   name: "App",   setup() {     //定义变量和方法     let n: number = 10;     function alertInformation() {       alert("Hello World!");     }     //需要返回，才能在模板中使用     return { n, alertInformation }   } } </script>  <style scoped> .person {   background-color: skyblue;   box-shadow: 0 0 10px;   border-radius: 10px;   padding: 20px; }  button {   margin: 0 5px; } </style> 

运行结果

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

数字没有重新渲染到页面

代码

<template>   <div>     <h2> 数字：{{ n }} </h2>     <button @click="alertInformation">显示信息</button>     <button @click="changeN">n加1</button>   </div>   <div>    </div> </template>  <script lang='ts'> export default {   name: "App",   setup() {     //定义变量和方法     let n: number = 10;     function alertInformation() {       alert("Hello World!");     }      //测试     function changeN() {       n++;       console.log("数字n", n)     }     //需要返回，才能在模板中使用     return { n, alertInformation, changeN }   } } </script>  <style scoped> .person {   background-color: skyblue;   box-shadow: 0 0 10px;   border-radius: 10px;   padding: 20px; }  button {   margin: 0 5px; } </style> 

运行结果

写法二（推荐写法）

使用setup语法糖

在script标签上添加setup

插件名：Vue-Official

代码

<template>   <div>     <h2> {{ n }} </h2>     <button @click="alertInformation">显示信息</button>   </div> </template>  <!--Vue 3 setup语法糖 --> <script setup lang='ts' name="App"> let n = 10;  function alertInformation() {   alert("Hello world!"); } </script>  <style scoped> .person {   background-color: skyblue;   box-shadow: 0 0 10px;   border-radius: 10px;   padding: 20px; }  button {   margin: 0 5px; } </style> 

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

或者文章Vue3-ref和reactive