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

问题背景：

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

问题解决：

立即学习“前端免费学习笔记（深入）”；

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

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

原版代码分析：

原版代码中，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响应式系统更新视图。这样，无论用户输入什么数字，点击“搜索”按钮后，列表数据都能正确更新。