Blade 中应使用 @json 指令而非 json_encode() 输出 JSON，因其自动处理转义、类型校验和 XSS 防御，输出合法 JSON 字符串；Vue 组件推荐通过 props 接收，如 。
Blade 中直接输出 JSON 数据用 @json，不是 json_encode() 手动转义
很多人在 Blade 里写 {{ json_encode($data) }}，结果引号被 HTML 转义成 "，JS 解析失败。Laravel 5.5+ 内置的 @json 指令会自动处理转义、类型校验和 XSS 防御，且输出是合法 JSON 字符串（带双引号包裹），可直接赋值给 JS 变量。
常见错误现象：{{ json_encode($user) }} 在页面源码中显示为 {"id":1,"name":"Tom"}，JS 里 const user = {{ json_encode($user) }}; 会语法报错。
-
@json($user)输出：{"id":1,"name":"Tom"}（安全、合法、可直接用） - 支持嵌套结构、
null、布尔值、数字，不支持资源（如resource对象需先toArray()） - 若变量可能为
null，建议加默认值：@json($user ?? [])
Vue 组件接收 Blade 传入的 JSON 数据，优先用 props 而非全局变量
把 @json 结果塞进 data- 属性再用 JS 读取，容易出竞态或类型丢失；更稳妥的方式是让 Vue 组件声明 props，Blade 渲染时直接绑定。
使用场景：初始化一个带用户信息的 UserProfile.vue 组件，数据来自服务端查询，无需额外 API 请求。
立即学习“前端免费学习笔记（深入）”；
- 组件定义需明确 prop 类型：
export default { props: { initialUser: { type: Object, required: true, default: () => ({}) } } } - Blade 中调用：
- 避免写成
:initial-user="{{ json_encode($user) }}"—— 会因 HTML 转义导致解析失败 - 如果用的是非 `
` 方式（如普通 ` `），可用data属性 +JSON.parse()，但必须确保属性值未被 HTML 编码：const el = document.getElementById('app') const user = JSON.parse(el.dataset.initialUser)@json和v-html混用会破坏 JSON 安全性有人为了“动态插入”，把
@json结果拼进字符串再用v-html渲染，比如：v-html="'var user = ' + @json($user)"。这不仅多余，还会绕过 Vue 的模板编译机制，导致 XSS 风险（尤其当$user含用户可控字段时）。-
@json本身已做 HTML 实体转义，但仅保障 JSON 字符串合法性；一旦用v-html插入脚本上下文，就失去保护 - 所有服务端数据应走
props或data属性，由 Vue 自身解析，不拼接字符串 - 若需动态生成 JS 代码（极少见），改用 Laravel Mix 的 Webpack 提供环境变量或预编译配置，而非运行时拼接
复杂嵌套对象传给 Vue 时，注意 Eloquent 关系加载与序列化控制
直接传
@json($post)看似简单，但如果$post带了未加载的关系（如$post->author），序列化时会触发 N+1 查询；若用了Hidden或Casts，也可能和前端预期不符。- 显式加载所需关系：
$post->load('author:id,name,avatar')，避免传整个模型实例 - 用
toArray()或only()显式筛选字段：@json($post->only(['id', 'title', 'content'])) - 若模型有
$casts（如'options' => 'array'），@json会自动处理；但自定义toArray()方法必须返回纯数组，不能返回集合或对象 - 时间字段默认转为字符串，无需额外格式化 —— 除非你覆盖了
serializeDate()方法
data()或setup()中正确解构或引用它。直接把@json当字符串用没问题，但把它当成“已经响应式”的源头，就容易忽略 Vue 的响应式限制。 -
