vue3学习记录

  • vue3有选项式API(和vue2一样保留this用法)和组合式API(没有了this的概念);选项式 API 是在组合式 API 的基础上实现的!

  • 增加了组合式api,利于代码逻辑的组合,相关联的逻辑汇集在一处,易于代码的维护;

  • 增加setup的语法,组合式 API 通常会与 setup 搭配使用;

  • vue3模板代码支持多个根节点(vue2只有一个根节点);

  • vue3组合式API增加ref和reactive声明响应式数据

    • ref在js中需要使用.value方式获取值,在模板中,ref 会自动解包则不需要.value获取值;

    • ref在模板中解包的注意事项:在模板渲染上下文中,只有顶级的 ref 属性才会被解包

      const count = ref(0)
      const object = { id: ref(1) }// 模板代码
      // 可以正常工作
      {{ count + 1 }}
      // 下面的无非正常工作(会输出[object Object]1),因为在计算表达式时 object.id 没有被解包,仍然是一个 ref 对象
      {{ object.id + 1 }}
      // 可以利用结构来解决该问题
      const { id } = object
      {{ id + 1 }} // 输出2
      // 另一个需要注意的点是,如果 ref 是文本插值的最终计算值 (即 {{ }} 标签),那么它将被解包,因此以下内容将渲染为 1
      // 该特性仅仅是文本插值的一个便利特性,等价于 {{ object.id.value }}
      {{ object.id }}
      
    • reactive() 只适用于对象 (包括对象、数组和内置类型,如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型

    • reactive不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失,例如下面的例子:

      let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
      // (响应性连接已丢失!)
      state = reactive({ count: 1 })
      
    • reactive对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接

      const state = reactive({ count: 0 })// 当解构时,count 已经与 state.count 断开连接
      let { count } = state
      // 不会影响原始的 state
      count++// 该函数接收到的是一个普通的数字
      // 并且无法追踪 state.count 的变化
      // 我们必须传入整个对象以保持响应性
      callSomeFunction(state.count)
      
  • vue3组合式与TS更好的适配;

  • vue3增加hooks;

  • 生命周期重命名beforeDestroy->beforeUnmount、destroyed->unmounted

  • 声明ref例子(单文件组件的setup语法)

    <script setup>
    import { ref, onMounted } from 'vue'
    // 注意这个 ref 使用 null 值来初始化。这是因为当 <script setup> 执行时,DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问
    const pElementRef = ref(null)
    onMounted(() => {pElementRef.value.textContent = 'mounted!'
    })
    </script>
    <template><p ref="pElementRef">hello</p>
    </template>
    
  • vue3中的watch函数,watch 的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组:

    const x = ref(0)
    const y = ref(0)// 单个 ref
    watch(x, (newX) => {console.log(`x is ${newX}`)
    })// getter 函数
    watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
    )// 多个来源组成的数组
    watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
    })const obj = reactive({ count: 0 })
    // 错误,因为 watch() 得到的参数是一个 number
    watch(obj.count, (count) => {console.log(`count is: ${count}`)
    })// 正确,提供一个 getter 函数
    watch(() => obj.count,(count) => {console.log(`count is: ${count}`)}
    )// 深层侦听器,慎用,监听的数据过大时,会有性能问题
    const obj = reactive({ count: 0 })
    watch(obj, (newValue, oldValue) => {// 在嵌套的属性变更时触发// 注意:`newValue` 此处和 `oldValue` 是相等的// 因为它们是同一个对象!
    })
    obj.count++
    
  • vue3的watchEffect():

    // 繁琐示例:
    const todoId = ref(1)
    const data = ref(null)
    watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
    )
    // 利用watchEffect重写上面例子,回调会立即执行,不需要指定 immediate: true。
    // 在执行期间,它会自动追踪 todoId.value 作为依赖(和计算属性类似)。
    // 每当 todoId.value 变化时,回调会再次执行。有了 watchEffect(),我们不再需要明确传递 todoId 作为源值。
    watchEffect(async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
    })
    // 对于这种只有一个依赖项的例子来说,watchEffect() 的好处相对较小。
    // 但是对于有多个依赖项的侦听器来说,使用 watchEffect() 可以消除手动维护依赖列表的负担。
    // 此外,如果你需要侦听一个嵌套数据结构中的几个属性,watchEffect() 可能会比深度侦听器更有效,因为它将只跟踪回调中被使用到的属性,而不是递归地跟踪所有的属性。
    
    1. watch vs watchEffect​,watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:
    • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch
      会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

    • watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。

    1. watch和watchEffect的回调的触发时机,默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: ‘post’ 选项:
    watch(source, callback, {flush: 'post'
    })watchEffect(callback, {flush: 'post'
    })// 后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect():
    import { watchPostEffect } from 'vue'
    watchPostEffect(() => {/* 在 Vue 更新后执行 */
    })
    

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UseContentHash选项能否在打包AssetBundle时计算可靠的Hash

