1. 变更的语法
1. $on 移除 vue3 默认不支持eventBus模式
2. filter 语法 vue3直接移除 {{msg}} methods替换
3. .sync 基于prop双向绑定 v-model
2. 对比选项式组合式API区别
1. 选项式功能的实现时分割的不在一起的 组合式功能的实现是分块的聚集到一起
2. 物理层面 当setup函数体积过大的时候 可以按照功能抽离成一个一个的小函数 然后再组合起来
3. 逻辑层面 setup组合式API 对逻辑复用更加优化
3. setup函数
组合式API的入口函数
1. 不能使用this
2. 在beforeCreate执行之前
3. 只会执行一次
4. 响应式方法
reactive
1.支持传入对象
ref
1.简单类型 + 复杂类型
2.在模板中有自动解套机制 省略.value
3.setup函数中必须必须加.value
注意: 不管是响应式数据还是回调函数 只要想在模板中使用必须return
return {
state
}
toRefs
1.使用场景 简化reactive产出的响应式对象在模板中需要通过点语法才能访问
2.直接结构会失去响应式
怎么选择: 绝大多数情况都用ref 只有一种情况可以使用reactive明确知道都有哪些字段
5. computed
1.机制 : 基于一个已知的属性经过一定的计算得到一个全新的属性 并且一旦依赖的数据发生变化 立刻进行重新求值
2.默认情况只有get (访问时候执行)
3.如果想要既获取又修改 get 和 set
computed({
get(){
},
set(val){
}
})
6. watch监听器
1.基础使用
2.立刻执行
3.深度监听
watch(
()=>{ return name.value },
()=>{ // 数据变化执行的回调 },
{
deep:true,
immediate:true
}
)
注意: 最好不要深度监听 最好精确到属性
7. 生命周期钩子函数
onMounted(()=>{})
onMounted(()=>{})
onMounted(()=>{})
8. 父子通信
父传子
prop 类型
子传父
emit
setup(props,ctx){
props.name
ctx.emit()
}
9. provide inject
使用场景: 跨组件通信 顶层组件提供数据 所有的底层组件都可以随便使用
步骤：
1. 顶层组件通过 provide('key',value) // value响应式 + 非响应式
2. 底层组件通过 inject('key')
10. ref获取dom或者是组件实例对象
1. setup函数中 通过调用ref 传入null const h1Ref = ref(null)
2. 在模板中 <h1 ref="h1Ref"></h1>
3. 使用 h1Ref.value
