继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

Niklause
关注TA
已关注
手记 21
粉丝 3
获赞 0

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

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


继续加油!

http://img1.sycdn.imooc.com/63f4e3c80001674f25601440.jpg

http://img2.sycdn.imooc.com/63f4e3c900015b3225601440.jpg

http://img1.sycdn.imooc.com/63f4e3c9000178fb25601440.jpg

http://img1.sycdn.imooc.com/63f4e3ca0001864a25601440.jpg

http://img2.sycdn.imooc.com/63f4e3cb0001b2ff25601440.jpg

http://img1.sycdn.imooc.com/63f4e3cb000176e325601440.jpg

http://img3.sycdn.imooc.com/63f4e3cc0001cc0725601440.jpg

http://img1.sycdn.imooc.com/63f4e3cc00018b5325601440.jpg

http://img3.sycdn.imooc.com/63f4e3cc0001a4d325601440.jpg

http://img4.sycdn.imooc.com/63f4e3cd0001526725601440.jpg

http://img2.sycdn.imooc.com/63f4e3cd0001b56a25601440.jpg


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP