vue3-响应式核心

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-响应式核心

响应式核心

目录

响应式核心

3.1ref()

3.2computed ()

3.3 reactive()

3.4 readonly()

3.5 watchEffect()

3.6 watch()

3.1ref()

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

将一个 ref 赋值给为一个 reactive 属性时，该 ref 会被自动解包

const count = ref(0)
console.log(count.value) // 0
​
count.value++
console.log(count.value) // 1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ref</title>
</head>
<body><div id="app">{{ count }}<button @click="add">加1</button><br/>
​state.count: {{ state.count }}<button @click="increment">加10</button></div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const { ref, reactive } = VueVue.createApp({setup () {const count = ref(10)const add = () => {count.value += 1}
​// 如果将ref赋值给 一个 reactive 属性时，该ref会被自动解包 (不需要写.value) - 了解const obj = reactive({}) // 剧透  reactive 用于 创建响应式的对象数据obj.count = count // 自动解包  不解包 obj.count = count.value console.log(obj.count) // 10console.log(obj.count === count.value) // true
​// 如果将一个对象赋值给ref，那么这个对象将通过 reactive() 转为具有深层次响应的对象 - 了解const state = ref({ count: 100 })const increment = () => {state.value.count += 10}
​// 记住： 以后定义对象使用 reactive() 其他使用 ref()return {count, add,state,increment}}}).mount('#app')
</script>
</html>

以后创建 非 对象类型的数据 使用 ref， 创建对象类型的数据建议使用 reactive

3.2computed ()

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

创建一个只读的计算属性 ref：

const count = ref(1)
const plusOne = computed(() => count.value + 1)
​
console.log(plusOne.value) // 2
​
plusOne.value++ // 错误

创建一个可写的计算属性 ref：

const count = ref(1)
const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1}
})
​
plusOne.value = 1
console.log(count.value) // 0
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>computed</title>
</head>
<body><div id="app">{{ count }} -- {{ doubleCount }} - {{ plusOne }}<button @click="updateCount">修改plusOne计算属性的值</button></div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const { ref, computed } = Vueconst setup = () => {const count = ref(10)const doubleCount = computed(() => count.value * 2) // 可读
​const plusOne = computed({ // 可读 可写set (val) { count.value = val},get () { return count.value}})
​const updateCount = () => {plusOne.value = 100 // 调用可写}
​return {count,doubleCount,plusOne,updateCount}}
​Vue.createApp({ setup }).mount('#app')
</script>
</html>

3.3 reactive()

返回一个对象的响应式代理。

响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。

值得注意的是，当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包。

返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹，因此不等于源对象，建议只使用响应式代理，避免使用原始对象。

创建一个响应式对象：

const obj = reactive({ count: 0 })
obj.count++

ref 的解包：

const count = ref(1)
const obj = reactive({ count：count })
​
// ref 会被解包
console.log(obj.count === count.value) // true
​
// 会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
​
// 也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

注意当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包：

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)
​
const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

将一个 ref 赋值给为一个 reactive 属性时，该 ref 会被自动解包：（讲解ref时已经说明）

const count = ref(1)
const obj = reactive({})
​
obj.count = count
​
console.log(obj.count) // 1
console.log(obj.count === count.value) // true
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>reactive</title>
</head>
<body><div id="app"><button @click="add">加1</button> {{ count }} <hr /><button @click="increment">加10</button> {{ state.num }}</div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const { ref, reactive } = VueVue.createApp({setup () {const count = ref(0)const add = () => {count.value += 1}
​const state = reactive({ num: 10 })const increment = () => {state.num += 10}
​return {count, add,state, increment}
​}}).mount('#app')
</script>
</html>

初始值 对象 reactive 其余用ref

3.4 readonly()

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。

const original = reactive({ count: 0 })
​
const copy = readonly(original)
​
watchEffect(() => {// 用来做响应性追踪console.log(copy.count)
})
​
// 更改源属性会触发其依赖的侦听器
original.count++
​
// 更改该只读副本将会失败，并会得到一个警告
copy.count++ // warning
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>readonly</title>
</head>
<body><div id="app"><button @click="add">加1</button> {{ count }} <hr /><button @click="increment">加10</button> {{ copyCount }}</div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const { ref, readonly } = VueVue.createApp({setup () {const count = ref(0)const add = () => {count.value += 1}
​const copyCount = readonly(count)const increment = () => {copyCount.value += 10}
​return {count, add,copyCount, increment}
​}}).mount('#app')
</script>
</html>

3.5 watchEffect()

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求。

返回值是一个用来停止该副作用的函数。

const count = ref(0)
​
watchEffect(() => console.log(count.value))
// -> 输出 0
​
count.value++
// -> 输出 1

副作用清除：

watchEffect((onInvalidate) => {console.log(id.value) const timer = setTimeout(() => {console.log('请求成功') // 2秒之内点击列表 只显示一次data.value = '数据' + id.value}, 2000)onInvalidate(() => {clearTimeout(timer)})
})

停止侦听器：

 const stop = watchEffect(() => {console.log(count.value)})// 当不再需要此侦听器时:const stopWatch = () => {stop()}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>watchEffect</title>
</head>
<body><div id="app">{{ count }}<button @click="increment">加1</button><button @click="stopWatch">停止监听</button>
​<!-- 假设点击第一条数据，2秒之内点击第二条，消除第一条的数据请求 --><ul><li @click="id=1">请求第一条数据</li><li @click="id=2">请求第二条数据</li><li @click="id=3">请求第三条数据</li></ul>{{ data }}</div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const { ref, watchEffect } = VueVue.createApp({setup () {const count = ref(0)const increment = () => {count.value++}
​const stop = watchEffect(() => {console.log('count的值为' + count.value) })
​const stopWatch = () => {stop()}
​const id = ref(1)const data = ref('')
​watchEffect((clear) => { // 自定义取消副作用的函数console.log(id.value) //  关键- 引起当前watchEffect的二次执行const timer = setTimeout(() => {console.log('请求成功') // 2秒之内点击列表 只显示一次data.value = '数据' + id.value}, 2000)
​// 消除副作用clear(() => {clearTimeout(timer)})})
​return {count, increment, stopWatch, id, data}}}).mount('#app')
</script>
</html>

watchEffect没有具体监听哪一个值的变化，只要内部有某一个状态发生改变就会执行

3.6 watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

  • watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

    第一个参数是侦听器的源。这个来源可以是以下几种：

    • 一个函数，返回一个值

    • 一个 ref

    • 一个响应式对象

    • ...或是由以上类型的值组成的数组

    第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。

    当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

    第三个可选的参数是一个对象，支持以下这些选项：

    • immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。

    • deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。

    与 watchEffect() 相比，watch() 使我们可以：

    • 懒执行副作用；

    • 更加明确是应该由哪个状态触发侦听器重新执行；

    • 可以访问所侦听状态的前一个值和当前值。

  • 示例

    侦听一个 getter 函数：

    const state = reactive({ count: 0 })
watch(() => state.count,(count, prevCount) => {/* ... */}
)

    侦听一个 ref：

    const count = ref(0)
watch(count, (count, prevCount) => {/* ... */
})

    当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值：

    watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {/* ... */
})

    当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。如果你想让回调在深层级变更时也能触发，你需要使用 { deep: true } 强制侦听器进入深层级模式。在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。

    const state = reactive({ count: 0 })
watch(() => state,(newValue, oldValue) => {// newValue === oldValue},{ deep: true }
)

    当直接侦听一个响应式对象时，侦听器会自动启用深层模式：

    const state = reactive({ count: 0 })
watch(state, () => {/* 深层级变更状态所触发的回调 */
})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>watch</title>
</head>
<body><div id="app">{{ count }} <button @click="count++">count加1</button><hr/>{{ state.num }} <button @click="state.num++">state.num加1</button></div>
</body>
<script src="../lib/vue.global.js"></script>
<script>const {ref, reactive, watch} = VueVue.createApp({setup () {const count = ref(0)watch(count, (newVal, oldVal) => { // 直接使用 自动解包console.log('count', newVal, oldVal)})watch(() => count.value, (newVal, oldVal) => { // 函数形式需要解包console.log('count-fn', newVal, oldVal)})
​const state = reactive({ num: 10 })watch(() => state.num, (newVal, oldVal) => { console.log('state-num-fn', newVal, oldVal)})watch(() => state, (newVal, oldVal) => {  // 手动深度侦听console.log('state-num-fn2', newVal, oldVal)}, { deep: true })
​watch(state, (newVal, oldVal) => { // 直接监听响应式对象，会自动启动深度侦听console.log('state-num', newVal, oldVal)})
​// 监听多个响应式对象watch([count, state], ([newCount, newNum], [oldCount, oldNum]) => {console.log('newCount', newCount)console.log('oldCount', oldCount)console.log('newNum', newNum)console.log('oldNum', oldNum)})return {count,state}}}).mount('#app')
</script>
</html>











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


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











相关文章










【代码随想录】算法训练计划27








【代码随想录】算法训练计划27




回溯 
1、39. 组合总和 
题目&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的…




阅读更多...

















【Java】多线程-wait/notify








【Java】多线程-wait/notify




1、wait和notify 
Java的多线程中&#xff0c;线程的执行顺序和时间都是不定的。为了控制线程的调度顺序&#xff0c;前面我们引入了join()方法。 
但是join()只能在线程执行完后&#xff0c;才能执行其他线程&#xff0c;有没有什么方法可以在线程执行顺序中来调度其他线程呢&…




阅读更多...

















CTF-PWN-小tips








CTF-PWN-小tips




文章目录 overflowscanfgetreadstrcpystrcat Find string in gdbgdbgdb peda Binary ServiceFind specific function offset in libc手工自动 Find /bin/sh or sh in library手动自动 Leak stack addressFork problem in gdbSecret of a mysterious section - .tlsPredictable …




阅读更多...

















【腾讯云 HAI域探秘】高性能服务器引领AI革新浪潮：从AI绘画、知识问答到PyTorch图像分类、视频检测的全方位探索








【腾讯云 HAI域探秘】高性能服务器引领AI革新浪潮：从AI绘画、知识问答到PyTorch图像分类、视频检测的全方位探索




目录 1 HAI&#xff08;高性能应用服务&#xff09;简介2 HAI的应用场景2.1 HAI在AI作画中的灵活性与效率2.2 深入探索LLM语言模型的应用与性能2.3 HAI支持的AI模型开发环境与工具 3 基于stable difussio的AI 绘画应用实践3.1 使用AI模型中的stable diffusion模型服务3.2 设置和…




阅读更多...

















10个好用的Mac数据恢复软件推荐—恢复率高达99%








10个好用的Mac数据恢复软件推荐—恢复率高达99%




如果您正在寻找最好的 Mac 数据恢复软件来检索意外删除或丢失的文件&#xff0c;那么这里就是您的最佳选择。 
我们理解&#xff0c;当您找不到 Mac 计算机或外部驱动器上保存的一些重要文件时&#xff0c;会感到多么沮丧和绝望。这些文件非常珍贵&#xff0c;无论出于何种原因…




阅读更多...

















【寒武纪（14）】硬件系统由标量指令、向量指令、张量指令、访存指令构成








【寒武纪（14）】硬件系统由标量指令、向量指令、张量指令、访存指令构成




我们在文档《Cambricon-BANG-C-Developer-Guide-EN-v4.5.1》的build-in function 发现&#xff0c;存在三种计算&#xff1a;矩阵乘法、标量类型、向量。 查阅《Cambricon-BANG-C-CProgramming-Guide-CN-v1.5.0.pdf》可知&#xff0c;硬件系统由标量指令、向量指令、张量指令、…




阅读更多...

















vscode设置前进、后退快捷键








vscode设置前进、后退快捷键




前言 
在我们使用vscode编写程序时&#xff0c;经常需要在不同的文件之间跳来跳去&#xff0c;如果只是依靠个人记忆去操作会显得非常不方便。本文介绍如何设置vscode的前进、后退快捷键。 
1 vscode设置前进、后退快捷键 
点击“设置”图标&#xff0c;然后点击“键盘快捷方式…




阅读更多...

















各类软件docker安装








各类软件docker安装




docker Docker 要求 CentOS 系统的内核版本高于 3.10 &#xff0c;通过 uname -r 命令查看你当前的内核版本&#xff1a; uname -r
3.10.0-1062.1.2.el7.x86_64 
安装 Docker&#xff1a; 
安装 Docker&#xff1a;yum -y install dockerkafka和zookeeper docker pull wurstmei…




阅读更多...

















python刷题笔记1（42例题）








python刷题笔记1（42例题）




1. split()函数 str.split([sep [, maxsplit]]) 分割字符串&#xff0c;返回一个数组 2. 判断子串 
# 判断子串是否在主串里面&#xff0c;是则输出“Yes”&#xff0c;否则输出“No”
str1  input("子串&#xff1a;")
str2  input("主串:")
if str1 in s…




阅读更多...

















OpenCvSharp MatType与C#数据类型对应关系








OpenCvSharp MatType与C#数据类型对应关系








阅读更多...

















通信原理板块——差错控制编码或纠错编码








通信原理板块——差错控制编码或纠错编码




微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等  1、背景 数字信号在传输过程中&…




阅读更多...

















命令执行无回显的判断方法及dnslog相关例题的讲解








命令执行无回显的判断方法及dnslog相关例题的讲解




命令无回显的情况




阅读更多...

















什么是策划能力？如何提高策划能力？








什么是策划能力？如何提高策划能力？




什么是策划能力&#xff1f; 
通常我们理解的策划能力&#xff0c;大多指的是策划活动&#xff0c;比如举办一次活动先要进行活动策划&#xff0c;形成具体的行动方案&#xff0c;然后开展组织人力物力等资源&#xff0c;最终落地实施。策划能力包含活动策划&#xff0c;但又不…




阅读更多...

















vscode设置代码模板








vscode设置代码模板




一键生成vue3模板代码 
效果演示 
输入vue3 显示快捷键 按回车键 一键生成自定义模板  
实现方法 
进入用户代码片段设置 选择片段语言 vue.json输入自定义的代码片段 prefix是触发的内容&#xff0c;按自己的喜好来就行&#xff1b; body是模板代码&#xff0c;写入自己需要的…




阅读更多...

















UE TransformVector 学习笔记








UE TransformVector 学习笔记




假如算现在枪的位置&#xff0c;那么就是先拿人的位置再拿枪在本地的相对位置相加&#xff0c;就是枪的位置&#xff0c;也就是枪在场景中的位置&#xff0c;那么这里还可以写成Actor的变化和枪的相对位置连在TransformVector上&#xff0c;返回的就是枪的场景位置 这里做反算&…




阅读更多...

















会议剪影 | 思腾合力受邀出席第四届长三角文博会并作主题演讲








会议剪影 | 思腾合力受邀出席第四届长三角文博会并作主题演讲




以“担当新使命:长三角文化产业的力量”为主题的「第四届长三角国际文化产业博览会」于2023年11月16日-19日在国家会展中心&#xff08;上海&#xff09;成功举办。思腾合力作为行业领先的人工智能基础架构解决方案商出席本次盛会。 此次展会的面积首次超过10万平米&#xff0c…




阅读更多...

















BUUCTF 菜刀666 1








BUUCTF 菜刀666 1




BUUCTF:https://buuoj.cn/challenges  
题目描述&#xff1a; 流量分析&#xff0c;你能找到flag吗 注意&#xff1a;得到的 flag 请包上 flag{} 提交 
密文&#xff1a; 下载附件&#xff0c;解压得到一个.pcapng文件。  解题思路&#xff1a; 1、双击文件&#xff0c;打开wir…




阅读更多...

















算法-简单-二叉树-翻转、对称








算法-简单-二叉树-翻转、对称




记录一下算法题的学习8 
翻转二叉树 翻转二叉树题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 举例&#xff1a;给定root[5,3,7,2,4,6,10]  翻转成为root[5,7,3,10,6,4,2] 即所有的根节点的左右节点都要互换位置&#xff0c;输出的…




阅读更多...

















Python如何将项目直接打包为一键整合包








Python如何将项目直接打包为一键整合包




目录 
一、准备项目 
二、创建打包文件 
三、创建安装脚本 
四、执行安装 
五、测试安装 
六、常见问题与解决方案 
总结 Python项目打包成一键整合包是一个比较复杂的任务&#xff0c;需要考虑到项目的各个方面&#xff0c;包括依赖项、配置文件、静态文件、数据库等等。下面是…




阅读更多...

















NX二次开发UF_CAM_ask_tool_matl_db_object 函数介绍








NX二次开发UF_CAM_ask_tool_matl_db_object 函数介绍




文章作者&#xff1a;里海 来源网站&#xff1a;里海NX二次开发3000例专栏 
UF_CAM_ask_tool_matl_db_object 
Defined in: uf_cam.h int UF_CAM_ask_tool_matl_db_object(UF_CAM_db_object_t * db_obj ) 
overview 概述 
This function provides the database object which is…




阅读更多...


















推荐文章












最新文章


















Copyright @ 2022~2023