Vue.js 带有外部对象的计算函数

Question

是否可以将 Vue 的computed属性与外部 object 一起使用？

为了说明我的意思，这是我想象的代码示例：

<!-- Vue file -->

<template>
    <div>{{data.auth}}</div>
</template>

<script>
import {_data} form "./data"

export default {
    computed: {
        data() { return _data }
    }
}
</script>

<!-- data.js file -->

let _auth = "123";

export let _data = {
   auth: _auth
}

setTimeOut(() => _auth = "456", 2000)

我对这段代码的期望是 HTML 文档在 2000 毫秒后从“123”变为“456”。

但据我所知，这是行不通的。

Answer 1

使用 Vue 3，您可以导入ref以跟踪更改：

import { ref } from 'vue'

const _auth = ref('123')

export const _data = {
    auth: _auth
}

setTimeout(() => {
    _auth.value = '456'
}, 2000)

---

工作片段：

 const _auth = Vue.ref('123') const _data = { auth: _auth } setTimeout(() => { _auth.value = '456' }, 2000) Vue.createApp({ data() { return { data: _data } } }).mount('#app')

 <script src="https://unpkg.com/vue@next"></script> <div id="app"> <div>{{ data.auth }}</div> </div>

Answer 2

使用Observables ，您可以使数据反应

import Vue from "vue";

let _auth = "123";
export let _data = Vue.observable({
  auth: _auth
});

setTimeout(() => {
  _data.auth = "456";
}, 2000);