在使用 Laravel 和 Vue 时，通过 Blade Views 将数据传递给 Vue 与使用 Axios 直接传递给 Vue Components 的优缺点是什么？ [关闭]

Question

目前，我通过这种方式将数据从 Laravel 传递到 Vue（通过 MySQL 数据库）：

在路由/web.php 中：

Route::get('/', [MyController::class, 'index']);

在 app/Http/Controllers/MyController.php 中

public function index() {

    $results = Data::all();

    return view('index', compact('results'));

}

在资源/视图/index.blade.php：

<div id="app">
    <index-component :results="{{ $results }}" />
</div>

然后在IndexComponent.vue中

props: {
    results: { 
        type: Object 
    };
}

这很好用，但由于我的大部分 HTML 都依赖 Vue，所以感觉不自然，几乎就像一种变通方法或 hack。一定有更简单直接的方法吧？

进入 Axios：

在路由/web.php 中：

Route::view('/', 'index');
Route::get('/indexrequests', [MyController::class, 'indexRequests']);

在 app/Http/Controllers/MyController.php 中：

public function indexRequests() {

    $results = Data::all();

    return response()->json($results);
}

在资源/视图/index.blade.php：

<div id="app">
    <index-component />
</div>

在 IndexComponent.vue 中：

created() {
    this.getResults()
},
data: function() { 
    return {
        results: null,
    }
}, 
methods: {
    getResults() {
          axios
            .get("/indexrequests")
            .then((res) => (this.results = res.data))
            .catch((error) => {});
    }
}
 

这样，刀片视图在最初创建后可以被忽略。 getResults() 方法直接与控制器对话。

我的问题是，费用是多少？如果不使用 Blade Views 来传递数据，我会失去什么（如果有的话）？以这种方式传递的数据量或类型是否会受到限制？一种方式或另一种方式的性能会更好还是更差？有什么安全问题吗？

也许它们在底层是相同的，而我根本没有意识到这个事实？

Answer 1

方法并不相同，但在这种情况下不会有太多实际差异。出于 SEO 的目的，使用初始数据在服务器端呈现一些标记可能是有益的，但这里不会发生这种情况。

依靠 API 而不是硬编码的数据，前端应用程序更加灵活。

根据硬编码数据的性质和数量，可能会导致初始渲染速度较慢，但​​完成渲染速度更快。 prop 中的硬编码数据需要额外注意转义，如果父组件被重新渲染，也会导致性能下降。一种常见的方法是提供初始数据作为全局变量：

<script>
window.myApp = { someData: '{{$results}}' };
</script>
<div id="app">
...

$results 是带有转义引号（在本例中为单引号）的 JSON 数据。