为啥 vue.js 不会更新 DOM？

Posted 2023-02-22

【中文标题】为啥 vue.js 不会更新 DOM？

【英文标题】：Why won't vue.js update the DOM?为什么 vue.js 不会更新 DOM？

【发布时间】：2020-04-30 08:38:38

【问题描述】：

以我的方式学习 Vue。在查看了 React、Angular 和 Svelte 之后，我选择了它作为更好的选择。

我有一个简单的例子，它可能不起作用，因为我没有得到/理解 Vue 的反应行为。

简单的应用程序：

<template>
  <div id="app">
    <app-header></app-header>
    <router-view />
    <app-footer></app-footer>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Home from './components/Home.vue'
import Footer from './components/Footer.vue'
export default 
  components: 
    name: 'App',
    'app-header': Header,
    'app-footer': Footer
  

</script>

Home.vue 和 Footer.vue 在模板上有纯 html 内容。

在 Header.vue 我有：

<template>
  <div>
    <h1>The Header</h1>
    <nav>
      <ul>
        <li>Curr Player:&nbsp; ethaccount </li>

        <li>Prop owner:&nbsp; propOwner </li>
      </ul>
    </nav>

    <hr />
  </div>
</template>

<script>
export default 
  data() 
    return 
      ethaccount: 'N/A',
      propOwner: 'N/A'
    
  ,
  methods: 
    update() 
      var ethaccount = '0xAAAAAA123456789123456789123456789'
      console.log('ETH Account: ' + ethaccount)

      var propOwner = '0xPPPPPPPPPPP987654321987654321'
      console.log('Prop Account: ' + propOwner)
    
  ,
  mounted() 
    this.update()
  

</script>

但我无法更新标题，也无法找到我做错了什么。帮助。

【参考方案1】：

如果您需要阅读更多关于 vuejs 中数据的反应性的信息，请查看此链接：https://vuejs.org/v2/guide/reactivity.html

如果您需要访问/更改您的数据，请尝试这样做：

this.$data.ethaccount = 'foo';
this.$data.propOwner = 'bar';

对我来说，问题在于你在本地重新声明你的变量：

var ethaccount = "0xAA...";

这样做，您永远不会更改您通过模板访问的数据的值。

希望它能解决你的问题。

【讨论】：

是的，谢谢，$this.data.XXX 技巧有效......我将“var”添加到每个变量，因为我得到“未定义变量 foobar”。所以我知道添加它会使变量本地化。我仍然不知道如何正确处理反应变量。

在 Vue.js 中，道具和数据是反应式的。如果您向孩子发送一个变量，它将是一个道具，您可以通过父级更新变量（数据向下，事件向上）。访问data和props的方式是一样的：this.$props.foo this.$data.bar 希望对你有帮助。