Question

请考虑以下示例：

Html(
 data: "<b>Hai</b>,
 defaultTextStyle: TextStyle(fontSize: 15, color: Colors.blue, fontWeight: FontWeight.bold),
),

const App = {
 setup() {
  const name = Vue.ref("");
  let firstTime = true;
  const message = Vue.computed(() => {
    if (firstTime) {
      firstTime = false;
      return "Welcome stranger";
    }
    return `Hello ${name.value}`;
  });
  
  return {
    name,
    message
  }
 }
};

Vue.createApp(App).mount("#root");

如您所见，<script src="https://unpkg.com/vue@next"></script> <div id="root"> name: <input v-model="name"/> <br/> message: {{ message }} </div>存储一个 compute 值，该值应跟踪对message的更新，但不是。
为什么会这样以及如何解决？

Answer 1

计算对象应始终使用要计算的不可变反应引用对象。

因此，如果您在开始时声明要使用的反应式对象，它将起作用。

const App = {
 setup() {
  const name = Vue.ref("");
  let firstTime = true;
  const message = Vue.computed(() => {
    name.value;
    if (firstTime) {
      firstTime = false;
      return "Welcome stranger";
    }
    return `Hello ${name.value}`;
  });
  
  return {
    name,
    message
  }
 }
};

Vue.createApp(App).mount("#root");

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  name: <input v-model="name"/> <br/>
  message: {{ message }}
</div>

Answer 2

在计算属性的开头将name.value分配给变量，然后在末尾将其返回

const App = {
 setup() {
  const name = Vue.ref("");
  let firstTime =true
  const message = Vue.computed(() => {
  let _name=name.value
    if (firstTime) {
      firstTime= false;
      return "Welcome stranger";
    }
    return `Hello ${_name}`;
  });
  
  return {
    name,
    message
  }
 }
};

Vue.createApp(App).mount("#root");

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  name: <input v-model="name" /> <br/> message: {{ message }} <br/> name:{{name}}
</div>

Vue 3：计算属性在组合API中未跟踪其依赖性

2 个答案: