取时不能更新函数内部的vue数据？

Question

我是VueJ的新手。这是Laravel6.0，我对javascript中的变量范围不太了解，但我想我在这里遗漏了一些东西。

当我在fetch之外编写"self.msg='hello world'"时，它工作得很好。

问题就在这里:即使在.then()中设置了“.then= 'hello world'”之后，它也不会在视图中得到反映。意味着'msg‘变量没有更新。

​

<div class="main" >
    <div class="test"> {{ msg }} </div>
    <!-- output:test  -->
</div>

export default {
    name:"word-list",
    data() { 
        return {
            msg: 'test'
        }
    },
    created() {
        this.fetchWords();
    },
    methods: {

        fetchWords() {

            let self = this;
            console.log(self.msg);//output: test
            fetch("getAllWords")
            .then(res => res.json())
            .then( res => {
                console.log(self.msg);//output: test
                self.msg = "hello world"
                console.log(self.msg);//output: hello world
            })
            .catch((error) => console.log(error) );
            console.log(self.msg);//output: test
        }
    }
}

Answer 1

这里的问题(可能)是因为在组件呈现之前调用fetchWords()函数，但没有告诉它在检索数据后重新呈现。到那个时候，Vue还不知道你在触发一次“重绘”。你有两个选择：

1. 您可以使用mounted() (Vue生命周期挂钩)生命周期挂钩，然后，一旦Vue.js挂载组件，它就会请求您的数据，然后它将知道重新设置该数据点。
2. 您可以调用this.nextTick()函数(nextTick()读数)强制Vue.js“重绘”UI。

这还只是猜测，但这正是我在处理HTTP和Vue.js生命周期挂钩时所看到的。