vue3数据响应式生效的时机

大铭铭子

于 2022-01-05 14:02:22 发布

阅读量694

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/SCUDaming/article/details/122317185

本文探讨了Vue3中数据响应式生效的条件，指出只有响应式的数据变化时才会触发视图更新。创建的响应式引用在整个应用中保持其响应性。同时，通过例子展示了组件间如何实现响应式通信，以及非响应式数据无法更新视图的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、
视图更新和数据更新

let a = ref(0) //a.value = 0
let b = 0 // b = 0, a.value = 0 
b++ // b = 1, a.value = 0
a.value++ // b = 1, a.value = 1

在上述过程中，a.value和b的值都会变化，但只有a是响应式的，a.value++时视图会更新，并且仅仅更新自己相关的引用。
ref()创建了一个响应式引用，在任何地方起作用，在整个应用中都不会失去它的响应性。
2、
组件间的响应式

// 父组件数据定义
let a = ref(0)

// 子组件
<template>
{{a}} {{b}}
</template>

<script setup>
const props = defineProps({a:Number})
const b = 0
watch(()=>props.a,()=>{b=props.a+1})
</script>

当传入的props.a变化时，视图中的引用的a也会更新，这是“a的响应式在任何地方都起作用”。
在监听函数中，b会随着a的变化而变化，但视图中的b并不会更新，因为b是非响应式的。