vue reactive 中的数据为什么不能等于另外一个？

Question

const data = reactive({
    name: {id: 1, title: 'AAAAA'},
    new1: data.name,
    new2: JSON.parse(JSON.stringify(data.name))
})

data.name 和 JSON.parse(JSON.stringify(data.name))
都不可以，为什么？
只能在 reactive 里面想办法，能不能实现？

Answer 1

reactive是vue3提供的一个函数，data是这个函数执行结束return的数据，你要执行完这个函数才会有return，这时候的data才会有值，类似于

const funcA = (b) => {
    return { data: b }
}
const c = funcA(c.b) // 你返回的时候 c 还是 undefined，浏览器该报错了

Answer 2

const data = reactive({
    name: {id: 1, title: 'AAAAA'},
    new1: data.name,
    new2: JSON.parse(JSON.stringify(data.name))
})

你这个违背基本的JS语法了, 他从右到左执行, 此时还没有data, 你却使用data肯定报错, 是这么用的的

const data = reactive({ //定义对象
  name:'测试',
  age:10
})
const num = reactive(1)//定义基本数据

Answer 3

可以啊，很简单的道理
既然不能在一个变量还没声明完的时候就用它
那就在它声明之后用

const data = reactive({
    name: {id: 1, title: 'AAAAA'}
})
data.new1 = data.name
data.new2 = JSON.parse(JSON.stringify(data.name))

Answer 4

const a = reactive({b:'1'})

是先有了reactive({b:'1'})之后，再赋值给a，也就是说，执行reactive时，还没有a。
那自然，你在reactive({})中就不能用任何a的属性