vue3基础知识学习系列（一）api使用

关于vue3新添加的api 使用汇总(ref,reactive,toRefs,setup,watch, teleport等)

vue3新增api解释

• ref 单值数据响应式
• reacive 声明一个响应式变量 （函数接收一个普通对象，返回一个响应式数据对象）
• toRefs 将一个响应式对象转换成普通对象，在模版中使用
• setup 调用时机，创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用
• watch

watch(
  searchInput,
  (newVal, oldVal) => {
    console.log("watch searchInput:", newVal, oldVal);
  },
  {
   // watch本身是懒加载的 ，当searchInput改变的时候才会触发， 如果要一上来久触发则可以 加immediate 变量改变立即执行
    immediate: true, 
   // 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除  当单纯修改对象时只是修改的引用， 如果要监听对象里的属性变化则需要添加深度监听
    deep: true
  }
);

<template>
  <div>
    <div
      v-for="(item, index) in nameArr"
      :key="index"
      @click="selectFunc(index)"
      style="corsor: pointer;"
    >
      {{ item }}
    </div>
    <div>您点了{{ selectName }}</div>
    <input type="text" v-model="selectName" />
    <!-- 通过to属性 可挂载在任意DOM -->
    <teleport to="#modal">
      <div id="center">
        <div>独立组件</div>
      </div>
    </teleport>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onRenderTracked,
  onRenderTriggered,
  watch,
} from "vue";
interface DataProps {
  nameArr: string[];
  selectName: string;
  selectFunc: (index: number) => void;
}
// defineComponent是用来解决TypeScript情况下，传统的Vue.extends无法对组件给出正确的参数类型推断的
export default defineComponent({
  name: "App",
  components: {},
  //** 使用setup代替 Vue2 中的 data 和 methods 属性 */
  setup() {
    console.log("1-在组件created之前执行 ------setup");
    const data: DataProps = reactive({
      nameArr: ["小明", "李雷", "韩梅梅"],
      selectName: "",
      selectFunc: (index: number) => {
        data.selectName = data.nameArr[index];
        document.title = data.selectName;
      },
    });
    onBeforeMount(() => {
      console.log("2-组件挂载到页面之前执行-----onBeforeMount()");
    });

    onMounted(() => {
      console.log("3-组件挂载到页面之后执行-----onMounted()");
    });
    onBeforeUpdate(() => {
      console.log("4-组件更新之前-----onBeforeUpdate()");
    });
    onUpdated(() => {
      console.log("5-组件更新之后-----onUpdated()");
    });
    //**  靶向跟踪  同类型的还有onRenderTracked 跟踪多个变量 */
    onRenderTriggered((event) => {
      console.log("状态触发组件----------", event);
    });

    watch([data.selectName, () => data.selectName], (newValue, oldValue) => {
      console.log(`new--->${newValue}`);
      console.log(`old--->${oldValue}`);
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
});
</script>
<style lang="less">
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

附： vue3文档传送门