vue3基础

一、setup

1. setup函数可以被理解为函数的入口
2. setup函数接收两个参数：props、context(包含attrs、slots、emit)
3. setup函数是处于生命周期函数 beforeCreate之前执行，执行setup函数时组件实例并未被创建，this不指向vue实例
4. 与模板一起使用：须在ref或reactive中声明然后return出去使用才是响应式的
5. 使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

二、setup第一个参数props

props 是响应式的，当传入新的 prop 时，它将被更新。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

因为 props 是响应式的，不能使用 ES6 解构，会消除 prop 的响应性。
如果需要解构 prop，可以在 setup 函数中使用 [toRefs]函数来完成此操作：

setup(props) {
  const { title } = toRefs(props)
  return{ title  }
}

三、setup第二个参数context

context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值

setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }

context不是响应的，可以用ES6进行解构

  setup(props, { attrs, slots, emit, expose }) {
    ...
  }

四、ref

引入

import { ref } from "vue";
setup(){
    const arr = ref(["小美", "小红", "小蓝", "小绿"]);
    const str = ref("1小美");
    const onBtn = function(index: number) {
          str.value = index + 1 + arr.value[index];
      };
    return { arr, onBtn, str };
}

注意：ref引入的值需要使用.value才能拿到
使用

<template>
  <button v-for="(item, index) in arr" :key="index" @click="onBtn(index)">
    {{ index + 1 }}:{{ item }}
  </button>
  <div>您点击了：{{ str }}</div>
  <button @click="complete">完成</button>
</template>

五、reactive

reactive和ref的作用差不多，都是引入响应式数据，但是reactive看起来结构更加清晰

import { reactive} from "vue";

const obj: type = reactive({
      arr: ["小美", "小红", "小蓝", "小绿"],
      str: "",
      onBtn: (index): void => {
        obj.str = index + 1 + obj.arr[index];
      }
    });
const obj1 = toRefs(obj);
return { ...obj1 };
    // 未使用toRefs时，不能用ES6结构 老老实实写obj.arr...

其实在工作上为了严谨不能让TS自己猜类型，需要定义类型

  interface type {
      arr: Array<string>;
      str: string;
      //   onBtn: (index: number):void => {};错误写法
      onBtn: (index: number) => void
    }

六、watch

1、监听ref的值

const xxx = ref("")

watch(xxx, (newV, oldV) => {
    console.log(newV, oldV, 88);
});

2、监听reactive的值

const obj= reactive({
 str: "",
})
watch(() => obj.str, (newV, oldV) => {});

原因：vue无法监听对象内部的值，需要将值return出去监听
3、监听多个值

watch([xxx,() => obj.str], (newV, oldV) => {
  console.log(newV[0],newV[1])
  console.log(oldV[0],oldV[1])
});

七、 vue3的生命周期钩子

setup里的生命周期钩子，同级别中比vue2的先执行

onBeforeMount(() => {});

image.png

八、调试API

// 主要用于调试 打出全部的值
 onRenderTracked(event => {
    console.log(event);
 });

// 主要用于调试 打出变化的新旧值
onRenderTriggered(event => {
    console.log(event);
});

九、模块化

一个简单的模块化的时间

<template>
  <button @click="tiemf">开始</button>
  <div>{{ time }}</div>
</template>
<script lang="ts">
import { time, tiemf } from "./useTs";
export default {
  setup() {
    return { time, tiemf };
  }
};
</script>

import { ref } from "vue";

const time = ref("00:00:00")
const tiemf = () =>{
  setInterval(() => {
      const hour = new Date().getHours();
      const minute = new Date().getMinutes();
      const sec = new Date().getSeconds();
      time.value = hour + "：" + minute + "：" +sec;
    }, 1000);
}
 
export  {time,tiemf}