VUE3（api更新）

vue3总结 1.setup

setup是vue3api的大舞台，vue3所有新增的api都要在里面写具体如下

::注意点

1.setup函数的执行顺序在created和beforecreate前面

2.setup函数只能是同步不能是async修饰的异步，因为返回值不能时return的对象而是promise，模板看不到return对象的属性。（若用了Suspense和异步组件配合，可以异步）

3.setup由于执行在created和beforecreate前面所以无法使用 data 和 methods 的变量和方法，this为undefined

4.setup能接受到两个参数props和context

1.props，是一个对象，该对象包含的属性是组件外部传递过来的，且组件内部声明接收的属性。

context和他的三个值（要接收）

1.attrs：当父组件给子组件传参时，如果props没接收，就会在这里捡漏。

2.slots：接受插槽内容

3.emit：（自定义函数）

2.ref和reactive的用法和区别（要引入）

使用时要引入import { ref,reactive } from "vue";

let age = ref(20);

let data= reactive({name:'小明'}）

ref和reactive都是用于让数据变成响应式的，区别在于ref依旧对普通数据采用的是Object.defineProperty，对对象会在里面调用一个Proxy

reactive仅仅使用的是proxy也就是（refImpl），原型是用Reflect内射的

3.computed （要引入）

在2里叫计算属性这里叫计算函数

    let fullName = computed({
      get() {
        return data.firstName + "-----" + data.lastName;
      },
      set(value) {
        console.log(value, 56);
        var p = value.split("-----");
        console.log(p, 65);
        data.firstName = p[0];
        data.lastName = p[1];
      },
    });
    let fullName=computed(()=>{
      return data.firstName+'-----'+data.lastName
    })

4.watch监听（要引入）

    // 监听单个
    watch(
      sum,(newdata, olddata) => {
        console.log(newdata, olddata, "监听单个ref数据");
      },
      { immediate: true }
    );
    // 监听深层对象
    watch(() => data.a.b.c,
      (newdata, olddata) => {
        console.log(newdata, olddata, "监听对象reactive数据");
      }
    );
    //监听多个属性
    watch([() => data.a.b.c, () => data.num], (newdata, olddata) => {
      console.log(newdata, olddata, "监听多个对象reactive数据");
    });

5.watchEffect（要引入）

监听所有，没有具体的监听属性，在里面写谁就监听谁，默认监听一次

    watchEffect(() => {
      const x1 = data.num;
​
      console.log(x1, 5);
      console.log("watchEffect触发了");
    });

6.生命周期（要引入）

可在setup外面写，与2的不同在于

beforeDestroy -> beforeUnmount

destroyed -> unmounted

setup里写就是

beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted

7.hook（封装api）

hook文件夹/usrpoint
import {onMounted,reactive,onUnmounted}from 'vue'
export default function (){
  const point=reactive({
        x:0,
        y:0
      })
    function page(){
    point.x=event.pageX
     point.y=event.pageY
}
onMounted(()=>{
  window.addEventListener('click',page)
})
onUnmounted(()=>{
 window.removeEventListener('click',page)
})
 return point
}
//在用到的组件里
//import hook from './hooks/usrPoint'
//let point=hook()

8.toRef和toRefs（要引入）

toRef

toRefs

当你使用ref或者reactive时，生成的数据到页面不美观，这个时候借助toRef中的get函数反射到你指定的对象里进行修改。

toRef和toRefs的区别是一个只对单个数据进行反射，一个能深入对象里动态反射多个属性

9.shallowRef和shallowReactive（要引入）

1.shallowReactive 只对浅层对象的属性发生作用，如下，我这个对象person的name，age才有数据劫持。

2.shallowRef（只对基本数据类型有用）

和ref的区别是 ref可以监听引用数据类型

10.readonly和shallowReadonly（要引入）

readonly让一个响应的数据变成只读的（深只读）

shallowReadonly 让一个响应数据（对象）变成（浅只读）

如图shallowReadonly 只对person.job发生变化

11.toRaw和markRaw（要引入）

toRaw，将一个reactive生成的响应式改为普通的对象

markRaw：标记一个对象，使她永远不成为响应式对象

12.customRef（要引入）

自定义ref

13.provide和inject（要引入）

用于爷爷组件给后代传值

用法：

爷爷组件

儿子组件

孙子组件

爷爷组件使用provide，后代用inject接收

注意：该方法虽然可以用于父传子但不建议使用

14.isRef,isReactive,isProxy,isReadonly（判断属性类型创建的）

15.Fragment组件

vue2时需要用一个根标签包住剩下的标签，在但这让每个组件都有个根标签，vue3在这边做了处理，组件内部不需要根标签，而是自动生成一个Fragment组件标签

16.teleport

当你在子组件或者孙子组件中写遮罩这种全局样式，会导致父组件和爷爷组件默认被撑大，

使用teleport 的to属性会将这段遮罩代码默认加到你想放到的地方，我这里就是body

17.异步引入组件（Suspense）

异步引入后自动生成一个api（Suspense），它里面默认有两个插槽，一个是v-slot:default，要展示的，一个是当v-slot:default因某种原因照成显示慢时，就展示v-slot:fallback里的内容。

：：注意同时还有控制子组件延迟的方法，当父组件使用Suspense时子组件可以异步

18.Vue3（API转移）

 

 

 之前给子组件绑定@click时间要加native否则会被认为是自定义，现在子组件emits不接收就行了