VUE3 语法糖

<script >
import router from "../../router";
import { reactive, ref, toRef, toRefs, watch } from "vue";
/**
 * reactive => 响应式对象(两种都能实现响应式reactive<复杂>、ref<简单>)
 * ref => 在vue中不用通过value来获取,在js中必须通过value来获取(获取dom元素)
 * toRef => 针对某一个(重新赋值的属性添加响应式)
 * toRefs => 直接处理多个属性的结构
 */
export default {
  setup() {
    const routes = router?.options?.routes || []; //路由详情
    console.log("router:", routes);

    var sign = ref(null); //可获取dom元素,也可以成文简单的响应式
    console.log("sign:", sign);

    const state = reactive({ name: "逸尘" });
    console.log("state:", state);

    let data = { name: "逸尘", gender: "男", age: 21 };

    var name = toRef(data, "name");
    console.log("name:", name.value);

    var dataObg = toRefs(data);
    console.log("dataObg:", dataObg.name.value);

    //点击发送变化
    const trigger = () => {
      state.name += 1;
      console.log("state1:", state);
    };

    // 监听参数,(变化前,变化后)
    watch(sign, (newValue, oldValue) => {
      console.log("变化后:", newValue);
      console.log(`值变了,变化后的值${newValue},变化前的值${oldValue}`);
    });
    return { sign, state, trigger, name, dataObg };
  },
};
</script>
<template>
  <div ref="sign">
    <div>{{ state.name }}</div>
    <div @click="trigger">点击数据变化</div>
  </div>
</template>