1、composion API 的认识
vue3兼容vue2的写法
composion API 需要熟练掌握
2、Mixin 相同的代码逻辑进行抽取
- Mixin 提供了非常灵活的方式，来分发vue组件中的可复用功能
- 一个Mixin 对象可以包含任何组件选项
- 当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中
Mixin 混入demo：
demoMix.js
export const demoMix = {
data(){
return {
title:"hello mixin"
}
},
created(){
console.log("mixin 执行了")
},
methods:{
foo(){
console.log("foo click")
}
}
}
3、【合并规则】如果mixin 和当前组件的选项发生了冲突，如何处理？
4、全局Mixin
- 全局的Mixin 可以使用 app 的方法 mixin 来完成注册
- 一旦注册，全局混入的选项将会影响每一个组件
5、extends 【仅做了解，用的很少】
类似于 Mixin
extends demo：
extends 和 mixin 在vue3中用的会越来越少的
6、composition API
vue2 是 Options API
vue3 是 Composition API
setup() 是真正去编写 Composition API 的地方
6.1、Options API 的弊端：【可读性差】
当我们实现一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中
当我们的组件变得更大，更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散
尤其对于那些一开始就没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）
7、Options API的基本使用
写在setup函数中
8、setup函数：【setup函数中不能使用this】
setup 函数实在created前面调用的
setup 函数里面不能使用this
函数的参数:
setup函数有两个参数：
- 第一个参数： props 【父组件传递过来的属性】
- 第二个参数： context
函数的返回值 context 包含三个属性
attrs: 所有的非 prop 的attribute
slots: 父组件传递过来的插槽（这个在以render函数返回时会有作用，后面会讲到）
emit : 组件内部需要发出事件时会用到emit （因为我们不能访问this，所以不可以通过this.$emit发出事件）
9、setup 的返回值
可以在模板template中被使用
也就是说可以通过setup的返回值来代替data选项
setup 返回值的使用：
10、setup源码的阅读
runtime-core
11、响应式api reactive的使用
reactive 的返回值在被使用时会被劫持，会用proxy
12、ref api
reactive 对传入的类型有限制，要求必须传入一个对象或者数组类型
如果传入一个基本数据类型会报警告
ref会返回一个可变的响应式对象，该对象作为一个响应式的引用，维护着它内部的值，这就是ref名称的来源
它内部的值是在ref的value属性中被维护的
13、模板中的解包是浅层解包，reactive可响应式对象，可以解包
14、readonly 只读的api
readonly 会返回原生对象的只读代理（也就是它依然还是一个Proxy,这是一个proxy的set方法被劫持，并不能对齐进行修改）
<template>
<div>
<h2>homeChild</h2>
<button @click = "updateState">updateState</button>
</div>
</template>
<script>
import { reactive, ref, readonly } from 'vue'
export default {
setup(){
const info1 = {name:"why"};
const readonlyInfo1 = readonly(info1);
const info2 = reactive({
name:"zhangsan"
})
const readonlyInfo2 = readonly(info2);
const info3 = ref("why");
const readonly3 = readonly(info3)
let updateState = ()=>{
// readonly2.name = "yxx"
readonly3.value = "yxx"
}
return {
updateState
}
}
}
</script>
<style scoped>
</style>