vue3中的setup函数如何使用

这篇文章主要讲解了“vue3中的setup函数如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3中的setup函数如何使用”吧！

概述 

一、 初识setup函数 

组件中所用到的：数据、方法等等均要配置在setup中，这也就意味着在Vue2中写的data、methods在这里都不再推荐使用。

这样的配置让对象式编程趋近于了函数式编程。

<script>export default {  name: 'App',  // 最为原始的对象写法是这样，但是通过es6我们可以简写  // setup: function(){}  setup () {    // 数据    let name = '黑猫几绛'    let age = 20    // 方法    function sayHello() {      console.log(`我叫${name}，我今年${age}了`)    }  }}</script>

了解过Vue2响应式原理的话你可能会有疑问说，在这个地方name和age并不是响应式的。

的确如此，在这里我们仅仅是测试一下setup中是否可以放入数据与方法，响应式在后面的专栏文章中介绍。

如果此时未了解响应原理，可以看看我以前的一篇文章，这篇文章里有详细介绍

二、 关于setup的返回值

仅仅存放数据与方法还不够，我们需要将他们作为返回值返回出去，在模板中便可以直接使用。

<template>  <h2>我叫{{name}}，我今年{{age}}了</h2></template> <script>export default {  name: 'App',  // 最为原始的对象写法是这样，但是通过es6我们可以简写  // setup: function(){}  setup () {    // 数据    let name = '黑猫几绛'    let age = 20    // 方法    function sayHello() {      console.log(`我叫${name}，我今年${age}了`)    }    return{      name,      age,      sayHello    }  }}</script>

在概述里面还介绍了setup的另外一种返回值，即返回一个渲染函数，这个函数的方法有一点像React.creatElement，可以自定义渲染的内容。

<script>import {h} from 'vue'export default {  name: 'App',  setup () {    // 在页面上渲染出一个h2标签    return ()=> h('h2', '黑猫几绛')  }}</script>

三、 关于setup的参数

# App.vue<template>  <Demo msg="hello" name="world" @hello="changeId">    <template v-slot:test>      摸鱼    </template>  </Demo></template>

# Demo.vue<script>export default {    name:'Demo',    props:['msg'],    setup(props,context){        console.log(props);        console.log(context.attrs);        console.log(context.slots);        console.log(context.emit);    }}</script>

感谢各位的阅读，以上就是“vue3中的setup函数如何使用”的内容了，经过本文的学习后，相信大家对vue3中的setup函数如何使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！