uniapp学习（003-3 vue3学习 Part.3）

最新推荐文章于 2024-11-23 16:32:17 发布

原创最新推荐文章于 2024-11-23 16:32:17 发布 · 729 阅读

·

3

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#uni-app #学习 #vue #前端 #node.js #小程序 #微信小程序

uniapp 专栏收录该内容

21 篇文章

订阅专栏

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第21p-第p25的内容

文章目录

双向绑定的实现原理

在这里插入图片描述

在这里插入图片描述

也可以这么写

这就是v-model的底层原理

例子

在这里插入图片描述

在这里插入图片描述

删除方法
在这里插入图片描述

追加方法，追加到list里，并且清空输入框

计算属性

在这里插入图片描述

在这里插入图片描述

例子1

在这里插入图片描述

双向绑定格式

在这里插入图片描述

改成计算属性

ps: 只有一行代码的情况

()=>{
return a+b;
}

可简写成

 ()=>a+b

在这里插入图片描述

也可以写成方法这样的话调用的时候必须加括号（因为是个函数了）

在这里插入图片描述

计算属性是有缓存的，方法的话每次调用都需要计算
在这里插入图片描述

计算属性上方调用几次都是只调用一次这个计算方法
在这里插入图片描述

而方法的话则需要调用3次方法
在这里插入图片描述

计算属性调用的时候最好设置成只读
在这里插入图片描述

在这里插入图片描述

例子2

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

watch

在这里插入图片描述

在这里插入图片描述

两个参数分别代表老值和新值
在这里插入图片描述

也可以不写老值，只看新值
在这里插入图片描述

在这里插入图片描述
这样无法监听因为watch是浅层次监听

这样可以监听person.name

如果想深度监听需要开启(开启对性能有影响)
reactive是默认开启深度监听的 ref默认不开启深度监听

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

分开监听
在这里插入图片描述

watchEffect

全局监听，性能低一点
在这里插入图片描述

在这里插入图片描述

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。