vue 响应式数据赋值

Question

过程

const list = ref([]);
const name = ref("");

list.value = [
  { title: "姓名1", value: name.value },
  { title: "姓名2", value: name },
];

list.value[0].value = "hello";

console.log(name.value, "--name.value1");

list.value[1].value = "hello";

console.log(name.value, "--name.value2");

//  --name.value1
// hello --name.value2

问题

1. 当 list 值变化时，为什么
   name.value 这种写法的 name 会随之变化，
   name 这种写法的 name 不会随之变化？

2. 这种写法是可行的吗，会有什么隐藏bug吗？

3. 如果用 reactive 写可行吗？

Answer 1

{ title: "姓名1", value: name.value }, // 这里的name.value是一个值，而非响应式的数据，相当于是给value赋予了此时的name,是空值
{ title: "姓名2", value: name }, // 这里的name是一个响应式数据，当值发生改变时，也会影响name的值发生改变