vue3和ts的使用

一. setup

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

<scriptlang="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

<scriptlang="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:

3. reactive 接收对象。

4. 使用时需要使用data.girls方式使用；

三. 添加类型注释

interfaceDataProps{
  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];// };constdata: DataProps =reactive({
      girls:["大脚","刘英","晓红"],
      selectGirl:"",
      selectGirlFun:(index: number)=>{data.selectGirl =data.girls[index];},});const refData =toRefs(data);return{...refData,};},};

• ps:

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

五. 钩子

import{
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,}from"vue";<scriptlang="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

6. 生命周期需要引用

7. 什么周期需要卸载setup内

8. 都是以on开头。

9. 变化： BeforeDestroy变成了onBeforeUnmountdestroyed变成了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也是一个数组});

1. teleport

可以定义绑定到dom内；

<template><teleportto="#modal"><divid="center"><h2>JSPang11</h2></div></teleport></template>

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

2. 使用vuex

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

          store.commit('data',data)

3. 事件

  setup(props, context) {

            context.emit('onShow', userId) 
  }