学习课程：前端工程师2022版-vue基础入门

lesson35：ref，reactive 响应式引用的用法和原理、toRef 以及 context 参数

2-2 ref，reactive 响应式引用的用法和原理（1）-慕课网体系课 (imooc.com)

2-3 ref，reactive 响应式引用的用法和原理 （2）-慕课网体系课 (imooc.com)

2-4 toRef 以及 context 参数（1）-慕课网体系课 (imooc.com)

2-5 toRef 以及 context 参数（2）-慕课网体系课 (imooc.com)

lesson36：使用 Composition API 开发TodoList

2-7 使用 Composition API 开发TodoList（1）-慕课网体系课 (imooc.com)

2-8 使用 Composition API 开发TodoList（2）-慕课网体系课 (imooc.com)

讲师：Dell老师

今天继续昨天的课程安排，学习了ref，reactive 响应式引用的用法和原理、toRef 以及 context 参数和使用 Composition API 开发TodoList。

响应式引用的用法有两个，一个是ref，另一个是reactive 。ref用于处理基础类型的数据，reactive用于处理费基础类型的数据。

它们两个的原理都是通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新。

举两个例子，但我们声明一个名为name的变量，并使用ref('dell')为它赋值时，'dell'变成proxy({value:'dell'})这样的一个响应式引用；同理声明一个名为nameObj的变量，并用reactive({name:'dell'})为它赋值时，{name:'dell'}变成proxy({name:'dell'})这样的一个响应式数据。

toRefs原理：{name:'hello'}通过reactive包装后会变为proxy({name:'hello'}),再次通过toRefs包装后变为proxy({name:proxy({value:'hello'})})

toRefs 将引用类型中的属性都转为响应式，解构的值不存在传入的引用类型中，则返回undefined，且不能响应式修改toRef 单独将引用类型的某个属性转为响应式，若该属性不存在则返回一个undefined响应式(简单这么理解)，可以修改.

当业务逻辑增多复杂起来后可以将一些代码从setup函数中抽离出来，写进各自对应的函数中，并在函数中返回需要的变量和函数。在setup函数中将它们引入进来并导出。

这样就对各个功能进行了封装，这样提高了代码的可读性和维护性。

继续加油！