【vue基础学习】API风格

这篇具有很好参考价值的文章主要介绍了【vue基础学习】API风格。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、选项式 API 

        使用选项式 API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 datamethods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。

        你也可以理解成这是vue2的写法  把逻辑部分拆分成不同的选项 有数据 方法 生命周期钩子函数

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

二、组合式API

    

通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识,告诉 Vue 需要在编译时进行一些处理,让我们可以更简洁地使用组合式 API。比如,<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与 <script setup> 改造后和上面的模板完全一样的组件:

        这块其实就是vue3的写法   不再是刚才那种分模块的写法了 

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

 三、如何选择

        官网上的描述:        

        两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上,选项式 API 是在组合式 API 的基础上实现的!关于 Vue 的基础概念和知识在它们之间都是通用的。

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

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

        

如果你是使用 Vue 的新手,这里是我们的大致建议:

  • 在学习的过程中,推荐采用更易于自己理解的风格。再强调一下,大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后,你也能够很快地理解另一种风格。

  • 在生产项目中:

    • 当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用 Vue,例如渐进增强的应用场景,推荐采用选项式 API。

    • 当你打算用 Vue 构建完整的单页应用,推荐采用组合式 API + 单文件组件。

          组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量,并将从多个函数中得到的状态组合起来处理复杂问题。

         响应式API将响应性相关的细节抽象出来,并强制按照选项来组织代码,从而对初学者而言更为友好。文章来源地址https://www.toymoban.com/news/detail-573260.html

到了这里,关于【vue基础学习】API风格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 556、Vue 3 学习笔记 -【常用Composition API(五)】 2023.08.25

    Vue3中可以继续使用Vue2中的生命周期钩子,但有两个被更名: beforeDestroy改名为beforeUnmount destroy改名为unmounted Vue3也提供了组合式API形式的生命周期钩子,与Vue2中钩子对应关系如下: beforeCreate === setup() created === setup() beforeMount === onBeforeMount mounted === onMounted beforeUpdate === onBefor

    2024年02月11日
    浏览(39)
  • 557、Vue 3 学习笔记 -【常用Composition API(六)】 2023.09.05

    1. shallowReactive 与 shallowRef shallowReactive:只处理对象最外层属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据,结构比较深,但变化时只是外层属性变化 === shallowReactive 如果有一个对象数据,后

    2024年02月10日
    浏览(38)
  • jenkins 自由风格部署vue项目,参数化构建vue项目

    1.  丢弃旧的构建 2. 是否需要install  3. git 4. 配置node16:  5. 脚本: 脚本:

    2024年02月02日
    浏览(49)
  • Vue实战【Vue开发中的的前端代码风格规范】

    大家好,上一期的导航守卫篇不知大家在私底下是否进行了尝试?之前收到好多小伙伴的私信说什么时候能给大家出一期前段代码风格规范呀,有的同学觉得自己的代码编写的不是很漂亮,虽然自己知道是干啥,但是可读性一点也不高;今天博主也是根据自己多年的开发经验

    2023年04月09日
    浏览(47)
  • Vue 3.0 风格指南 1

    这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。所以根据过去的经验、周边的技术栈、个人价值观做出有意义的偏差是可取的

    2023年04月12日
    浏览(30)
  • Vue-1.零基础学习Vue

    📚 基础与工具 📘 Vue-1.零基础学习Vue : 开始Vue的学习之旅,适合零基础用户。 📗 Vue-2.Nodejs的介绍和安装 : 介绍并指导如何安装 Node.js ,Vue开发的必备环境。 📙 Vue-3.Vue简介 : 提供对Vue框架的基本介绍。 🖥️ 编译器选择与配置 📒 Vue-4.编译器VsCode : 探讨如何在 VsCode 中进行

    2024年02月13日
    浏览(26)
  • 【前端Vue】Vue学习笔记之基础内容

    Vue实例:通过new Vue()创建的Vue实例,它关联一个DOM元素并提供数据和组件的上下文。 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一

    2023年04月23日
    浏览(57)
  • 最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记

    备注:目前 vue-cli 已处于维护模式,官方推荐基于 Vite 创建项目。 vite 是新一代前端构建工具,官网地址:https://vitejs.cn vite 的优势如下: 轻量快速的热重载(HMR),能实现极速的服务启动。 对 TypeScript 、 JSX 、 CSS 等支持开箱即用。 真正的按需编译,不再等待整个应用编译

    2024年02月20日
    浏览(48)
  • 前端学习--vue2--2--vue指令基础

    写在前面: 前置内容 - vue配置 vue指令只的是带有v-前缀的特殊标签属性 插值表达式{{}}是一种vue模板语法。 利用表达式进行差值,渲染到页面。 表达式可以是被求值的代码,js会计算 不能用差值表达式的 不存在的数据 {{data里面不存在的字段 js {{if}} 标签属性 span id=“

    2024年02月14日
    浏览(40)
  • vue3项目 - Eslint 配置代码风格

    总结: Prettier   (代码规范的插件,格式化 )--- 美观 Eslint   (规范、纠错、检验错误 )----- 纠错 首先, 禁用 Prettier 插件,安装 ESLint 插件,配置保存时自动修复 再 配置代码风格文件 .eslintrc.cjs (Prettier 配置 + ESLint 配置, 附配置代码 ) 配置内容 如, Prettier:单引号、

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包