【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch

这篇具有很好参考价值的文章主要介绍了【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

所谓响应式就是界面和数据同步,能实现实时更新。

Vue 中用过三种响应式解决方案,分别是 defineProperty、Proxy 和 value setter。Vue 2 使用的方案是 defineProperty API。Vue3中使用的方案是Proxy和value setter。

1. ref和reactive

vue3中实现响应式数据的方法是使用ref和reactive。

reactive更推荐去定义复杂的数据类型,ref 更推荐定义基本类型。

通过reactive定义响应式数据。

<template>
    <div>
        <h1 @click="add">{{ obj.count }} * 2 = {{ double }}</h1>
    </div>
</template>

<script setup>
import { computed, reactive, watchEffect } from 'vue';

let obj = reactive({   // reactive包括复杂数据类型,使其成为响应式数据。
    count: 1
})

function add() {   // 改变obj.count属性。与ref的不同。
    obj.count++
}

let double = computed(()=>obj.count*2)  // double会自动跟随obj.count变化

watchEffect(() => {
    console.log("数据被修改了",obj.count,double.value)  // 控制台可以看到double数据变化了(通过double.value)。
})

</script>

通过ref定义响应式数据。修改数据要通过.value。

<template>
    <div>
        <h1 @click="add">{{ count }} * 2 = {{ double }}</h1>
    </div>
</template>

<script setup>
import { computed, ref, watchEffect } from 'vue';

let count = ref(1)   // ref包裹简单数据类型,使其成为响应式数据,修改数据要通过.value

function add() {   // 改变count,通过count.value修改值(方式与reactive包裹的数据不同)
    count.value++;
}

let double = computed(()=>count.value*2)  // double会自动跟随count变化

watchEffect(() => {
    console.log("数据被修改了",count.value,double.value)  // 控制台可以看到double数据变化了
})

</script>

通过这两个例子,对比了ref和reactive的区别。

watchEffect 这个函数让我们在数据变化之后可以执行指定的函数。

2. watchEffect举个例子

使用 watchEffect,在数据变化之后,把数据同步到 localStorage 之上,实现 todolist 和本地存储的同步。修改 https://liuchunming.blog.csdn.net/article/details/130508826 第五小节的代码,在function useTodos()中添加如下两行的代码。

...
let todos = ref(JSON.parse(localStorage.getItem('todos')||'[]'));
watchEffect(()=>{    
    localStorage.setItem('todos',JSON.stringify(todos.value))
})
...

效果:
添加待办项后,todos这个响应式变量发生变化,watchEffect中的回调函数就会自动执行,将todos添加到localstorge中。
当清理待办项后,todos这个响应式变量也会发生变化,watchEffect中的回调函数就会自动执行,将todos添加到localstorge中。
【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch

3. watch举个例子

需求:在 loading 状态下,去修改浏览器的小图标 favicon。

通过watch监听favicon变化,修改href标签属性。

watch(WatcherSource, Callback, [WatchOptions]) 参数:
WatcherSource:想要监听的响应式数据。
Callback:执行的回调函数,入参(newValue, oldValue)。
[WatchOptions]:deep、immediate、flush可选。

对于WatchOptions的参数配置:

deep:当需要对对象等引用类型数据进行深度监听时,设置deep: true,默认值是false。
immediate:默认情况下watch是惰性的,设置immediate: true时,watch会在初始化时立即执行回调函数一次。
flush:控制回调函数的执行时机,。它可设置为 pre、post 或 sync。
pre:默认值,当监听的值发生变更时,优先执行回调函数(在dom更新之前执行)。
post:dom更新渲染完毕后,执行回调函数。
sync:一旦监听的值发生了变化,同步执行回调函数(建议少用)。

参考资料:https://blog.csdn.net/weixin_42349568/article/details/126760186

实现需求:

utils中新建一个favicon.js文件。我们把对图标的对应修改的操作封装成了 useFavicon 函数,并且通过 ref 和 watch 的包裹,我们还把小图标变成了响应式数据。

import { ref, watch } from "vue";

// 【知识点1】:变量和常量定义:
// let是ES6中新增的声明变量的关键字。 let声明的变量只在所处的块级作用域有效,也就是所声明的大括号内。let定义的变量不存在变量提升。
// var 声明变量,不具备这个块级作用域的特性。在大括号外也可以访问。使用var声明变量的时候,其作用域在所在的函数内,而且存在变量提升。
// const关键字。ES6中除了新增的声明常量的关键字,这里的常量就是值值不能变化的量。必须赋值否则就会报错。具有块级作用域,只在所处的块级作用域有效,也就是所声明的大括号内。

// 【知识点2】:JS中的=>代表箭头函数
// 当只有一个参数时,圆括号是可选的:(singleParam) => { statements } 可以写成singleParam => {statements }
// 没有参数的函数应该写成一对圆括号:() => { statements }
// statements简单的,也可以去掉大括号:el => el.href = `${icon}`

export default function useFavicon(newIcon) {  //export default只能有一个
    const favicon = ref(newIcon);
    const updateIcon = (icon) => { //更新icon
        document.head
            .querySelectorAll(`link[rel*="icon"]`)  //反引号``括起来的字符串叫模板字符串,里面可以放空格、换行符等,还可以放JS表达式${}
            .forEach(el => el.href = `${icon}`)
    }
    const reset = () => favicon.value = '/vite.svg' //重置icon, 通过修改faivcon.value
    watch(favicon, // 监听favicon变化
        (i) => {   // favicon变化后,执行的回调函数
            updateIcon(i);
        }
    )
    return { favicon, reset };
}

