如何在Vue中通过外部方法修改数据实现自动刷新？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何在Vue中通过外部方法修改数据实现自动刷新？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

Vue如何通过修改外部方法实现自动刷新数据？

问题背景：

如代码所示，期望通过输入不同数字，点击“搜索”按钮后，页面数据列表能够自动更新。然而，目前无论输入什么数字，列表始终显示“hello1”和“hello2”。

问题解决：

关键在于解决每次点击按钮时Vue实例如何被再次初始化的问题。

原版代码分析：

原版代码中，loadDataList函数内存在的问题是，它每次都会重新创建一个新的Vue实例，并且在第二次点击时，由于模板内容已被渲染为静态HTML，Vue实例将无法再响应数据变化。

因此，正确的做法是避免重新创建Vue实例，而是直接修改已创建实例的data数据。

修改方案：

var data = [{'title': 'hello1'}, {'title': 'hello2'}];
var app = new Vue({
    el: '#searchResult',
    data: {
        searchResultList: data
    }
});
document.getElementById('searchBtn').onclick = function () {
    if (document.getElementById('searchIpt').value == '1') {
        console.log(1);
        app.searchResultList = [{'title': 'hello3'}, {'title': 'hello4'}];
    } else if (document.getElementById('searchIpt').value == '2') {
        console.log(2);
        app.searchResultList = [{'title': 'hello5'}, {'title': 'hello6'}];
    }
};

在修改后的方案中，我们直接修改app实例的searchResultList数据，从而触发Vue响应式系统更新视图。这样，无论用户输入什么数字，点击“搜索”按钮后，列表数据都能正确更新。

今天关于《如何在Vue中通过外部方法修改数据实现自动刷新？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！