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

Posted 2023-03-14

【中文标题】在使用 Laravel 和 Vue 时，通过 Blade Views 将数据传递给 Vue 与使用 Axios 直接传递给 Vue Components 的优缺点是啥？ [关闭]

【英文标题】：When using Laravel and Vue, what are the pros and cons of passing data to Vue via Blade Views vs directly to Vue Components with Axios? [closed]在使用 Laravel 和 Vue 时，通过 Blade Views 将数据传递给 Vue 与使用 Axios 直接传递给 Vue Components 的优缺点是什么？ [关闭]

【发布时间】：2022-01-13 15:06:20

【问题描述】：

目前，我通过这种方式将数据从 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 来传递数据，我会失去什么（如果有的话）？以这种方式传递的数据量或类型是否会受到限制？一种方式或另一种方式的性能会更好还是更差？有什么安全问题吗？

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

【参考方案1】：

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

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

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

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

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

【讨论】：

谢谢。 API 并不是一个我已经完全理解的概念，看来我自己在这里“发明”了一个，却没有意识到这一点。我现在会阅读更多内容。

明确地说，“API”是 Axios 的方式。它的成本是额外的请求和额外的 JS 代码。好处是更好的设计，以防您以后想分离后端和前端应用程序，这很常见。