vue 组件更新问题

Question

首先祝各位新春快乐~

<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"先销毁掉，之后在重新生成进行渲染。

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

Answer 1

谢邀！
你遇到问题应该是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>

Answer 2

个人理解:因为你是首先把this.name赋值给了txt，打印的也是txt，所以哪怕this.name再改变了可是txt却不会自动随着this.name的改变而改变。

解决方法:要么直接打印name

要么监听name值的变化

watch:{
'name':function(newval,oldVal){
this.txt = newVal;
}

要么像楼上说的使用计算属性。

Answer 3

难道就没有人想到直接把{{txt}}换成{{name}}吗？