在关于页面,调用更换favicon的功能:

<template>
    <h1>这是关于页面</h1>
    <button @click="loadding">更换图标</button>
    <button @click="reset">重置图标</button>
</template>

<script setup>
import useFavicon from '../utils/favicon';
let {favicon, reset} = useFavicon();
function loadding(){
    favicon.value = "/geek-favicon-32x32.webp"
}
</script>

点击更换图标,herf变成/geek-favicon-32x32.webp:
【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch
点击重置图标,herf变回/vite.svg
【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch文章来源地址https://www.toymoban.com/news/detail-437544.html

4. watchEffect和watch区别

  1. watchEffect 不需要指定监听的属性,他会自动的收集依赖, 只要我们回调中引用到了 响应式的属性, 那么当这些属性变更的时候,这个回调都会执行,而 watch 只能监听指定的属性而做出变更(v3开始可以同时指定多个)。
  2. 就是 watch 可以获取到新值与旧值(更新前的值),而 watchEffect 是拿不到的。
  3. 是 watchEffect 如果存在的话,在组件初始化的时候就会执行一次用以收集依赖(与computed同理),而后收集到的依赖发生变化,这个回调才会再次执行,而 watch 不需要,因为他一开始就指定了依赖

到了这里,关于【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【Vue3】使用ref与reactive创建响应式对象

    💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互

    2024年02月21日
    浏览(49)
  • vue3 ref reactive响应式数据 赋值的问题

    doing 遇见就记录,最后更新时间23.8.30 错误示范:直接赋值 以数组为例,对象也是一样的操作。 ref 定义的属性等价于 reactive({value:xxx}) ,所以 reactive、ref 直接重新赋值丢失响应是因为引用地址变了 正确写法 方法1: ref.value ,代码中更为清晰地表明响应式数据 方法2:包一层

    2024年02月10日
    浏览(46)
  • 关于 Vue3 响应式 API 以及 reactive 和 ref 的用法

    这篇文章记录一下 Vue3 响应式的内容,其中还包括了 reactive 和 ref 的用法。响应式是一种允许以声明式的方式去适应变化的编程范例,接下来我们一起看看。 Vue 框架的特点之一就是响应式。 Vue 2.x 是基于 Object.defineProperty() 方法实现响应式。但是 Object.defineProperty() 方法有一定

    2024年02月12日
    浏览(40)
  • 谈谈Vue3中的ref和reactive

    一、是什么? ref和reactive是Vue3中用来实现 数据响应式的API 一般情况下, ref 定义基本数据类型, reactive 定义引用数据类型 (我喜欢用它来定义对象,不用它定义数组,原因后面讲) 我理解的 ref本质上是reactive的再封装 二、先聊reactive reactive定义引用数据类型(以对象和数

    2023年04月21日
    浏览(38)
  • vue3中的ref 和 reactive 定义数组

    在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型 但是也可以使用 ref 来定义数组 两种情况:定义时就将数组初始化、定义时未初始化数组 初始化数组 未初始化数组 但是这样定义的会出现

    2024年02月15日
    浏览(44)
  • vue3中的reactive、ref、toRef和toRefs

    reactive用于创建响应式对象,它返回一个对象的响应式代理。即:它返回的对象以及其中嵌套的对象都会通过 Proxy 包裹;当响应式对象被访问时,触发getter方法;当响应式对象被修改时,触发setter方法。在使用响应式对象时,我们可以像普通对象一样访问和修改数据。 使用

    2024年02月08日
    浏览(46)
  • Vue3中的`ref`和`reactive使用中遇到的一些坑

    以下是一些常见的问题和解决方法: 同时使用 ref 和 reactive :在Vue3中, ref 和 reactive 是两种不同的数据响应方式。 ref 用于包装基本类型数据,而 reactive 用于包装对象。如果在同一个变量上同时使用 ref 和 reactive ,可能会导致数据的不一致性和混乱。因此,应该根据变量的

    2024年01月24日
    浏览(43)
  • vue3之reactive和ref学习篇

    change函数实现了一个简单的0-10的一个自增自减的循环,之所以记录是自己写的时候费了点时间,一直在想这个判断条件怎么优化,其实条件无法继续优化了,除非一个一个数字判断或者循环,加一个标志increasing就能解决的事想了半天

    2024年02月11日
    浏览(35)
  • vue3 #ref #reactive

    一、ref 函数将简单类型的数据包装为响应式数据 import { ref } from \\\'vue\\\'  const count = ref(10) 一、reactive函数将复杂类型的数据包装为响应式数据 import { reactive} from \\\'vue\\\'  const obj= reactive({     name : \\\'zs\\\',     age : 18 })

    2024年02月22日
    浏览(48)
  • Vue 3 响应式对象:ref 和 reactive 的使用和区别

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是尘缘,一个在CSDN分享笔记的博主。📚📚 👉点击这里,就可以查看我的主页啦!👇👇 尘缘的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的加入,一起学习,一起进步!💖💖 Vue.js 是一个流行的 JavaScript 框架

    2024年02月07日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包