Vue3.0——常用的Composition API（监听属性、生命周期、Teleport、属性、自定义事件、状态驱动的动态 CSS、注册组件、uspense、 isRef等）
目录
一、常用的Composition API（组合API）
7.监听属性
8.Vue3生命周期
1) 什么是生命周期
2) Vue2.x中的生命周期
3) Vue3.x的生命周期
4） vue3 新增的生命周期钩子
9.Teleport
10.属性
1. 组件内部 还是可以用2.0
2.vue3组件内部组合式API setup中取属性值
3.setup语法糖中获取属性值
11.自定义事件
1）事件名
2)定义自定义事件
3)`v-model` 参数
4)多个 `v-model` 绑定
12.状态驱动的动态 CSS
13.注册组件
1） 组件内部
2）vue3组件内部组合式API setup语法糖中注册组件
3）注册全局组件
4）定义同步组件:
5.1）定义局部异步组件:
5.2）定义全局异步组件:
13.Suspense
14. isRef toRef toRefs readonly
1)isRef:
2) toRef
3) toRefs
4)readonly
15. 组合式API compostionAPI 的属性和上下文对象
一、常用的Composition API（组合API）
1.setup 2.ref函数 3.reactive函数 4.Vue3.0中的响应式原理 （面试题）
5.Vue3.0中组件的使用 6.计算属性 7.监听属性 8.Vue3.0生命周期
9.Teleport 10.自定义事件 11.状态驱动的动态css 12.Suspense
7.监听属性
- 与vue2.x中的watch配置功能一致
- 注意
- 监视reactive定义的响应式数据时，oldvalue无法正确获取，强制开始了深度监视（deep的配置失效）
- 监视reactive定义的响应式数据的某一个值时：deep配置有效
注意：
1、如果将原来的引用数据，改为和原来一摸一样的引用数据，去watch，也算是改变了，所以watch也会触发
2、使用的是reactive，如果数据是一个嵌套的多层的引用数据，改变里面层的数据，是可以监听到的。但是得不到旧值。
{{num}}
{{msg}}
8.Vue3生命周期
created可以访问this了
created做网络请求的时候，页面还没出来
mounted做网络请求的时候，页面出来了
1) 什么是生命周期
Vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期
2) Vue2.x中的生命周期
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
activated deactivated
errorCaptured
3) Vue3.x的生命周期
在Vue3.x中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行,因为在这个函数中不能通过this来获取实例的；
同时为了命名的统一，
将beforeDestory改名为beforeUnmount，
destoryed改名为unmounted
beforeCreate（建议使用setup代替）created（建议使用setup代替）
选项式API
setup
beforeMount mounted
beforeUpdate updated
beforeUnmount unmounted
4） vue3 新增的生命周期钩子
我们可以通过在**生命周期函数**前加**on**来访问组件的生命周期
**Composition API 形式的生命周期钩子**
组合式API
onBeforeMount onMounted （unmounted==>app组件挂载了以后执行）
onBeforeUpdate onUpdated
onBeforeUnmount onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggeredeffect
9.Teleport
Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。
然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置
就是让它不要渲染到vue里面
模态弹框
to属性：放到指定位置
我是模态框
10.属性
1. 组件内部 还是可以用2.0
//子组件MyBox1
2)定义自定义事件
可以通过 `emits` 选项在组件上定义发出的事件
//父组件
3)`v-model` 参数
//父组件
4)多个 `v-model` 绑定
//2.0这样写会有矛盾
js:
changemsg2(arg){this.msg2=arg}
changemsg3(arg){this.msg3=arg}
//3.0
APP.vue
{{msg1}}--{{msg2}}--{{msg3}}
Box.vue
{{ obj.value }}-{{ obj.value2 }}--{{ obj.value3 }}
12.状态驱动的动态 CSS
单文件组件的
学习——面试题/笔试题：css语法中的变量
13.注册组件
7种方式，最常用的是第二种
1） 组件内部
2）vue3组件内部组合式API setup语法糖中注册组件
3）注册全局组件
//main.js文件:
import { createApp} from 'vue'
import 3.注册全局组件App from './App.vue'
const app=createApp(App)
import Box1 from "./Box5.vue"
app.component(Box1.name,Box1)
app.mount('#app')//注意 一定要在app.mount之前注册全局组件 否则使用不了
//App.vue文件:
4）定义同步组件:
//Box1.vue文件:
5.1）定义局部异步组件:
组件内部
setup语法糖:
5.2）定义全局异步组件:
//main.js文件:
import { createApp,defineAsyncComponent} from 'vue'
import App from './App.vue'
const app=createApp(App)
let Box1=defineAsyncComponent(()=>import("./Box4.vue"))
app.component("Box1",Box1)
app.mount('#app')//注意 一定要在app.mount之前注册全局组件 否则使用不了13.Suspense
- 等待异步组件时渲染一些额外的内容,让应用有更好的用户体验
`
` 组件有两个插槽。它们都只接收一个直接子节点。`default` 插槽里的节点会尽可能展示出来。如果不能，则展示 `fallback` 插槽里的节点。
父组件HomeView
正在加载中Loading...
14. isRef toRef toRefs readonly
1)isRef:
isRef(msg)==> 判断msg是否为响应式的，返回值是布尔值
{{ msg }}
{{ msg2 }}
2) toRef
let x=toRef(obj,"x") //隐式： let x=ref(obj.x),并且响应到obj对象去
{{obj.x}}----{{x}}
3) toRefs
普通对象结构，响应式数据解构
let {x,y}=toRefs(obj)
{{ a }}---{{ obj2.a }}--{{ b }}---{{ obj2.b }}
4)readonly
响应式只读技术,只能读，不能改
obj3是响应式的，obj4是响应式的，而且关联 obj3是可读可写，obj4只可读
{{obj3.x}}---{{obj4.x}}
15. 组合式API compostionAPI 的属性和上下文对象
//Vue2.0组件内部接收外部数据时：
//第三种：在compositionAPI 语法糖