Vue3之常用Composition API setup

什么是Composition API

简单的说就是将功能相同的变量、函数等逻辑放到一起
点击

setup

  • 这个函数就是我们使用Composition API的入口
  • 在组件创建之前执行,在当前函数中无法使用this
  • 参数一般为propscontext,返回一个对象,对象中任意部分都可以用于组件的其余部分
<script>
export default {
    data(){
        return {
            world:"World"
        }
    },
    setup(){
        return {
            hello:"Hello"
        }
    }
}
script>

<template>
    <h2>{{hello}} {{world}}h2>
template>
  • 效果在这里插入图片描述

我们会发现其实在vue3中也会解析vue2的语法,当我们将vue2项目升级到vue3的项目的时候这时一个比较好的兼容

标签上的setup

你可能感兴趣的:(Vue基础知识,vue.js)