Vue3的Composition API 之 Setup函数

ゝ一世哀愁。 2022-10-20 13:47 160阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Composition API 之 Setup函数</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) {
          // props表示外部组件传递过来的内容 context表示上下文
          // 在setup里面不能使用this这样的关键词
          // 在setup方法里面没办法调用外部模版或者生命周期函数,而在外部的实例方法或者生命周期函数里面可以直接调用setup方法
          // setup执行的时候这个实例并没有被创建,并没有完成初始化，所以压根不存在this,所以这里面使用this是不行的，拿不到app的实例
          // 但是在app实例创建好之后,setup已经被挂载在这个实例上了,所以当你有这个实例的时候，里面也能获取到这个setup方法
          // 这是Composition API最核心的内容
          return {
            name: 'dell',
            handleClick: () => {
              alert(123)
            }
          }
        }
      });
      const vm = app.mount('#root');
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3 Composition API - 数据监听

> Vue3 提供了两种方式进行数据监听：watchEffect 和 watch > watchEffect 基于 Proxy 代理的响应式数据，主动监听响应式数据的变化

你的名字/ 2023年03月04日 13:28/ 0 赞/ 113 阅读

相关 Vue3 Composition API（setup函数）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq\_45

柔光的暖阳◎/ 2023年01月16日 09:50/ 0 赞/ 118 阅读

相关 Vue3 Composition API

特性入口 setup()，说明：可以看作是一个生命周期，介于 beforeCreate 与 created 之间，新的 `setup` 组件选项在创建组件之前执行，一旦 `

深藏阁楼爱情的钟/ 2022年12月23日 07:05/ 0 赞/ 154 阅读

相关 Vue Composition API 陷阱

编者按：本文转载自XxjzZ的掘金文章，快乐来一起学习吧！前言自从React Hooks出现之后，批评的声音不断，很多人说它带来了心智负担，因为相比传统的Class

阳光穿透心脏的1/2处/ 2022年12月03日 05:26/ 0 赞/ 135 阅读

相关 ③Vue3 Composition API（setup函数）

Vue3 Composition API介绍 setup函数基本使用方法 setup 中创建数据（ref）

落日映苍穹つ/ 2022年11月22日 05:15/ 0 赞/ 224 阅读

相关 Vue3的Composition API 之 Setup函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ゝ一世哀愁。/ 2022年10月20日 13:47/ 0 赞/ 161 阅读

相关 VUE3(setup响应式函数系统API)

> Vue3.0提供的一组具有响应式特性的杉树式API，以函数的形式提供 > 1、reactive > reactive（）函数接收一个普通对象，返回该普通对象的响应式

墨蓝/ 2022年09月08日 14:00/ 0 赞/ 191 阅读

相关 Vue3（setup函数介绍）

> Composition Api > setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。 > 调用时机： > setup函

ゝ一纸荒年。/ 2022年09月08日 13:56/ 0 赞/ 116 阅读

相关 vue3的composition-api实践总结

因为向往已久vue3的开发方式，但是组内有很多历史项目，并且我们受制于ie的支持，所以我们决定在vue2中引入composition-api，来使用他的新特性。在使用过程中，我

「爱情、让人受尽委屈。」/ 2022年08月30日 13:48/ 0 赞/ 153 阅读

相关 vue3学习笔记 Composition API setup

一、Composition API优势相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Ap

﹏ヽ暗。殇╰゛Y/ 2021年09月07日 06:19/ 0 赞/ 368 阅读