1&#xff09;UseContentHash选项能否在打包AssetBundle时计算可靠的Hash 2&#xff09;如何清理Native Reserved部分的内存 3&#xff09;Addressables资源完整性校验 4&#xff09;通过Image.color和CanvasRenderer.SetColor修改UI组件颜色的区别 这是第368篇UWA技术知识分享…

C++垃圾回收机制

非托管C C 有垃圾收集&#xff0c;采用Hans-Boehm Garbage Collector的形式。也可能有其他垃圾收集库。 您可以使用使用RAII的智能指针&#xff08;如果指针允许共享访问&#xff0c;则使用引用计数&#xff09;来确定何时删除对象。一个好的智能指针库是Boost的智能指针。绝大…

问题 C: 求逆序对

题目描述 给定一个序列a1,a2,…,an&#xff0c;如果存在i<j并且ai>aj&#xff0c;那么我们称之为逆序对&#xff0c;求逆序对的数目。 注意&#xff1a;n<105&#xff0c;ai<105 输入 第一行为n,表示序列长度。 接下来的n行&#xff0c;第i1行表示序列中的第i…

【spring之条件评估器】

Spring条件评估器 1. ConditionEvaluator是干嘛的2. 先看其属性类ConditionContextImp context3. 看ConditionEvaluator 的内部方法4. AnnotationTypeMetadata 是干嘛的5. Condition 接口 1. ConditionEvaluator是干嘛的 内部的使用类,用来评估注解的 2. 先看其属性类Condition…

[Linux] 一文理解HTTPS协议:什么是HTTPS协议、HTTPS协议如何加密数据、什么是CA证书(数字证书)...

之前的文章中, 已经分析介绍过了HTTP协议. HTTP协议在网络中是以明文的形式传输的. 无论是GET还是POST方法都是不安全的. 为什么不安全呢? 因为: HTTP协议以明文的形式传输数据, 缺乏对信息的保护. 如果在网络中传输数据以明文的形式传输, 网络中的任何人都可以轻松的获取数据…

何为算法之什么是算法

前言 你相信算法吗&#xff1f;对于这个问题的答案&#xff0c;我们并不关心&#xff0c;因为无论你信不信&#xff0c;不可否认的是算法席卷了你我的生活。 通信聊天时词汇的联想输入、网络购物时商品的关联推荐和下班回家时家电的智能声控&#xff0c;其算法早己悄无声息地进…

Java学习苦旅(二十六)——反射,枚举和lamda表达式

本篇博客将讲解反射&#xff0c;枚举和lamda表达式。 文章目录 反射定义用途反射基本信息反射相关的类Class类Class类中相关的方法 反射示例反射的优缺点优点缺点 枚举背景及定义常用方法枚举优缺点优点缺点 Lambda表达式背景语法函数式接口定义基本使用 变量捕获Lambda在集合…

力扣(leetcode)第387题字符串中的第一个唯一字符(Python)

387.字符串中的第一个唯一字符 题目链接&#xff1a;387.字符串中的第一个唯一字符 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入: s “leetcode” 输出: 0 示例 2:…

