this.$refs修改data数据失败_谈谈我对 Vue 数据响应式的理解

最新推荐文章于 2023-09-06 18:49:43 发布

weixin_40006265

最新推荐文章于 2023-09-06 18:49:43 发布

阅读量2k

点赞数

文章标签： this.$refs修改data数据失败

本文链接：https://blog.csdn.net/weixin_40006265/article/details/113629178

版权

本文探讨了Vue数据响应式的原理，通过代理和监听机制确保对数据的修改能够被系统跟踪。通过示例解释了如何使用Object.defineProperty创建响应式数据，并讨论了Vue如何通过getter和setter监控数据变化，以实现UI的实时更新。文章最后提供了响应式原理的示意图。

摘要由CSDN通过智能技术生成

首先了解一下代理和监听

一段demo：需求是n不能小于0

let data1 = proxy({
     data: {
     n: 0 } })//括号里是匿名对象，无法访问
function proxy({
     data }) {
    
  const obj = {}
  Object.defineProperty(obj, 'n', {
    
    get() {
    
      return data.n//读取
    },
    set(value) {
    
      if (value < 0) return
      data.n = value
    }
  })
  return obj //obj就是代理
}
//data1 就是 obj
console.log(`${
    data1.n}`)//0
data1.n = -1
console.log(`${
    data1.n`},设置为-1失败`)//0
data1.n = 1
console.log(`${
    data1.n`},设置为1成功`)//1