vue3 学习笔记

一、选项式API 和 组合式API 区别

在一个 vue 文件内，会有 data、methods、watch 等等用来定义属性和方法，共同来处理页面逻辑，这种方式称为 Options API。
业务处理的比较分散，data 和 methods会包含很多属性和方法，很难分清哪个属性对应哪个方法。所以 vue3 新增 setup 写组合式API。
组合式api 就是一个功能所定义的 api 会放在一起。

二、setup

setup 特性
1、 用来写组合式 api，相当于取代了 beforeCreate ，会在 creted 之前执行。
2、setup 内部的属性和方法，必须 return 暴露出来，将属性挂载到实例上，否则没有办法使用。
3、setup 内部是不存在 this ，打印下 this 返回结果 是undefined 。
4、setup 内部数据不是响应式的。可以配合reactive、ref 实现响应式
5、setup不能调用生命周期相关函数，但生命周期函数可以调用setup内的函数
例如
setup () { const color = inject('info') return { color, } }
使用 on开头的生命周期函数来注册钩子函数，只能在 setup 期间同步使用，因为它们依赖全局内部状态来定位当前组件实例，不在当前组件下调用函数时会抛出错误。
import { onMounted } from "vue";export default{ setup(){ const a = 0 return{ a }, onMounted(()=>{ console.log("执行"); }) }}
setup 与钩子函数并列时，setup 不能调用生命周期相关函数，但生命周期可以调用 setup 相关的属性和方法。this.$options.setup() 返回对象包含了 setup 内的所有属性和方法。
<template> <button @click="log">点我</button></template><script>export default{ setup(){ const a = 0 return{ a } }, methods:{ log(){ console.log( this.$options.setup() );//返回一个对象 } }}</script>

setup 参数
props 表示父组件给子组件传值，props 是响应式的，当传入新的 props 时，自动更新
props: { msg: String, ans: String, }, setup(props,context){ console.log(props)} }
因为 props 是响应式的，不能使用 ES6 解构，会消除prop的响应特性，此时需要借用 toRefs 解构
import { toRefs } from "vue"; const { msg，ans } = toRefs(props)

context 上下文环境，其中包含了 属性、插槽、自定义事件三部分
setup(props,context){ const { attrs,slots,emit } = context // attrs 获取组件传递过来的属性值， // slots 组件内的插槽 // emit 自定义事件 子组件}

attrs 是一个非响应式对象，经常用来传递样式属性。
slots 是一个 proxy 对象，其中 slots.default() 获取到的是一个数组，数组长度由组件的插槽决定，数组内是插槽内容。
setup 内不存在this, emit 用来替换之前 this.$emit，用于子传父时，自定义事件触发。