零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等
总时长 23:40:00 共116P
此文章包含第21p-第p25的内容
文章目录
- 双向绑定的实现原理
- 例子
- 计算属性
- 例子1
- 双向绑定格式
- 改成计算属性
- 例子2
- watch
- watchEffect
双向绑定的实现原理




也可以这么写

这就是v-model的底层原理

例子


删除方法


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

计算属性


例子1

双向绑定格式


改成计算属性
ps: 只有一行代码的情况
()=>{
return a+b;
}
可简写成
()=>a+b

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

计算属性是有缓存的,方法的话每次调用都需要计算

计算属性上方调用几次都是只调用一次这个计算方法


而方法的话 则需要调用3次方法


计算属性调用的时候 最好设置成只读


例子2








watch




两个参数 分别代表老值和新值


也可以不写老值,只看新值


这样无法监听 因为watch是浅层次监听

这样可以监听person.name

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





分开监听

watchEffect
全局监听,性能低一点




![[QT GUI Tips] Qt creator + PySide6 如何让图像控件的尺寸变化和窗口一致](https://i-blog.csdnimg.cn/direct/dc7c242dc5814743810adb686164e579.png)





![[实用工具]Docker安装nextcloud实现私有云服务](https://i-blog.csdnimg.cn/direct/1a5799482e0e4e59977c273f6b907073.png)










