【7 Vue3 – Composition API】

1 认识Composition API

Options API的弊端

在这里插入图片描述
在这里插入图片描述

setup函数

在这里插入图片描述

2 setup函数的参数

在这里插入图片描述

3 setup简单使用

1 注意不再有响应式数据
要做到响应式数据需要在数据定义时使用ref包装数据,并且在使用时,使用value解包

2 注意template要使用的数据或者函数,必须要return 返回才能被使用

<template>
  <div class="app">
    <!-- template中ref对象自动解包 -->
    <h2>当前计数: {{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 1.定义counter的内容
    // 默认定义的数据都不是响应式数据
    let counter = ref(100)
    const increment = () => {
      counter.value++
      console.log(counter.value)
    }
    const decrement = () => {
      counter.value--
    }

    return {
       counter, increment, decrement 
    }
  }
}
</script>

<style>
</style>

setup函数的返回值

在这里插入图片描述

4 为数据提供响应式的特性

1 Reactive API,复杂数据类型

在这里插入图片描述

2 Ref API,简单数据类型包装

ref可以简单数据类型包装,ref也可以定义复杂的数据
在这里插入图片描述

<template>
  <div>
  //普通数据
    <h2>message: {{ message }}</h2>
    <button @click="changeMessage">修改message</button>
    <hr>
    //通过Reactive提供响应式数据
    <h2>账号: {{ account.username }}</h2>
    <h2>密码: {{ account.password }}</h2>
    <button @click="changeAccount">修改账号</button>
    <hr>
    //通过Ref提供响应式数据
    <!-- 默认情况下在template中使用ref时, vue会自动对其进行解包(取出其中value) -->
    <h2>当前计数: {{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="counter++">+1</button>

  </div>
</template>

<script>
  import { reactive, ref } from 'vue'

  export default {
    setup() {
      // 1.定义普通的数据: 可以正常的被使用
      // 缺点: 数据不是响应式的
      let message = "Hello World"
      function changeMessage() {
        message = "你好啊,李银河!"
        console.log(message)
      }

      // 2.定义响应式数据
      // 2.1.reactive函数: 定义复杂类型的数据
      const account = reactive({
        username: "coderwhy",
        password: "123456"
      })
      function changeAccount() {
        account.username = "kobe"
      }

      // 2.2.ref函数: 定义简单类型的数据(也可以定义复杂类型的数据)
      // counter定义响应式数据
      const counter = ref(0)
      function increment() {
        counter.value++
      }

   

      return {
        message,
        changeMessage,
        account,
        changeAccount,
        counter,
        increment,
        info
      }
    }
  }
</script>

<style scoped>
</style>



3 Reactive 和 ref 的应用场景

 setup() {
      // 定义响应式数据: reactive/ref
      // 强调: ref也可以定义复杂的数据
      const info = ref({})
      console.log(info.value)

      // 1.reactive的应用场景
      // 1.1.条件一: reactive应用于本地的数据
      // 1.2.条件二: 多个数据之间是有关系/联系(聚合的数据, 组织在一起会有特定的作用)
      const account = reactive({
        username: "coderwhy",
        password: "1234567"
      })

      const username = ref("coderwhy")
      const password = ref("123456")

      // 2.ref的应用场景: 其他的场景基本都用ref(computed)
      // 2.1.定义本地的一些简单数据
      const message = ref("Hello World")
      const counter = ref(0)
      const name = ref("why")
      const age = ref(18)

      // 2.定义从网络中获取的数据也是使用ref
      // const musics = reactive([])
      const musics = ref([])
      onMounted(() => {
        const serverMusics = ["海阔天空", "小苹果", "野狼"]
        musics.value = serverMusics
      })


      return {
        account,
        username,
        password,
        name,
        age
      }
    }
  }
</script>

5 computed

在这里插入图片描述

6 在setup中使用ref获取元素或者组件

在这里插入图片描述

7 生命周期钩子

在这里插入图片描述

8 侦听数据的变化 watch

在这里插入图片描述

<template>
  <div>AppContent</div>
  <button @click="message = '你好啊,李银河!'">修改message</button>
  <button @click="info.friend.name = 'james'">修改info</button>
</template>

<script>
  import { reactive, ref, watch } from 'vue'

  export default {
    setup() {
      // 1.定义数据
      const message = ref("Hello World")
      const info = reactive({
        name: "why",
        age: 18,
        friend: {
          name: "kobe"
        }
      })

      // 2.侦听数据的变化
      watch(message, (newValue, oldValue) => {
        console.log(newValue, oldValue)
      })
      watch(info, (newValue, oldValue) => {
        console.log(newValue, oldValue)
        console.log(newValue === oldValue)
      }, {
        //立即执行一次
        immediate: true
      })

      // 3.监听reactive数据变化后, 获取普通对象,而不是代理对象
      watch(() => ({ ...info }), (newValue, oldValue) => {
        console.log(newValue, oldValue)
      }, {
        immediate: true,
        deep: true
      })

      return {
        message,
        info
      }
    }
  }
</script>

<style scoped>
</style>

侦听自动捕获依赖:watchEffect

在这里插入图片描述
在这里插入图片描述

<template>
  <div>
    <h2>当前计数: {{ counter }}</h2>
    <button @click="counter++">+1</button>
    <button @click="name = 'kobe'">修改name</button>
  </div>
</template>

<script>
  import { watchEffect, watch, ref } from 'vue'

  export default {
    setup() {
      const counter = ref(0)
      const name = ref("why")

      // watch(counter, (newValue, oldValue) => {})

      // 1.watchEffect传入的函数默认会直接被执行
      // 2.在执行的过程中, 会自动的收集依赖(依赖哪些响应式的数据)
      const stopWatch = watchEffect(() => {
        console.log("-------", counter.value, name.value)

        // 判断counter.value > 10
        if (counter.value >= 10) {
        //停止监听
          stopWatch()
        }
      })

      return {
        counter,
        name
      }
    }
  }
</script>

<style scoped>
</style>

9 hook封装

Composition API的主要作用就是利用函数式编程,可以很容易的将可以复用的代码抽取出来(因为代码可以写在一起),这些被抽取的,单独功能的代码,被称为hook(钩子).不是真正的hook,而是类似hook的能力.

hook的作用和组件一样都是封装,然而组件偏向于UI的封装,而hook偏向于功能逻辑,状态管理.
也就是说Vue3可以利用Composition API将optionsAPI的内容,抽取为hook功能,给组件使用,组件的功能被抽取出来了,只剩下UI由组件实现.

1 hook封装,计数器

useCounter.js

import { ref, onMounted } from 'vue'

export default function useCounter() {
  const counter = ref(0)
  function increment() {
    counter.value++
  }
  function decrement() {
    counter.value--
  }
  //模拟网络环境,初始化值
  onMounted(() => {
    setTimeout(() => {
      counter.value = 989
    }, 1000);
  })

  return {
    counter,
    increment,
    decrement
  }
}

2 使用hook

<template>
  <h2>About计数: {{ counter }}</h2>
  <button @click="increment">+1</button>
  <button @clcik="decrement">-1</button>
</template>

<script>
  import useCounter from '../hooks/useCounter'

  export default {
    setup() {
      //使用hook函数
	  //const { counter, increment, decrement } = useCounter()
	  // return {
      //   counter,
      //   increment,
      //   decrement,
      //   }
	
	
      return {
      //使用hook函数的等价写法
        ...useCounter()
      }
    }
  }
</script>

10 script setup语法糖

在这里插入图片描述
使用这种语法糖,在需要使用组件时,不再需要使用components声明,只要import导入就可以直接使用

顶层的绑定会被暴露给模板

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/23413.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软考A计划-软件设计师笔记

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

MT4期货软件怎么使用?有哪些MT4期货软件使用知识?

现在MT4软件在投资市场上应用广泛&#xff0c;当然也包括期货交易市场&#xff0c;但有不少投资者不知道为什么一定要选择MT4期货软件&#xff0c;其实选择MT4期货软件的理由有很多&#xff0c;MT4作为一款交易软件&#xff0c;不仅能够为投资者提供准确的市场信息&#xff0c;…

02SpringCloud Nacos注册中心和配置中心与Sentinel服务熔断和流控

Nacos注册中心和配置中心 Nacos 是 Alibaba 开发的用于微服务管理的平台&#xff0c;核心功能&#xff1a;服务注册与发现和集中配置管理。 Nacos 作为服务注册发现组件&#xff0c;可以替换Spring Cloud 应用中传统的服务注册于发现组件&#xff0c;如&#xff1a;Eureka、C…

Ai作图可控性演进——从SD到MJ

背景 Ai作图从Diffusion模型开始&#xff0c;作图进入稳步发展快车道。然后用过diffusion系列作图的同学对产图稳定性&#xff0c;以及可控性都会颇有微词。diffusion系列作图方法在宏观层面上确实能够比较好的做出看上去还不错的图。然后当你细抠细节时候&#xff0c;发现这东…

如何在Windows 11更新后解决C盘已满的问题?

Windows 11比Windows 10需要占用C盘更多的空间&#xff0c;在升级到Windows 11后&#xff0c;如果升级后出现问题&#xff0c;安装程序可以帮你退回到Windows 10。无论怎样&#xff0c;在升级到Windows 11后&#xff0c;系统会自动制作以前的数据的副本&#xff0c;这会占用大量…

win7下java环境搭建以及jdk环境变量配置

很多人在搭建页游、手游时候经常遇到JAVA闪退&#xff0c;基本都是环境变量或者路径错误导致的。本章节主要讲解在win7系统环境下&#xff0c;java环境变量配置方法&#xff0c;java环境配置正确&#xff0c;才可以对apk程序进行反编译运行页游手游。其他操作系统环境变量大同小…

Mesh形变算法

前言&#xff1a; 作者正好因为动画、模拟仿真等等的重大需求需要预先研发离散形的模型Mesh的形变算法&#xff0c;并且要验证、研究适用的范围、特别是性能等等&#xff0c;摸着石头过河别喷&#xff0c;毕竟我主要是渲染、动画、引擎的对于计算几何、三维重建不是很熟悉&…

一体化医学影像平台PACS源码,影像存档与传输系统源码

PACS影像存档与传输系统源码 PACS即影像存档与传输系统&#xff0c;是医学影像、数字化图像技术、计算机技术和网络通讯技术相结合的产物&#xff0c;是处理各种医学影像信息的采集、存储、报告、输出、管理、查询的计算机应用程序。 是基于DICOM标准的医学影像管理系统&…

大龄、零基础,想转行做网络安全。怎样比较可行?这届粉丝可真难带

昨晚上真的给我气孕了。 对于一直以来对网络安全兴趣很大&#xff0c;想以此作为以后的职业方向的人群。 不用担心&#xff0c;你可以选择兼顾工作和学习&#xff0c;以步步为营的方式尝试转行到网络安全领域。 那么&#xff0c;网络安全到底要学些什么呢&#xff1f; &…

Kyligence 客户案例招商银行批发业务分析平台获评金融数字化最佳实践案例

近日&#xff0c;“2023 爱分析金融数字化最佳实践案例”评选结果正式揭晓。Kyligence 携手招商银行申报的“招商银行‘火眼’批发业务分析平台”项目经过领先性、案例创新性、应用成熟度、价值创造等维度综合评选&#xff0c;最终获评“金融数字化最佳实践案例”。 招商银行“…

c++输入输出文件操作stream

系列文章目录 C IO库 文章目录 系列文章目录前言一、文件IO概述coutcin其他istream类方法 文件输入和输出内核格式化总结 前言 一、文件IO 概述 c程序把输入和输出看作字节流。输入时&#xff0c;程序从输入流中抽取字节&#xff1a;输出时&#xff0c;程序将字节流插入到输…

进攻中型SUV,蔚来/小鹏的智能化「满配」能否撬动需求

251.29万辆&#xff0c;这是2022年中国市场&#xff08;不含进出口&#xff09;乘用车中型SUV交出的答卷&#xff0c;交付量仅次于紧凑型SUV&#xff0c;排名细分市场第二。在这份成绩单中&#xff0c;有几个数字特别醒目。 1、31.64万辆&#xff0c;这是排名这个细分市场交付量…

BFT 最前线 | 张一鸣成立个人基金;马斯克:AI是双刃剑;阿里首席安全科学家离职;卡内基梅隆究团队:解决农业虫卵问题的机器人

文 | BFT机器人 名人动态 CELEBRITY NEWS 01 字节跳动创始人张一鸣 在香港成立个人投资基金 在卸任CEO两年后&#xff0c;字节跳动创始人张一鸣在香港成立了一家个人投资基金。香港公司注册处网站显示&#xff0c;该基金名为Cool River Venture&#xff0c;性质是私人股份有限…

connect reset/timeout/reject 排查

异常排查 问题描述问题处理初步分析http配置即服务整体情况整体排查服务重启gcCPUJVM 暂存疑问点总结启动参数要配全监控体系健全科学使用jar包降配参数是参数得动态变 问题描述 最初出现的时候&#xff0c;是在每天的早上8-10这个时间范围内&#xff0c;服务A上的有一个接口时…

电源方案对比

电源 1.方案选择&#xff1a;1 LM2596 2 MP1584 3&#xff1a;TPS54301LM25962.MP1584&#xff1a;3.TPS5430 2.1输出2A电流的纹波2.2 输出3A电流的纹波3.动态响应4.发热5.电源转换效率6.综合指标reference 1.方案选择&#xff1a;1 LM2596 2 MP1584 3&#xff1a;TPS5430 1LM…

开源赋能 普惠未来|XuperCore诚邀您参与2023开放原子全球开源峰会

XuperCore&#xff08;待更名&#xff09;是百度自主研发&#xff0c;拥有完整知识产权的区块链底层技术XuperChain的内核&#xff0c;拥有620多篇区块链核心技术专利&#xff0c;以“高性能”、“开源”为主要设计目标&#xff0c;致力于创建“更快、更通用、更好用”的区块链…

protobuf全局环境搭建

一、安装npm 1.测试是否安装npm 如果未出现npm 不是内部或外部命令&#xff0c;则先安装npm npm是NodeJs的包管理器&#xff08;Node Package Manager&#xff09; 所以我们要安装npm&#xff0c;其实就是安装NodeJs&#xff0c;进入NodeJs官网 下载完成之后&#xff0c;安装…

开发工具---Eclipse 教程Ⅰ

Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。 Eclipse 是 Java 的集成开发环境&#xff08;IDE&#xff09;&#xff0c;当然 Eclipse 也可以作为其他开发语言的集成开发环境&#xff0c;如C&#xff0c;C&#xff0c;PHP&#xff0c;和 Ruby 等。 Eclipse 附带…

劝你别去外包,干了三年,感觉废了一半....

先说一下自己的情况&#xff0c;大专生&#xff0c;19年通过校招进入杭州某个外包软件公司&#xff0c;干了接近3年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了3年的功…

【Android定制】BUILD_AGO_GMS = no 和 BUILD_GMS=no属性

文章目录 概要名词解释细节小结 概要 在安卓底层源码中&#xff0c;有这样的两个属性&#xff0c;这两个第一眼看上去都像是带不带谷歌&#xff0c;BUILD_AGO_GMS no和BUILD_GMSno有什么区别&#xff1f;&#xff1f; 如果带了谷歌&#xff0c;那么这个设备就差不多是国外定…