Vue中setup函数

最新推荐文章于 2024-08-13 16:04:45 发布

BirdMan98

最新推荐文章于 2024-08-13 16:04:45 发布

阅读量643

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41405524/article/details/125987863

版权

Vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue3中如何使用setup函数来替代传统的methods和data。通过setup函数，我们可以更加简洁地声明响应式属性和方法。在示例代码中，展示了如何定义name和handleClick方法，并在模板中直接使用。当组件挂载后，通过test方法调用setup中的内容，展示了setup函数的运行时行为。

摘要由CSDN通过智能技术生成

介绍

Vue3中使用setup函数取代methods和data

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 34</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // 对数据做校验的插件
  const app = Vue.createApp({
    template: `
      <div @click="handleClick">{{name}}</div>
    `,
    methods: {
      test() {
        console.log(this.$options.setup());
      }
    },
    mounted() {
      this.test();
    },
    // created 实例被完全初始化之前
    setup(props, context) {
      return {
        name: 'dell',
        handleClick: () => {
          alert(123)
        }
      }
    }
  });
  const vm = app.mount('#root');
</script>
</html>