之前介绍的是一些关于代码复用的问题, 如 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. C语言编程技巧 全局变量在多个c文件中公用的方法

    在使用C语言编写程序时,经常会遇到这样的情况:我们希望在头文件中定义一个全局变量,并将其包含在两个不同的C文件中,以便这个全局变量可以在这两个文件中共享.举个例子,假设项目文件夹"proje ...

  2. Shell - [01] 概述

    一.shell是什么 Shell 是一个命令解释器,接收应用程序/用户命令去调用操作系统内核. Shell 是一个功能强大的编程语言,易编写.易调试.灵活性强. 二.shell的解析器有哪些 [roo ...

  3. Easyexcel（5-自定义列宽）

    注解 @ColumnWidth @Data public class WidthAndHeightData { @ExcelProperty("字符串标题") private St ...

  4. 考勤运行提示‘Length of values (115) does not match length of index (116) >>> ’

    源码 df['餐补'] = money_list 解决思路: 1.分别打印输出两个字段长度 本来以为是每个月的文件格式不一致导致有的文件好用有的文件不好用 经过耐心查看代码 前面的算法统计有一个本应该 ...

  5. python xlrd xlwr函数 读取excel好文总结

    https://www.cnblogs.com/python-robot/p/9958352.html 官网: http://www.python-excel.org/ 好文: https://www ...

  6. 运算符“<”不能应用于类型“boolean”和“RegExp”。ts-plugin(2365)

    在使用vue3 + setup + ts + volar插件开发时,遇到文件全红报这个错,尝试很多方法没有效果,最后把vscode插件全部卸载,然后重新安装就好了,如果有遇到此问题的可以尝试同样的方法 ...

  7. Vue3+TS项目无法识别自动导入提示

    遇到问题 在写 Vue3 + TS 项目的时候,经常遇到写完一个新方法后,在组件使用的时候无法自动识别. 解决方案 Volar: Restart Vue Server 重新启动 Vue 服务

  8. 解决Mac M芯片 Wireshark 运行rvictl -s 后，出现Starting device failed

    前言 mac os big sur 之后,苹果系统的安全性能提升,导致 rvictl -s 创建虚拟网卡失败. $ rvictl -s 000348120-001621w21184C01E boots ...

  9. codelite常用快捷键积累

    博客地址:https://www.cnblogs.com/zylyehuo/ 编译整个工作空间 workplace Ctrl+shift+B 编译当前文件 file Ctrl+F7 编译项目 proj ...

  10. FDConnection lost后的处理right here