之前介绍的是一些关于代码复用的问题, 如 mixin, plugin 等. 从本篇开始呢, 就将来学习一波 vue3 的新特性, 即 Composition API

咱之前的写法, 即把各种逻辑, 方法都放到 data, methods, template ... 中, 在实际开发中就会带来一个维护的问题, 尤其是很长的时候, 逻辑一会儿要用 data, 一会儿用 methods, 然后用 template .. 上下翻滚维护, 最后就变成了 "屎山".

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Options API</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      data() {

        return { name: 'youge', age: 18 }

      },

      // Options API, 将很多方法, 逻辑写在 methods, tempalte...中

      methods: {

        A () {},

        B () {},

        C () {},

        D () {},

        E () {},

      },

      template: `<div>name: {{name}}, age: {{age}}</div>`

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

实际上，选项式 API 是在组合式 API 的基础上实现的.

选项式 Options API 以“组件实例”的概念为中心 (如之前用的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

组合式 Compositon API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

从实际项目来看, 尤其是多个复杂场景就涉及到多个路由呀, 组件呀, 复杂页面之类的, 当然选 Compositon API 呀, 能真正去分工解耦, 组件化, 模块化, 爽得不行.

setup 函数

因此, 我们首先来介绍这个 setup 函数, 它是在 created 实例被完全初始化之前被执行.

这样一来, 咱就可以将 composition API 都包裹在里面啦.

setup(props, context) {

    retrun {

        变量, 函数 等, 都能被外面单文件使用哦

    }

}

用一个小栗子来演示则:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>setup</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `<div @click="handleClick">{{name}}</div>`,

      // setup 函数在 created 实例被完全初始化之前会执行

      // app 创建前 setup 无效, 即不能用 this; 之后则挂载到app

      setup (props, context) {

        return {

          name: 'youge',

          handleClick () {

            alert(666)

          }

        }

      }

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

小结

  • Compositon API 在函数作用域内定义响应式变量, 多个组合状态来处理复杂问题
  • setup 函数在 created 实例被完全初始化之前会执行
  • setup 函数将不能再使用 this 即在 app 创建前 setup 是无效的啦, 之后才会挂载到 app

vue3 基础-CompositionAPI - setup的更多相关文章

  1. vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板

    目录 vue3介绍-vue3创建项目-setup函数-ref和reactive-计算属性和监听-生命周期-toRefs-script setup的作用和lang=ts-vue后台管理模板 昨日内容回顾 ...

  2. 一篇文章讲明白vue3的script setup，拥抱组合式API！

    引言 vue3除了Composition API是一个亮点之外,尤大大又给我们带来了一个全新的玩意 -- script setup,对于setup大家相信都不陌生,而对于script setup有些同 ...

  3. Vue3的script setup语法糖这么好用的吗？？？？

    最近发现这个vue3居然还可以这样写 原始写法 <template> <h1>Tangdoudou</h1> <h1>{{ num }}</h1& ...

  4. vue3 语法糖setup 兄弟组件传值

    使用 mitt // 全局引入 npm install mitt 或者 cnpm install mitt 在main文件中挂载 import { createApp } from 'vue' imp ...

  5. vue3.0+ts+setup语法糖props写法

    写法一 import defaultImg from '@/assets/images/defaultImg.png' const props = defineProps({ src: { type: ...

  6. vue3基础

    什么是CDN? 内容分发网络--通过相互链接的网络系统,利用最靠近用户的服务器,更快更可靠的发送给用户. vue的cdn引入 method中的函数为什么不能用this? this的主要使用是来获取da ...

  7. 尝鲜 vue3.x 新特性 - CompositionAPI

    0. 基础要求 了解常见的 ES6 新特性 ES6 的导入导出语法 解构赋值 箭头函数 etc... 了解 vue 2.x 的基本使用 组件 常用的指令 生命周期函数 computed.watch.r ...

  8. Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composit ...

  9. vue3 学习笔记 (四)——vue3 setup() 高级用法

    本篇文章干货较多,建议收藏! 从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API.由于选项式API一个变量存在于多处,如果出现问题时 ...

  10. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

随机推荐

  1. 大型语言模型（LLM）为什么处理日语这么“头大”？

    引言 你有没有想过,为什么 AI 大神们处理日语时,总是会挠头?其实,这都要从"token"这个神奇的小东西说起. 在大型语言模型(LLM)中,token 就是文本的基本处理单位. ...

  2. git命令参考

    git命令参考 前言 在版本管理中,我们常用到git或者svn去管理我们的代码. 因为嵌入式开发经常要用到Linux环境做开发,所以懂得一定的git命令对我们进行开发过程中的版本管理非常重要 创建仓库 ...

  3. macbookpro m3本地部署DeepSeek模型

    macbookpro m3有着十分强大的性能.在deepseek如火如荼的当下,可以尝试在本地部署并使用.还可以将自己的文档作为语料喂给deepseek,使其能成为自己专属的AI助手. 本文介绍使用o ...

  4. 补充：基于项目的协同过滤推荐算法(Item-Based Collaborative Filtering Recommendation Algorithms)

    前言 继续上篇博客,继续读论文. 想看上篇论文的同学可以点击这里 相关工作 In this section we briefly present some of the research litera ...

  5. 【Abaqus热分析】热膨胀系数设置

    来源:帮助文档

  6. echarts柱形图给X轴坐标类目添加点击事件

    在项目中遇到这么个需求要在柱形图上的x轴添加点击事件,当点击对应x轴文字的时候要弹出模态框展示子图表 根据echarts的Api给图表实例绑定点击事件 myChartInstance?.on('cli ...

  7. 微信小程序分包体积优化建议

    代码包体积优化 启动性能优化最直接的手段是降低代码包大小,代码包大小直接影响了下载耗时,影响用户启动小程序时的体验. 开发者可以采取以下手段优化代码包体积: 1. 合理使用分包加载 推荐所有小程序使用 ...

  8. workman PHPSocket.IO文档

    安装 请使用composer集成phpsocket.io. 脚本中引用vendor中的autoload.php实现SocketIO相关类的加载.例如 require_once '/你的vendor路径 ...

  9. Docker 容器跨主机多网段通信解决方案

    一.MacVlan实现Docker的跨主机网络通信的方案有很多,如之前博文中写到的通过部署 Consul服务实现Docker容器跨主机通信    Macvlan工作原理:    Macvlan是Lin ...

  10. Delphi 执行一个外部程序，当外部程序结束后言主程序立即响应

    delphi 执行一个外部程序,当外部程序结束后言主程序立即响应 我们经常能看到360安全卫士进行windows系统升级时,执行windows升级程序,当升级程序执行完成后,360马上弹出提示框.这样 ...