学习课程:前端工程师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函数中将它们引入进来并导出。
这样就对各个功能进行了封装,这样提高了代码的可读性和维护性。
继续加油!