vue3组合式Composition API之setup函数的具体用法

vue3拉开序幕的setup

理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：
1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
注意点：
1. 尽量不要与Vue2.x配置混用
  - Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
  - 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
  - 如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

vue3中的setup函数的2种返回值用法

第一种返回值：返回一个对象，对象中的属性和方法在模板中可以直接使用

代码：

<template><div class="hello"><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="sayHello">说话</button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},setup(){let name='张三'let age = 18function sayHello(){alert(`我叫${name},我${age}岁了，你好啊！`)}return{name,age,sayHello}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

第2种返回值：返回一个渲染函数，可以自定义渲染内容(用得不多，了解即可)

代码：

<template><div class="hello"><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="sayHello">说话</button></div>
</template><script>
import { h } from 'vue'export default {name: 'HelloWorld',props: {msg: String},setup(){// let name='张三'// let age = 18// function sayHello(){//   alert(`我叫${name},我${age}岁了，你好啊！`)// }// return{//   name,//   age,//   sayHello// }return ()=> h('h1','尚硅谷')}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

结论：

使用了渲染函数之后。页面上的其他信息就被覆盖了。只显示了渲染函数里面的内容。

以上的例子只是为了演示。

代码：

<template><div class="hello"><h1>一个人的信息</h1><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>性别：{{ sex }}</h2><h2>a的值是：{{ a }}</h2><button @click="sayHello">说话(Vue3所配置的——sayHello)</button><br><br><button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button><br><br><button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button><br><br><button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button></div>
</template><script>
// import { h } from 'vue'export default {name: 'a1setup',props: {msg: String},data() {return {sex: '男',a: 100}},methods: {sayWelcome() {alert('欢迎来到尚硅谷学习')},test1() {console.log(this.sex)console.log(this.name)console.log(this.age)console.log(this.sayHello)}},setup() {let name = '张三'let age = 18let a = 200function sayHello() {alert(`我叫${name},我${age}岁了，你好啊！`)}function test2() {console.log(name)console.log(age)console.log(sayHello)console.log(this.sex)console.log(this.sayWelcome)}return {name,age,sayHello,test2,a}// return ()=> h('h1','尚硅谷')}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

前3个按钮点击后结果都是正常的。第4个按钮获取不到某些值

vue3组合式Composition API之setup函数的具体用法相关推荐

Vue3.0 Composition API与Vue2.x 使用的 Options API
Vue3.0 所采用的 Composition API 与 Vue2.x 使用的 Options API 有什么不同开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要 ...
vue3.0 - Composition API
一. 介绍 >使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高,代码量会不断的加大:由于相关业务的代码需要遵循option的配置写到特定的区域,导致后续维护非常的复杂,同时 ...
vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用
vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用前两讲,我们已经顺利的使用 vue3.0 将项目跑起来了.但是实在是过于简陋,目前我们几乎不可能开 ...
探秘 Vue3.0 - Composition API 在真实业务中的尝鲜姿势
前言 2019年2月6号,React 发布 16.8.0 版本,新增 Hooks 特性.随即,Vue 在 2019 的各大 JSConf 中也宣告了 Vue3.0 最重要的 RFC,即 Functio ...
为什么vue3 需要 Composition API？
文章目录什么是 Composition API? 什么是可组合? Composables 和 Mixin 解决的类似问题组合物 vs Mixin 数据/方法来源的清晰度命名冲突来自组件的变异模 ...
vue3学习笔记 Composition API setup
一.Composition API优势相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Compositi ...
vue3组合式api
文章目录组合式API介绍什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
Vue3 -- 组合式API
组合式API 组合式api(Composition API)算是vue3对我们开发者来说非常有价值的一个api更新,我们先不关注具体语法,先对它有一个大的感知 1. composition vs op ...
简明扼要聊聊 Vue3.0 的 Composition API 是啥东东！
对于没太了解 Vue3.0 的同学,在看到 Composition API 时,除了看起来会有一个"高大上"的感觉,可能更多的是有点懵逼,心中不免泛起一堆疑惑,这到底是何方神圣?干 ...

vue3组合式Composition API之setup函数的具体用法

vue3拉开序幕的setup

vue3中的setup函数的2种返回值用法

第一种返回值：返回一个对象，对象中的属性和方法在模板中可以直接使用

第2种返回值：返回一个渲染函数，可以自定义渲染内容(用得不多，了解即可)

vue3组合式Composition API之setup函数的具体用法相关推荐

最新文章

热门文章