Vue3已成为默认版本，与Vue3的这些交集都在这了

目录

• Vue3的相关常用知识点
• • 一. 与Composition组合式API的邂逅
  • • 1.1 与setup的初次交集
    • 1.2 ref函数
    • 1.3 reactive函数
    • 1.4 setup的注意点
    • 1.5 计算属性
    • 1.6 watch监视
    • 1.7 watchEffect函数
    • 1.8 Vue3的生命周期函数
    • 1.9 自定义hooks函数，体会组合式API的优势
    • 1.10 toRef与toRefs的使用
  • 二、其他不常用CompositionAPI
  • • 2.1 shallowReactive 与 shallowRef
    • 2.2 readonly与shallowReadonly
    • 2.3 toRaw与markRaw
    • 2.4 customRef
    • 2.4 provide与inject
    • 2.5 响应式数据的判断
  • 三、新的组件
  • • 3.1Fragment
    • 3.2 Teleport
    • 3.3 Suspense
  • 四、其他
  • • 4.1 全局API的转移
    • 4.2 其他改变
  • 五、在Vue3中集成TS
  • • 5.1 初次集成TS
    • 5.2 在Composition API中 集成TS
    • 5.3 在Composition中使用Vuex

听说Vue3已成为默认版本，赶紧学起来！

Vue3的相关常用知识点

一. 与Composition组合式API的邂逅

1.1 与setup的初次交集

1. setup是Vue3的新的配置项,值为一个函数

2. 组件所用到的所有的属性和方法都需要配置在setup当中,然后将其return在一个对象内部,供模板使用

3. 在Vue2的配置项中可以访问到setup的数据,但是在setup当中不可以访问Vue2的数据;出现重名会优先显示setup定义的数据

4. setup前面不可以添加一个async,因为返回值不再是一个return的对象,而且是promise,模板看不到return对象中的属性;

   也可以返回一个Promise实例,但需要Suspence和异步组件配合

   我是Vue3测试组件

   { {username}}---{ {password}}

1.2 ref函数

通常情况下,我们用ref是用来将基本数据类型变成响应式数据类型,这个时候就需要借助到ref函数

对于基本类型的数据,响应式依然是靠Object.defineProperty()的get和set去完成的;

对于引用类型的数据,内部使用了一个reactive函数

1. 在模板中正常使用setup返回的数据源即可

2. 如果想要修改数据,只能是通过属性名.value去修改

   用户名: { { username }}

   密码: { { password }}

1.3 reactive函数

通常情况下,我们会使用reactive来创建一个响应式对象,用来存放对应的数据源;

<template>
  <p>{
  { person.username }}</p>
  <p>{
  { person.password }}</p>
  <br />
  <p>{
  { person.job.name }}</p>
  <button @click="changeInfo()">修改信息</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const person = reactive({
      username: "zhangsan",
      password: "999",
      job: {
        name: "Web前端",
        salary: "30k",
      },
    });

    const changeInfo = () => {
      (person.username = "aaaaaaaa"), (person.job.name = "Java开发");
    };
    return {
      person,
      changeInfo,
    };
  },
};
</script>

<style></style>

1.4 setup的注意点

• setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined。

• setup的参数

  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit。

1.5 计算属性

<template>
  姓: <input type="text" v-model="person.firstName">
  名: <input type="text" v-model="person.lastName">
  <p>
    全名: <input v-model="person.fullName" />
  </p>
</template>

<script>
import {reactive, computed} from 'vue';

export default {
  setup() {
    const person  = reactive({
      firstName: '张',
      lastName: 'Ais',
    })
    /* 计算属性 简写 */
    /* person.fullName = computed(()=>{
      return person.firstName + '-' + person.lastName
    }) */

    /* 计算属性 完整写法 */
    person.fullName = computed({
      get(){
        return person.firstName + '-' + person.lastName
      },
      set(value){
        const nameArr = value.split("-");
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })
    return {
      person
    }
  }
}
</script>

<style>

</style>