响应式： 核心

示例

Name: 李四 李四

Age: 220 220

<template>
  <div>
    <H1>响应式：核心</H1>
    <p>Name: {{ person.name }} {{ name }}</p>
    <p>Age: {{ person.age }} {{ age }}</p>

    <button
      type="button"
      @click="name == '李四' ? (name = '张三') : (name = '李四')"
    >
      Change Name
    </button>
  </div>
</template>
<script setup>
import { reactive, ref, watch, computed, readonly, watchEffect } from "vue";
const name = ref("张三");
const age = ref(18);

// computed
const fullName = computed(() => {
  return `${name.value} - ${age.value}`;
});
const fullName2 = computed({
  get: () => `${name.value} - ${age.value}`,
  set: (newValue) => {
    const [newName, newAge] = newValue.split(" - ");
    name.value = newName;
    age.value = parseInt(newAge, 10);
  },
});
fullName2.value = "李四 - 220";
console.log("fullName2", fullName2.value);

const person = reactive({
  name: name,
  age: age,
});
console.log("person", person.name);

let copy = readonly({
  name: "王五",
  age: 30,
});
console.log("copy", copy);
copy.age = 2222; // 只读对象，不能修改
console.log("copy", copy);

const options = { timeout: 1000 };
function connect(projectId) {
  options.timeout = 2000; // 错误操作，会抛出TypeError
}
connect("123");

console.log("options", options);

watch(
  () => person.name,
  (newName, oldName) => {
    console.log(`Name changed from ${oldName} to ${newName}`);
  }
);

watch(name, (newName, oldName) => {
  console.log(`Name changed from ${oldName} to ${newName}`);
});

watchEffect(() => {
  console.log(`Name is ${name.value}, Age is ${age.value}`);
  console.log(`Name is ${person.name}, Age is ${person.age}`);
});
</script>