面试题：Vue 中怎么改变插入模板的分隔符？

在 Vue 中，默认的模板分隔符是 {{ }}（双大括号），用于插值绑定。

如果需要在模板中使用其他分隔符（例如避免与后端模板引擎冲突），可以通过 Vue 的配置来修改。

修改模板分隔符的方法

1. 全局修改分隔符

可以通过 Vue.config 全局配置修改分隔符。这种方式会影响到所有 Vue 实例。

   // 在创建 Vue 实例之前修改分隔符
   Vue.config.delimiters = ['${', '}']; // 将分隔符改为 ${ }

   new Vue({
     el: '#app',
     data: {
       message: 'Hello, Vue!',
     },
   });

在模板中使用新的分隔符：

   <div id="app">
     <p>${ message }</p>
   </div>

2. 局部修改分隔符

如果只想在某个 Vue 实例中修改分隔符，可以在创建实例时通过 delimiters 选项进行配置。

   new Vue({
     el: '#app',
     data: {
       message: 'Hello, Vue!',
     },
     delimiters: ['${', '}'], // 将分隔符改为 ${ }
   });

在模板中使用新的分隔符：

   <div id="app">
     <p>${ message }</p>
   </div>

修改插值分隔符的注意事项

避免冲突：
- 修改分隔符时，确保新的分隔符不会与模板中的其他语法（如 HTML 标签、JavaScript 代码等）冲突。
可读性：
- 选择易于理解和维护的分隔符，避免使用过于复杂或难以识别的符号。
一致性：
- 如果项目中多个地方需要修改分隔符，建议统一配置，保持一致性。

示例：修改分隔符为 `[[ ]]`

全局修改

Vue.config.delimiters = ['[[', ']]'];

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!',
  },
});

模板：

<div id="app">
  <p>[[ message ]]</p>
</div>

局部修改

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!',
  },
  delimiters: ['[[', ']]'],
});

模板：

<div id="app">
  <p>[[ message ]]</p>
</div>

总结

默认分隔符：{{ }}。
修改分隔符的方法：
- 全局修改：Vue.config.delimiters = ['${', '}']。
- 局部修改：在 Vue 实例中配置 delimiters 选项。
注意事项：
- 避免冲突。
- 保持可读性和一致性。

通过修改分隔符，可以避免与后端模板引擎或其他语法冲突，同时保持代码的清晰和可维护性。

THE END

Vue 进阶面试题