蔡cai
蔡cai
  • 发布:2025-01-21 09:02
  • 更新:54 分钟前
  • 阅读:39

【记录】vue2--->vue3组合式

分类:uni-app

1、this.$nextTick,更改如下:

import { nextTick} from "vue";
nextTick(function() {})

2、uni.createSelectorQuery().in(this),其他相似api需要this应该也是一样的,更改如下:

uniapp文档示例(选择组合式api):https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectorquery-in
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const that = instance.proxy; // 相当于vue2的this
const query = uni.createSelectorQuery().in(that);

评论区”朱小“的发问,加.in(that)和不加的区别。以下是查找到的内容,仅供参考:

3、子组件使用this.$parent,替换方案:props、provide/inject、emits或事件总线

0 关注 分享

要回复文章请先登录注册

蔡cai

蔡cai (作者)

回复 朱小 :
没事,我也是查的,刚好我也学习一下
54 分钟前
朱小

朱小

回复 蔡cai :
感谢
56 分钟前
蔡cai

蔡cai (作者)

回复 朱小 :
这是查的:当你调用 uni.createSelectorQuery() 时,它默认查询的是整个页面的节点。然而,有时候你可能只想查询某个特定组件或页面实例内部的节点,这时候就需要用到 .in(this) 方法。
uni.createSelectorQuery()
‌作用范围‌:全局范围,即整个页面。
‌使用场景‌:当你需要查询的节点不在任何特定组件或页面实例的内部,或者你不关心查询的具体范围时。
uni.createSelectorQuery().in(this)
‌作用范围‌:限定在当前组件或页面实例的内部。
‌使用场景‌:当你需要查询的节点位于当前组件或页面实例的内部,并且你不想或不需要查询到其他组件或页面实例中的同名节点时。
区别总结
‌作用范围不同‌:uni.createSelectorQuery() 查询整个页面,而 uni.createSelectorQuery().in(this) 只查询当前组件或页面实例。

‌精确性‌:使用 .in(this) 可以更精确地定位到你想要的节点,特别是当页面中有多个相同选择器时,它可以避免查询到其他不相关的节点。

‌性能‌:在大型应用中,限定查询范围可以提高性能,因为不需要遍历整个页面的 DOM 树来查找节点。

‌适用性‌:如果你知道你要查询的节点一定在当前组件或页面实例中,那么使用 .in(this) 是更好的选择。如果你不确定节点的位置,或者节点可能位于页面的任何位置,那么使用不带 .in(this) 的查询可能更合适。
2025-01-21 10:54
蔡cai

蔡cai (作者)

回复 朱小 :
没试过,你可以试下
2025-01-21 10:43
朱小

朱小

是否去掉.in(that);也可行,去掉会有什么影响吗
2025-01-21 10:33