Vue3 setup语法糖

- 理解:Vue3.0中一个新的配置向,值为一个函数

- setup是所有Composition API(组合API) ”表演的舞台“

- 组件中所有用到的:数据、方法等等,均要配置在setup中

- setup函数的两种返回值:

  - 若返回一个对象,则对象中的数据、方法、在模板中均可直接使用(重点)

 1、setup() 这个函数内部的变量/函数是局部的

2、这个函数的返回值,可以被当前组件的任意地方使用

3、这个函数内部不要使用this来操作组件数据

4、setup在组件加载期间只有运行一次,从创建到销毁只运行一次

setup 函数的语法糖

setup属性,会让打包工具打包时,直接帮我们把setup函数内部声明的变量/函数 return,然后组件就可以用了

<script setup>  </script>

<template>
  <div class="home">
    <h1>显示vue3.0的数据和方法</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="sayName()">点击测试vue3.0的方法</button>
  </div>
</template>
 
<script>
 
export default {
  setup() {
    // 现在暂时还不考虑响应式数据的问题
    // 数据 
    let name = "李国栋";
    let age = 18;
 
    // 方法
    let sayName = function () {
      console.log(`我的名字是${name},我的年龄是${age}`);
    }
 
    return {
      name, age, sayName
    }
  }
 
}
</script>

若返回一个渲染函数,则可以自定义渲染内容(了解)

//页面中会显示一个h1标签,标签的内容是"vue3返回渲染函数"
<script>
import {h} from 'vue'
export default {
  setup() {
    // 返回一个渲染函数
    // h相当于document.CreateElement()
    return ()=>{return h("h1","vue3返回渲染函数")}
  }
}
</script>

注意点
- 尽量不要和Vue2.x配置混用
- Vue2.x配置(data,methods,computed......)中可以访问setup中的属性,方法
- 但在setup中不能访问到Vue2.x配置(data,methods,computed......)
- 如有重名,setup优先
- setup不能是一个async函数,因为返回值不再是return的对象,而是Promise,模板看不到return对象中的属性

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值