小马Ti的博客

setup的注意点1.setup的执行时机：​ 在beforeCreate之前执行一次，this是undefined 2.setup的参数：​ props：值为对象，包含：组件外部传递过来、且组件内部声明接受了的属性 ​ context：上下文对象 ​ attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs ​ slots：收到的插槽内容，相当于this.$slots ​ emit：分发自定义事件的函数，相当于this.$emit

ref函数定义一个响应式的数据 语法const xxx=ref(initValue) ​ 创建一个包含响应式数据的引用对象（reference对象） 使用方法​ JS中操作数据：xxx.value ​ 模板中读取数据：不需要.value，直接 备注​ 接收的数据可以是基本类型，也可以是对象类型 ​ ①基本类型的数据：响应式依然是靠Object.defineProperty()中的get和set完成 ​ ②对象类型的数据：内部求助了Vue3中的一个新函数—reactive函数

readonly与shallowReadonlyreadonly：让一个响应式数据变为只读的（深只读） shallowReadonly：让一个响应式数据变为只读的（浅只读） 目的不希望数据被修改时使用

reactive函数作用定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数） 语法const 代理对象=reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称Proxy对象） PSreactive定义的响应式数据是深层次的 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

provide与inject作用实现祖孙组件间通信（祖provide，后代均可inject，只是一般用于祖孙间通信） 使用方法父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据 父组件 12345678910setup(){ let car=reactive({ name:'奔驰', price:'40w' }) provide('car',car) return {...toRefs(car)}} 孙子们: 1234setup(){ let car=inject('car') return {...toRefs(car)}}

provide与inject作用实现祖孙组件间通信（祖provide，后代均可inject，只是一般用于祖孙间通信） 使用方法父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据 父组件:12345678910setup(){ let car=reactive({ name:'奔驰', price:'40w' }) provide('car',car) return {...toRefs(car)}} 孙子们:1234setup(){ let car=inject('car') return {...toRefs(car)}}

Fragment组件在Vue2中根组件必须有一个根标签 在Vue3中根组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中 好处减少标签层级，减小内存占用

自定义Ref作用创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制 实现防抖效果页面防抖就是在事件触发的时候，并没有马上急着去做处理，而是在等待一段时间后再去执行。在该时间范围内只发起一次请求，以最后一次为准 示例1234567891011121314151617181920212223242526272829303132333435363738394041<template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3></template><script>import {ref,customRef} from 'vue'export default { name: 'App', setup(){ function...

computed计算属性

CompositionAPI的优势