科学的摇篮 - 贝尔实验室

AT&T贝尔实验室&#xff08;AT&T Bell Laboratories&#xff09;是美国电信公司AT&T的研究与开发部门&#xff0c;成立于1925年。它在20世纪的许多年里一直是科学与技术创新的重要中心&#xff0c;做出了众多重大贡献&#xff0c;并为多项科技成就奠定了基础。以下…

Typescript 中创建对象的方式

1.type type MyObj {a: string;b: number;c: () > number; }; 2.interface interface MyObj {a: string;b: number;c: () > number; } 3. class class MyObj {a:string;b:number;c:()>number } // Error: Property staticProperty does not exist on type M.

Spring Boot应用启动时自动执行代码的五种方式

Spring Boot为开发者提供了多种方式在应用启动时执行自定义代码&#xff0c;这些方式包括注解、接口实现和事件监听器。在本篇博客中&#xff0c;我们将探讨一些常见的方法&#xff0c;以及如何利用它们在应用启动时执行初始化逻辑。 1. PostConstruct注解 PostConstruct注解…

嵌入式系统习题(考试相关)

文章目录 上一篇嵌入式系统概述ARM技术概述ARM指令Thumb指令集ARM程序设计 上一篇 嵌入式系统复习–基于ARM的嵌入式程序设计 嵌入式系统概述 嵌入式系统中常用的通信接口包括哪些&#xff1f; RS-232C串行通信接口&#xff0c;RS-422串行通信接口&#xff0c;RS-485串行通信…

【JAVA】Iterator 和 ListIterator 有什么区别?

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 在Java中&#xff0c;遍历集合是日常编程中常见的任务&#xff0c;而Iterator和ListIterator作为遍历集合的两个主要接口&#xff0…

application.properties 如何改成 application.yml

Convert YAML and Properties File 右键直接转换即可 Further Reading &#xff1a; idea 常用插件

【两阶段鲁棒】计及需求响应的多能互补微网两阶段鲁棒优化matlab

目录 1 主要内容 算例模型 目标函数 第一阶段 第二阶段 求解流程图 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《多能互补微网两阶段鲁棒优化调度研究》&#xff0c;在考虑风光不确定集的基础上提出采用计及DR响应的多能互补微网两阶段鲁棒备用调度模…

通信触发流程

该示例方案主要介绍如何通过建立的Modbus或TCP通信来实现触发方案、协议解析、发送事件和以及响应配置等功能。 需求&#xff1a;使用Modbus通信触发指定流程运行。 搭建思路&#xff1a;在接收事件中使用协议组装&#xff0c;比较规则选择上升沿&#xff0c;当接收到的值从其…

【华为OD真题 Python】考古学家

文章目录 题目描述输入输出示例1输入输出说明示例2输入输出说明示例3输入输出说明备注实现代码题目描述 有一个考古学家发现一个石碑,但是很可惜࿰

知识图谱之汽车实战案例综述与前瞻分析

知识图谱的前置介绍 什么是知识图谱 知识图谱本质(Knowledge Graph&#xff09;上是一种叫做语义网络(semantic network &#xff09; 的知识库&#xff0c;即具有有向图结构的一个知识库&#xff1b;图的结点代表实体&#xff08;entity&#xff09;或者概念&#xff08;con…

大数据 Yarn - 资源调度框架

Hadoop主要是由三部分组成&#xff0c;除了前面我讲过的分布式文件系统HDFS、分布式计算框架MapReduce&#xff0c;还有一个是分布式集群资源调度框架Yarn。 但是Yarn并不是随Hadoop的推出一开始就有的&#xff0c;Yarn作为分布式集群的资源调度框架&#xff0c;它的出现伴随着…

Java Base64简单介绍

1. Base64工具 工具链接 2. Base64示例代码 public class Base64Demo {// 请注意&#xff0c;在处理二进制数据时&#xff08;例如图片或文件&#xff09;&#xff0c;不需要将字节数组转换为字符串再进行编码或解码&#xff0c;// 可以直接对字节数组进行Base64操作。上述…