Vue3的Composition API 之 Setup函数

ゝ一世哀愁。 2022-10-20 13:47 171阅读 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 条评论，171人围观）

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

相关阅读

相关 vue3.0 Composition API 上手初体验神奇的 setup 函数 (三) 生命周期函数

vue3.0 Composition API 上手初体验神奇的 setup 函数 (三) 生命周期函数通过前面两讲，我相信大家对于 `vue 3.0` 双向绑定数据，

心已赠人/ 2023年02月09日 14:07/ 0 赞/ 7 阅读

相关 vue3的composition-api实践总结

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

小咪咪/ 2023年01月24日 04:21/ 0 赞/ 4 阅读

相关 vue3的composition-api实践总结

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群因为向往已久vue3的开发方式，但是组内有很多历史项目，并且我们受制于ie的支持，所以我们决定在vue2

深碍√TFBOYSˉ_/ 2023年01月23日 15:50/ 0 赞/ 5 阅读

相关 Vue3 Composition API（setup函数）

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

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

相关 Vue3 Composition API

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

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

相关 ③Vue3 Composition API（setup函数）

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

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

相关 Vue3的Composition API 之 Setup函数

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

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

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

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

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

相关 vue3的composition-api实践总结

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

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

相关 vue3学习笔记 Composition API setup

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

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