所谓响应式就是界面和数据同步,能实现实时更新。
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中。
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的功能:文章来源:https://www.toymoban.com/news/detail-437544.html
<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:
点击重置图标,herf变回/vite.svg
文章来源地址https://www.toymoban.com/news/detail-437544.html
4. watchEffect和watch区别
- watchEffect 不需要指定监听的属性,他会自动的收集依赖, 只要我们回调中引用到了 响应式的属性, 那么当这些属性变更的时候,这个回调都会执行,而 watch 只能监听指定的属性而做出变更(v3开始可以同时指定多个)。
- 就是 watch 可以获取到新值与旧值(更新前的值),而 watchEffect 是拿不到的。
- 是 watchEffect 如果存在的话,在组件初始化的时候就会执行一次用以收集依赖(与computed同理),而后收集到的依赖发生变化,这个回调才会再次执行,而 watch 不需要,因为他一开始就指定了依赖
到了这里,关于【Vue学习笔记5】Vue3中的响应式:ref和reactive、watchEffect和watch的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!