之前介绍的是一些关于代码复用的问题, 如 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. [爬坑指南] 虚拟机和docker实现下载服务器

    现在需要挂梯子下载一批资源,然而我的梯子装在路由器中,openclash只能配置指定的某个设备不走梯子.所以索性就装个虚拟机专门用来下载东西,挂bt.如果需要走梯子,就单独在这个下载机中配置一个廉价梯 ...

  2. 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

    从 Chrome 125 开始,支持了一个全新的 CSS 特性 - Anchor Positioning,翻译过来即是锚点定位. 在之前的文章中,我们较为系统的讲述了这个新特性的使用,感兴趣的可以翻开 ...

  3. PPT 技巧&网站

    样机生成网站 https://mockuphone.com/device?type=computer CTROL+L 演示生成荧光笔 3.如何内嵌字体 文件->选项->保存->勾选潜 ...

  4. Keil中设置显示空白符，并将Tab键使用4个空格代替

    前言 Keil 的默认设置是没有将 Tab 键使用空格代替的,不同的文本编辑器对 Tab 键所占的空格数不同,有占 2 个空格的,也有占 4 个空格的,这就导致同样的代码在不同的编辑器中缩进不同,虽不 ...

  5. 分享一个 Win11 隐藏右下角日期时间的解决方案

    分享一个 Win11 隐藏右下角日期时间的解决方案

  6. 我觉得 AI 你过分了！

    大家好,我是程序员鱼皮.创业之后,头发掉的厉害,已经记不清自己头发茂密如林的时候了... 正好最近 AI 工具 Gemini 新出了原生多模态生图功能,于是便想借助 AI 来生成一张 "鱼皮 ...

  7. vue浏览器插件及安装

    vue浏览器插件及安装 插件下载: 链接:https://pan.baidu.com/s/1Wu4a4skkJ-i5ccydRnn8qg 提取码:dwux 然后打开浏览器,F12,有这个vue就成功了

  8. pandas -- 处理非数值型数据 -- 数据分析三剑客(核心)

    博客地址:https://www.cnblogs.com/zylyehuo/ 开发环境 anaconda 集成环境:集成好了数据分析和机器学习中所需要的全部环境 安装目录不可以有中文和特殊符号 jup ...

  9. 网络设备开局配置生成器（第三次更新） QQ交流群：（4817315）

    下载:链接: https://pan.baidu.com/s/1BIvh3u7VfbaQtBsUOjl1IA?pwd=kgtw 提取码: kgtw 网络设备开局配置生成器(SecureCRT vbs脚 ...

  10. [源码系列：手写spring] IOC第一节：简单bean容器

    本专栏带领大家手写一遍spring的核心代码,包括IOC,AOP,三级缓存... 第一节较为简单,后面的章节会逐渐提升代码量和复杂度,喜欢的同学记得订阅哦 ￣▽￣ 定义一个简单的bean容器BeanF ...