为什么Vue3中声明响应式一般用const |
您所在的位置：网站首页 › 海洋馆简笔 › 为什么Vue3中声明响应式一般用const |
|
为什么Vue3中声明响应式对象一般用const。如 import { reactive } from 'vue' const state = reactive({ count: 0 })因为 Vue 的响应式系统是通过属性访问进行追踪的(响应式数据对象的属性的副作用函数的订阅)，因此我们必须始终保持对该响应式对象的相同引用。 副作用订阅将被存储在一个全局的 WeakMap 数据结构中。 防止响应式被替换丢失链接 let state = reactive({ count: 0 }) // 上面的引用 ({ count: 0 }) 将不再被追踪（响应性连接已丢失！） state = reactive({ count: 1 })而如果使用const进行声明的话，state不允许被重新赋值。可以用声明变量上方式响应式链接丢失。防止原响应式对象在WeakMap中失去。 当我们将响应式对象的属性****赋值给变量或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性，即赋值或结构到的变量或参数函数不会引起响应式数据的变化，原响应式数据的变化也不会引起本地变量的变化。 const state = reactive({ count: 0 }) // n 是一个局部变量，同 state.count // 失去响应性连接 let n = state.count // 不影响原始的 state n++ // count 也和 state.count 失去了响应性连接 let { count } = state // 不会影响原始的 state count++ // 该函数接收一个普通数字，并且 // 将无法跟踪 state.count 的变化 callSomeFunction(state.count) 使用ref维持响应式Vue3使用ref来给所有变量声明响应式。通过ref.value来访问数据对象，ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象： const count = ref(0) console.log(count) // { value: 0 } console.log(count.value) // 0 count.value++ console.log(count.value) // 1 const objectRef = ref({ count: 0 }) // 这是响应式的替换 objectRef.value = { count: 1 }ref对象的value也是响应式的。当ref传入的参数数据是复合数据类型时，会使用reactive自动转化value属性。 简言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到 组合函数 中。 ref 被传递给函数或是从一般对象上被解构时，ref不会丢失响应性： 即可以传递响应式数据进行操作。如函数式编程。 const obj = { foo: ref(1), bar: ref(2) } // 该函数接收一个 ref // 需要通过 .value 取值 // 但它会保持响应性 callSomeFunction(obj.foo) // 仍然是响应式的 const { foo, bar } = obj |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |