本来今天想直接向源代码进军的，或者总结一下如何通过单元测试代码提高看源码的效率。但是想想还是把API做个小结吧。稳扎稳打。
const { createApp, reactive, // 创建响应式数据对象 ref, // 创建一个响应式的数据对象 toRefs, // 将响应式数据对象转换为单一响应式对象 isRef, // 判断某值是否是引用类型 computed, // 创建计算属性 watch, // 创建watch监听 // 生命周期钩子 onMounted, onUpdated, onUnmounted, } = Vue
setup使用composition API的入口
setup函数会在 beforeCreate之后 created之前执行
setup(props,context){ console.log('setup....',) console.log('props',props) // 组件参数 console.log('context',context) // 上下文对象 }
好的其实大家可以和自己原来的React偶不Vue2代码对号入座。
reactive
reactive() 函数接受一个普通对象 返回一个响应式数据对象
const state = reactive({ count: 0, plusOne: computed(() => state.count + 1) })
ref 与 isRef
- ref 将给定的值(确切的说是基本数据类型 ini 或 string)创建一个响应式的数据对象
- isRef 其实就是判断一下是不是ref生成的响应式数据对象
首先这里面有一个重要的概念叫包装对象(value wrapper)，谈到wrapper从java那边转过来的小朋友肯定记得java里面的wrapclass其实概念差不多啦。我们知道基本数据类型只有值没有引用，这样也就造成了一个问题返回一个基础数据类型比如一个字符串是无法跟踪他的状态的，所以我们就需要讲基础数据类型包装一下，这有点像ReactHooks中的useRef，但是Vue包装的对象本身就是响应式数据源。好了我们看一下实例理解一下
// 定义创建响应式数据 const time = ref(new Date()) // 设置定时器为了测试数据响应 setInterval(() => time.value = new Date(), 1000) // 判断某值是否是响应式类型 console.log('time is ref:', isRef(time)) console.log('time', time) console.log('time.value', time.value) // 我们看看模板里面我们这样展示 template: ` <div> <div>Date is {{ time }}</div> </div> `
toRefs
- toRefs 可以将reactive创建出的对象展开为基础类型
// 如果不用toRefs const state = reactive({ count: 0, plusOne: computed(() => state.count + 1) }) return { state } // 模板渲染要这样写 template: ` <div> <div>count is {{ state.count }} </div> <div>plusOne is {{ state.plusOne }}</div> </div> ` // 我们再看看用了toRefs const state = reactive({ count: 0, plusOne: computed(() => state.count + 1) }) return { ...toRefs(state) } // 模板渲染要这样写 template: ` <div> <div>count is {{ count }} </div> <div>plusOne is {{ plusOne }}</div> </div> `
watch 定义监听器
这个其实没有什么新东西
watch(() => state.count * 2, val => { console.log(`count * 2 is ${val}`) })
effect 副作用函数
响应式对象修改会触发这个函数
// 副作用函数 effect(() => { console.log('数值被修改了..',state.count) })
computed 计算属性
const state = reactive({ count: 0, plusOne: computed(() => state.count + 1) })
生命周期钩子Hooks
| Vue3 | Vue3 |
| beforeCreate | setup(替代) |
| created | setup(替代) |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
