1***@qq.com
1***@qq.com
  • 发布:2024-01-09 16:02
  • 更新:2024-01-09 18:20
  • 阅读:601

vue3 $forceUpdate无效?

分类:uni-app

如题,vue3的H5中,$forceUpdate是无效的吗?

我看文档里是有的

https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95

2024-01-09 16:02 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

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 (作者)

    多谢,明白了

    2024-01-10 09:30

爱豆豆

爱豆豆 - 办法总比困难多

可以用啊 你怎么使用的呢?把你的代码片段发出来

  • 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: 你这也不是vue3啊

    2024-01-09 17:43

  • 1***@qq.com (作者)

    关键就是v-if=""里面是一个方法,或许还是异步的,而不是变量

    2024-01-09 17:44

  • 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 (作者)

    你点击”点我1“,true就显示出来了? 不要点击”点我2“

    2024-01-09 17:55

  • 1***@qq.com (作者)

    我点击1,页面没变化,点击2才出现true

    2024-01-09 17:56

  • 爱豆豆

    回复 1***@qq.com: ”点我1“ 就变为true了

    2024-01-09 17:56

  • 爱豆豆

    我没点2

    2024-01-09 17:56

  • 1***@qq.com (作者)

    回复 爱豆豆: 那build后呢

    2024-01-09 17:57

  • 爱豆豆

    回复 1***@qq.com: 我没打包

    2024-01-09 17:58

  • 爱豆豆

    你用的是vue2 还是vue3

    2024-01-09 17:58

  • 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: 我以为你用的vue2呢 vue3中确实不行 但是你可以用利用ref来实现你要的效果 不比你更新视图更好吗

    2024-01-09 18:17

要回复问题请先登录注册