手记

【备战春招】第十五天+vue复习

学习课程:前端工程师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函数中将它们引入进来并导出。

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


继续加油!


0人推荐
随时随地看视频
慕课网APP