vue3和ts的一些使用

一. setup

变量不在写在data里面， 反而在setup内写。

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const girls = ref(["大脚", "刘英", "晓红"]);
    const selectGirl = ref("");
    const selectGirlFun = (index: number) => {
      selectGirl.value = girls.value[index];
    };
    //因为在模板中这些变量和方法都需要条用，所以需要return出去。
    return {
      girls,
      selectGirl,
      selectGirlFun,
    };
  },
});
</script>

ps:

1. 使用ref定义字符串，数组等变量值；
2. 变量赋值需要使用.value；

二. reactive

<script lang="ts">
import { ref, reactive } from "vue";
export default {
 name: "App",
 setup() {
   const data = reactive({
     girls: ["大脚", "刘英", "晓红"],
     selectGirl: "",
     selectGirlFun: (index: number) => {
       data.selectGirl = data.girls[index];
     },
   });

   return {
     data,
   };
 },
};
</script>

ps

1. reactive 接收对象。
2. 使用时需要使用data.girls方式使用；

三. 添加类型注释

  interface DataProps {
  girls: string[];
  selectGirl: string;
  selectGirlFun: (index: number) => void;
}

cosnt data: DataProps = reactive({
      girls: ["大脚", "刘英", "晓红"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });

四. toRefs()

import { reactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    // const girls = ref(["大脚", "刘英", "晓红"]);
    // const selectGirl = ref("");
    // const selectGirlFun = (index: number) => {
    //   selectGirl.value = girls.value[index];
    // };
    const data: DataProps = reactive({
      girls: ["大脚", "刘英", "晓红"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    const refData = toRefs(data);

    return {
      ...refData,
    };
  },
};

ps

1. 解决了在template中必须使用data.girls的方式使用变量， 现在可以直接使用变量名称了；

五. 钩子

import {
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
} from "vue";



<script lang="ts">

//....
const app = {
  name: "App",
  setup() {
    console.log("1-开始创建组件-----setup()");
    const data: DataProps = reactive({
      girls: ["大脚", "刘英", "晓红"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });
    onBeforeMount(() => {
      console.log("2-组件挂载到页面之前执行-----onBeforeMount()");
    });

    onMounted(() => {
      console.log("3-组件挂载到页面之后执行-----onMounted()");
    });
    onBeforeUpdate(() => {
      console.log("4-组件更新之前-----onBeforeUpdate()");
    });

    onUpdated(() => {
      console.log("5-组件更新之后-----onUpdated()");
    });

    const refData = toRefs(data);

    return {
      ...refData,
    };
  },
};
export default app;
</script>

ps

1. 生命周期需要引用
2. 什么周期需要卸载setup内
3. 都是以on开头。
4. 变化： BeforeDestroy变成了onBeforeUnmount destroyed变成了onUnmounted

生命周期对比

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

六. watch

watch([overText, data.selectGirl], (newValue, oldValue) => {
      console.log(`new--->${newValue}`);
      console.log(`old--->${oldValue}`);
      document.title = newValue[0];  //返回的newValue也是一个数组
  });

七.teleport

可以定义绑定到dom内；

<template>
  <teleport to="#modal">
    <div id="center">
      <h2>JSPang11</h2>
    </div>
  </teleport>
</template>

<div id="app"></div>
<div id="modal"></div>

8.使用vuex

      const store = useStore();
const data = {
            startTime: store.state.startTime,
            endTime: store.state.endTime,
            projectId: store.state.projectId
        }

          store.commit('data', data)

9.事件

setup(props, context) {

            context.emit('onShow', userId) 
  }