vue3—reactive如何更改属性

vue3新增了响应性API，其中数据有两种，ref和reactive。reactive支持非原始对象，基础类型不能使用（Number,Boolean等）例1const obj = reactive({ count: 0 })obj.count++console.log(obj.count) // 1const obj = reactive([])obj.push(1)console.log(obj

hsany330

12426人浏览 · 2021-12-28 11:00:01

hsany330 · 2021-12-28 11:00:01 发布

vue3新增了响应性API，其中数据有两种，ref和reactive。
reactive支持非原始对象，基础类型不能使用（Number,Boolean等）

例1

const obj = reactive({ count: 0 })
obj.count++
console.log(obj.count) // 1

const obj = reactive([])
obj.push(1)
console.log(obj) // [1]

注意：使用let定义后不能直接重新赋值reactive对象，会导致响应式的代理被覆盖。

例2

export default {
  name: 'App',
  setup() {
    let obj = reactive({a:1})
    // 不能这么写，这样重新赋值后会，obj会变成普通对象,失去响应式的效果;
    setTimeout(() => {
      obj = {a:2,b:3}
    }, 1000)
    return {
      obj
    }
  }
}

遇到这样的情况，需要单独赋值
例3

const obj = reactive({a:1})
setTimeout(() => {
  obj.a = 2;
  obj.b = 3;
}, 1000)

或者使用Object.assign
例4

export default {
  name: 'App',
  setup() {
    const obj = reactive({a:1})
    setTimeout(() => {
      Object.assign(obj,{a:2, b:3})
    }, 1000)
    return {
      obj
    }
  }
}

作者：一个给予者
链接：https://www.jianshu.com/p/94935f134741
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。