Angular：如何展示变量初始值且不随变量更新而变化

根据你要固定显示变量初始值、不受后续更新影响的需求，以下是不同场景下的实现方案：

Vue 框架方案 #

选项式 API #

初始化时把目标变量的初始值存入一个独立变量，后续绑定这个新变量即可：

<template>
  <span>{{ initialValue }}</span>
</template>

<script>
export default {
  data() {
    return {
      value: '初始值',
      initialValue: ''
    }
  },
  created() {
    // 仅在组件创建时保存初始值
    this.initialValue = this.value
  }
}
</script>

组合式 API（Vue3） #

同样通过独立变量存储初始值，利用生命周期钩子完成赋值：

<template>
  <span>{{ initialValue }}</span>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const value = ref('初始值')
const initialValue = ref('')

onMounted(() => {
  // 组件挂载后保存初始值
  initialValue.value = value.value
})
</script>

React 框架方案 #

使用 useState 存储初始值，通过 useEffect 空依赖确保仅在组件挂载时赋值一次：

import { useState, useEffect } from 'react';

function App() {
  const [value, setValue] = useState('初始值');
  const [initialValue, setInitialValue] = useState('');

  useEffect(() => {
    // 仅执行一次，保存初始值
    setInitialValue(value);
  }, []);

  return (
    <span>{initialValue}</span>
  );
}
export default App;

原生 JavaScript 方案 #

页面加载时直接将变量初始值写入标签，后续变量修改不会影响标签内容：

<span id="staticValue"></span>

<script>
// 目标变量
let value = '初始值';
// 页面加载时设置span内容
document.getElementById('staticValue').textContent = value;

// 后续修改value不会改变span显示
value = '修改后的值';
</script>

内容的提问来源于stack exchange，提问作者Drake