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

devtools/2024/10/18 22:36:57/

零基础入门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/devtools/125351.html

相关文章

Cesium 区域高程图

Cesium 区域高程图

Cesium 区域高程图 const terrainAnalyse new HeightMapMaterial({viewer,style: {stops: [0, 0.05, 0.5, 1],//颜色梯度设置colors: [green, yellow, blue , red],}});
阅读更多...
k8s的pod的管理

k8s的pod的管理

常用的Pod基础命令 列出所有命名空间中的所有Pod kubectl get pods --all-namespaces 列出指定命名空间中的所有Pod kubectl get pods -n <namespace> 显示指定Pod的详细信息&#xff0c;包括状态、事件等 kubectl describe pod <pod-name> -n <namespace>…
阅读更多...
Django makemigrations时出现TypeError: ‘module‘ object is not iterable

Django makemigrations时出现TypeError: ‘module‘ object is not iterable

使用Python 3.11、Django 5.1.2 写完model进行makemigrations时出现报错 报错的最下面提到了我自己创建的一个应用里的urls.py&#xff0c;尝试着给里面加上一个列表 然后问题解决了。。。 不知道为什么 makemigrations的时候会去检查urls。。。
阅读更多...
【多版本并发控制（MVCC）】

【多版本并发控制（MVCC）】

并发事务问题&#xff1a; MySQL隔离级别-未提交读&#xff0c;提交读&#xff0c;可重复读&#xff0c;序列化 隔离级别对于并发事务的解决情况 隔离级别脏读不可重复读幻读未提交读不可不可不可读已提交可不可不可可重复读 &#xff08;默认&#xff09;可可不可串行化&…
阅读更多...
es 全文文本分词查询

es 全文文本分词查询

ES 对 TEXT 类型的分词 我们可以使用分词器来查看分词的结果&#xff0c;默认的分词器是 standard 如果是其他的可以指定分词器 # 标准的分词 POST _analyze {"text": "Hello World!","analyzer": "standard" }全文检索的分词概念 …
阅读更多...
基于Springboot+Vue的健康饮食系统（含源码数据库）

基于Springboot+Vue的健康饮食系统（含源码数据库）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 这个系…
阅读更多...
HTML 什么是块级元素？

HTML 什么是块级元素？

1、在 HTML 中&#xff0c;元素通常分为两类 块级元素&#xff08;Block Elements&#xff09;&#xff1a; 块级元素占据其父容器的全部宽度&#xff0c;即使内容不足以填满宽度。 块级元素从新的一行开始&#xff0c;并且会把它之后的元素推到下一行。行内元素&#xff08;I…
阅读更多...
MySQL SELECT 查询（三）：查询常用函数大全

MySQL SELECT 查询（三）：查询常用函数大全

MySQL SELECT 查询&#xff08;三&#xff09;&#xff1a;查询常用函数大全 1. 单行函数 单行函数是 SQL 中一类重要的函数&#xff0c;它们可以对单行数据进行处理&#xff0c;并返回单个结果。单行函数可以嵌套使用&#xff0c;并提供灵活的数据处理能力。 1.1 定义 只对单…
阅读更多...
最新文章

Copyright @ 2022~2023