如题,vue3的H5中,$forceUpdate是无效的吗?
我看文档里是有的
https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95
如题,vue3的H5中,$forceUpdate是无效的吗?
我看文档里是有的
https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95
爱豆豆 - 办法总比困难多
v3示例代码 看看是不是你要的效果
xxx.vue
<template>
<view class="content" :key="key">
使用isShow {{isShow()}} <br/>
也可以直接使用aaa {{aaa}}
<view @click="set">点我1</view>
</view>
</template>
<script setup>
import {
aaa,
isShow,
setFun
} from './components/tools.js'
const set = () => {
setFun()
}
</script>
tools.js
import {ref} from 'vue'
export let aaa = ref(false);
export function isShow() {
return aaa.value;
}
export function setFun() {
aaa.value = !aaa.value;
}
爱豆豆 - 办法总比困难多
可以用啊 你怎么使用的呢?把你的代码片段发出来
1***@qq.com (作者)
<template>
<view class="content" :key="key">
{{isShow()}}
<view v-if="isShow()">true</view>
<view @click="set()">点我1</view>
<view @click="key=Number(new Date())">点我2</view>
</view>
</template>
<script>
import { isShow, setFun } from '@/utils/tools.js'
export default {
components: { },
data() {
return {
isShow: isShow,
key: 1
}
},
onLoad() { },
methods: {
set() {
setFun(this);
},
},
}
</script>
<style>
view{margin:20rpx;}
</style>
tools.js
let aaa = false;
export function isShow() {
console.log("运行isShow");
return aaa;
}
export function setFun(vm) {
aaa = true;
vm.$forceUpdate();
}
点击”点我1“,在tools里面运行$forceUpdate();无效,页面上的v-if="isShow()"没重新运行
2024-01-09 17:37
1***@qq.com (作者)
回复 爱豆豆: https://uniapp.dcloud.net.cn/quickstart-cli.html 下载这里的Vue3/Vite版, gitee 下载模板 也是一样不行的
2024-01-09 17:47
1***@qq.com (作者)
回复 爱豆豆: 我自己的项目 dev有效,build无效。 用官网的模板,dev就无效了。 dev打印this能看到$forceUpdate();$nextTick等实例方法,build打印this看不到这些方法。
2024-01-09 17:54
爱豆豆 - 办法总比困难多
用你的代码片段运行后也是正常的
1***@qq.com (作者)
回复 爱豆豆: vue3 https://uniapp.dcloud.net.cn/quickstart-cli.html
使用Vue3/Vite版
创建以 javascript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板)
就这里下载的gitee模板。
2024-01-09 18:03
1***@qq.com (作者)
多谢,明白了
2024-01-10 09:30