如何正确将PHP数据注入VueJS？传递固定PHP数组方案咨询

嘿，针对你这个首次请求传递静态数据的场景，我有几个非常靠谱的方案，既安全又简便，完全不用XHR请求：

方案1：初始化Vue实例时直接传入解析后的JSON #

这是最直接的方式，核心是用PHP的json_encode()把数组转成安全的JSON字符串，然后直接注入到Vue的data里。关键是要给json_encode()加上转义参数，防止XSS攻击。

代码示例： #

PHP部分：

<?php
$userData = [ 
    'name' => 'Tester', 
    'level' => 999, 
    'email' => 'tester@acme.com' 
];
// 转义HTML特殊字符，避免XSS风险
$safeUserJson = json_encode($userData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
?>

Vue部分：

<div id="app">
  <p>用户名: {{ user.name }}</p>
  <p>等级: {{ user.level }}</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      // 直接把安全的JSON注入进来，不需要额外解析
      user: <?php echo $safeUserJson; ?>
    }
  }
})
app.mount('#app')
</script>

为什么这个安全？JSON_HEX_*参数会把HTML里的特殊字符（比如<, >, ', "）转成十六进制实体，就算你的用户数据里有恶意脚本内容，也会被转义成无害的文本，不会被浏览器执行。

方案2：通过HTML的data-*属性传递 #

如果想把数据和Vue代码稍微分离，可以用HTML元素的自定义data属性存储JSON，然后在Vue初始化时读取解析。

代码示例： #

<!-- 把安全的JSON存在data-user属性里 -->
<div id="app" data-user="<?php echo $safeUserJson; ?>">
  <p>邮箱: {{ user.email }}</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      // 从DOM的data属性读取并解析JSON
      user: JSON.parse(this.$el.dataset.user)
    }
  }
})
app.mount('#app')
</script>

这个方案同样安全，因为我们用了和方案1一样的json_encode()参数，保证数据不会被注入恶意代码。

要避免的坑 #

• 不要直接把PHP数组转成JS对象：比如var user = <?php print_r($userData); ?>，这会导致语法错误，而且完全没有安全防护。
• 绝对不要用eval()：不管是解析PHP输出的字符串还是其他内容，eval()都会执行任意代码，存在极大的安全风险。

这两个方案都完美匹配你的需求：首次请求传递数据，后续不需要变更，不用额外的AJAX请求，而且安全可靠。

内容的提问来源于stack exchange，提问作者SyncroIT