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

ops/2024/10/21 10:15:04/

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

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

在这里插入图片描述


http://www.ppmy.cn/ops/124644.html

相关文章

工业和自动化领域常见的通信协议

工业和自动化领域常见的通信协议

在工业和自动化领域，有多种常见的通信协议，主要用于设备间的通信、数据传输和控制。 Modbus： 类型：串行通信协议用途：广泛用于工业自动化设备间的通信，如PLC、传感器和执行器。优点：简单、开放且…
阅读更多...
Java面向对象编程--高级

Java面向对象编程--高级

目录 一、static关键字 1.1 静态变量 1.2 静态内存解析 1.3 static的应用与练习 二、单例设计模式 2.1 单例模式 2.2 如何实现单例模式 三、代码块 3.1 详解 3.2 练习，测试 四、final关键字 五、抽象类与抽象方法 5.1 abstract 5.2 练习 六、接口 6.…
阅读更多...
【JS】消除头尾的换行符、空格符

【JS】消除头尾的换行符、空格符

一、需求说明 删除 ckeditor 生成的文本的开头和结尾的额外换行符、空格符，但不删除文本本身之间的空格、换行内容。 举例： 1、原始数据 2、期望数据 二、需求分析 1. 从 ckeditor 获得的全部字符串解析content.getData()为 HTMLCollection。 2. 遍…
阅读更多...
Linux运维_Apache更改默认网站目录

Linux运维_Apache更改默认网站目录

1.首先创建目录 并且在目录下新建测试文件 index.html mkdir -p /home/test/ap_web 直接wget 百度官网 wget www.baidu.com 2.编辑配置文件 /etc/apache2/sites-available/000-default.conf(找到 DocumentRoot)更改为刚刚创建的目录 接着在添加 最终文件: 3.给文件 添加属…
阅读更多...
动态规划lc

动态规划lc

先找到规律，然后找边界情况；部分特殊情况分类讨论 *递归 70.爬楼梯 简单 提示 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 示例 1： 输入&#xff1a…
阅读更多...
MySQL表的操作

MySQL表的操作

1，表的创建 关键字：create table name 内容： 在写指令的过程中一定要注意输入法是中文输入还是英文输入，如果是中文输入会报错； 在创建表括号后面的有两个关键字：character set 和 engine ，其…
阅读更多...
Linux中的chown命令详解

Linux中的chown命令详解

文章目录 Linux中的chown命令详解一、引言二、chown命令基础1、命令格式2、常用选项 三、chown命令实例1、改变文件所有者2、改变目录所有者和组3、只改变文件所属的组4、忽略无效的用户和组5、递归改变目录所属的组，保持所有者不变 四、注意事项 Linux中的chown命令…
阅读更多...
阿里云融合认证中的App端一键登录能力

阿里云融合认证中的App端一键登录能力

在如今的移动互联网环境中，App端的一键登录功能逐渐成为提升用户体验的关键。用户不再需要繁琐的注册流程或输入短信验证码，一键即可通过手机号码完成登录。而阿里云融合认证中，一键登录能力为移动应用提供了一个简单、便捷且安全的用户身份验…
阅读更多...
最新文章

Copyright @ 2022~2023