vue 响应式数据赋值

过程

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

img

问题

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

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

  3. 如果用 reactive 写可行吗?

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