vue.js - vue 组件更新问题

问题描述

问 题

首先祝各位新春快乐~

<div id="app">
  <hello :name="name"></hello>
</div>

import Vue from 'vue'
import Hello from './Hello.vue'

var app = new Vue({
  el: '#app',
  data: {
    name: 'world'
  },
  components: {
    Hello
  }
})

setTimeout(() => {
  app.name = 'abc'
}, 1000)

组件Hello.vue如下：

<template>
  <div>
    hello {{txt}}
  </div>
</template>
<script>
  export default {
    data () {
      return {
        txt: this.name
      }
    },
    props: {
      name: {
        type: String,
        default: ''
      }
    }
  }
</script>
<style>
</style>

我发现1秒后，app.name已经改变了，但是组件却没有发生变化，想请教下这个问题的原因？难道是组件一旦渲染完毕，就不会再更新了吗？

我听说的方法是可以把组件加上v-if，需要刷新的时候，通过v-if="false"先销毁掉，之后在重新生成进行渲染。

同时想寻求合理的解法~ 希望老师能解答下~

解决方案

谢邀！
你遇到问题应该是data没有响应后续props的变化。 这个其实也好理解，data作为初始化数据的阶段，自然只会执行一次，即组件创建那次。 而之后props虽然有变化，data里却不会跟着变了。

v-if的招就算了，好像很麻烦的样子，可以试试computed:

<template>
  <div>
    hello {{txt}}
  </div>
</template>
<script>
  export default {
    computed: {
      txt () {
          return this.name;
      }
    },
    props: {
      name: {
        type: String,
        default: ''
      }
    }
  }
</script>
<style>
</style>

这篇关于vue.js - vue 组件更新问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！