Vue3——setup语法糖

  • Vue3——setup语法糖已关闭评论
  • 50 次浏览
  • A+
所属分类:Web前端
摘要

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


setup概述

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

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

写法一(用于理解,不推荐这种写法)

Vue3——setup语法糖

代码

<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> 

运行结果

Vue3——setup语法糖

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

数字没有重新渲染到页面

Vue3——setup语法糖

代码

<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> 

运行结果

Vue3——setup语法糖

写法二(推荐写法)

使用setup语法糖

在script标签上添加setup
Vue3——setup语法糖

插件名:Vue-Official

Vue3——setup语法糖

代码

<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