从函数返回的Vue 3React性值f

vaj7vani  于 2023-05-23  发布在  Vue.js
关注(0)|答案(2)|浏览(127)

我有一个产生变量的函数。我需要它们是React性的--它可能会随着时间的推移而变化,但是Vue并不跟踪这些变化

<template>
      {{ parse('foo') }}
    </template>
    
    <script>
    import { ref } from 'vue'
    
    export default {
      setup() {
        function parse(param) {
          const target = ref('initial value')
    
          setTimeout(() => {
            target.value = 'changed value'
          }, 3000)
    
          return target
        }
    
        return { parse }
      },
    }
    </script>
bn31dyow

bn31dyow1#

调用模板内部的方法来渲染某些东西不是一个好的实践,你可以在函数外部定义响应数据,然后在setup或onMounted钩子中运行函数来修改target属性:

<template>
      {{ target }}
    </template>
    
    <script>
    import { ref } from 'vue'
    
    export default {
      setup() {
        const target = ref('initial value')
  
      function parse(param) {
            setTimeout(() => {
            target.value = 'changed value'
          }, 3000)        
        }
   //call the function 
   parse('foo')

    
        return { target }
      },
    }
    </script>
py49o6xq

py49o6xq2#

我认为你期望的是初始值被显示,3秒后它被更改为更改值然而,在你的代码中,你在函数中定义了目标,所以初始值永远不会被返回,而是只有更改值
相反,const target = ref('initial value')应该定义在函数之外,然后函数应该相应地被调用

<template>
      {{ target }}
    </template>
    
    <script>
    import { ref } from 'vue'
    
    export default {
      setup() {
        const target = ref('initial value')
        function parse(param) {
          setTimeout(() => {
            target.value = 'changed value'
          }, 3000)
        }
        parse('foo')

        return { target } 
      },
    }
    </script>

相关问题