vue3api

<style lang="less" scoped>
* {
  font-size: 14px;
}
</style>
<template>
  <div>
    vue3
    <div>
      <p>dataReactive:{{ dataReactive }}</p>

      <p>dataShallowReactive:{{ dataShallowReactive }}</p>
    </div>

    <button @click="updateReactive">点击更新Reactive</button>
    <button @click="updateShallowReactive">点击更新shallowReactive</button>
  </div>
</template>
<script setup>
import {
  defineComponent,
  getCurrentInstance,
  isReactive,
  onMounted,
  reactive,
  ref,
  shallowReactive,
  toRaw,
  toRefs,
  toValue,
} from "vue";
/**0.vue2实现响应式数据**/
//被初始化的obj
const initDataVue2 = {
  label: "测试vue2",
  key: "1",
};
//使用的obj
const vue2TestData = {};
Object.keys(initDataVue2).forEach((key) => {
  Object.defineProperty(vue2TestData, key, {
    get() {
      console.log("vue2_defineProperty_get", key);
      return initDataVue2[key];
    },
    set(v) {
      console.log("vue2_defineProperty_set", v);
      initDataVue2[key] = v;
    },
  });
});
vue2TestData.key = "2";
console.log("vue2TestData", vue2TestData);

/**1.proxy和reflect */
let initData = {
  label: "测试1",
  key: "1",
  objItem: {
    value: "2",
  },
};
let proxyTest = new Proxy(initData, {
  get(target, key, receiver) {
    console.log("proxy.get", target, key, receiver);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log("proxy.set", target, key, value, receiver);
    return Reflect.set(target, key, value, receiver);
  },
});
proxyTest.label = "2";
console.log(
  "Reflect_proxyTest",
  Reflect.get(proxyTest, "objItem"),
  proxyTest.target,
  toRaw(proxyTest)
);

/**2.
 * reactive:深层递归proxy
 * dataShallowReactive:浅表层proxy--objItem不是响应式数据,只更新objItem视图不会发生变化
 */
const count = ref(0);
const dataReactive = reactive({
  label: "测试1",
  key: "1",
  count, //自动解包ref--自动获取.value,维持ref的响应式(访问数组和Map这种原生集合类时不会解包,仍然需要.value)
  objItem: {
    value: "2",
  },
});
console.log("dataReactive", dataReactive);
console.log("count", dataReactive.count);
count.value = 1;
console.log("count", dataReactive.count);
dataReactive.count = 3;
console.log("count", count.value, dataReactive.count);
console.log("toRaw", toRaw(dataReactive));
// console.log('toValue',count,toValue(count))
// console.log('toRefs',toRefs(dataReactive))

const dataShallowReactive = shallowReactive({
  label: "测试1",
  key: "1",
  objItem: {
    value: "2",
  },
});
const updateShallowReactive = function () {
  //1.objItem不是响应式数据,只更新objItem视图不会发生变化
  console.log(isReactive(dataShallowReactive.objItem));
  dataShallowReactive.objItem.value = "修改";

  //2.以下会发生修改
  //   dataShallowReactive.key = "4";
  //   dataShallowReactive.objItem = "修改";

  //3.以下也会发生修改,但不能说明dataShallowReactive.objItem是响应式数据.
  //因为视图的变化是由dataShallowReactive.key的变化引发。dataShallowReactive.key引发监听系统重新收集数据从而改变dataShallowReactive.objItem.value
  //   dataShallowReactive.key = "4";
  //   dataShallowReactive.objItem.value = "修改";
};
const updateReactive = function () {
  dataReactive.objItem.value = "修改";
};

/**
 * 全局变量--推荐使用provide和inject
 * main中定义
 *
 * const app = createApp(App);
 * app.config.globalProperties.globalConfig = 'test';
 * app.use(router).mount('#app')
 *
 * */
const { proxy, ctx } = getCurrentInstance();
console.log("$globalConfig", proxy.globalConfig);

/**
 * 异步组件---
 *
 */


/**
 * 自定义hooks
 */
</script>