自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-10-10 00:13 uni-app  学习  vue  前端  node.js  

零基础入门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

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

在这里插入图片描述


原文地址：https://blog.csdn.net/wang_book/article/details/142788834

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024