vue3.2基本认识

一，不需要return

在vue3.0中 你在script中写的变量，你要是在template中拿到，你想要return出去才可以，而vue3.2升级之后他并不需要，

<template>
  {{ num }} 
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue"
let num = ref<number>(1);
</script>

这样你就会发现你的页面 可以直接拿到num的值，很方便，其实他的内部也就是转化成原本vue3.0的return写法 有兴趣的可以查查资料

二，组件

组件其实很简单，首先你肯定是引入组件import 进行引入，当然vue3.2帮我优化了components，可以不用注册，直接就可以拿到组件，

<template>
  <Book :name="123" />
</template>
<script setup lang="ts">
 import Book from "./book.vue"
</script>

那么重点来了，那要是在子组件里如何拿到父组件的值，这就涉及到了vue3.2给我们提供的新的API :defineProps,如何来使用，实例如下：

 首先他是一个函数，由于用到了TS所以可以给他显示一个泛型来限制他的类型，这里我们用props变量接收一下，来打印看看他是什么

 它其中也是运用了对象set和get方法用来劫持数据，其实道理都是一样的

三，组件传值

那么我们用到了组件，肯定会遇到父子传值的问题，其实vue3.2也给我们提供了Api defineEmits方法，下面我们看看如何使用：

 

 这里我们答应会发现他的内部是一个回调函数，你用的时候只需要用一个变量来接收，然后你传入你需要的参数，第一个参数就是你父组件传过来的自定义事件，而第二个参数就是你需要改变的值，然后在你的父组件来接收就可以，这样看来还是很方便的

四。effectScope Api

这是新提供的Api，这个api很方便，可以控制你在什么时候停止执行，实例

<template>
  {{ num }}
  <button @click="add">点击</button>
</template>
<script setup lang="ts">
import { effectScope } from "vue";
import { onMounted, ref, watch } from "vue";
let scoped = effectScope();
let num = ref<number>(1);

scoped.run(() => {
  watch(
    () => num.value,
    () => {
      console.log(1);
    }
  );
});

let add = () => {
  num.value++;
  if (num.value === 10) {
    scoped.stop();
  }
};
</script>

这样你就会发现，当你的num+到十的时候他就不会走监听函数，这样给我们开发者带来了多拓展性

当然vue3.2新加了很多Api，这里我就先说基本使用，有兴趣的码友可以去搜文档，一起学习