uni-app 不内置 join 过滤器，需手动注册且须加空值防护；直接在模板拼接数组易致空值错误、类型异常及性能损耗，推荐优先使用 computed 预处理、methods 封装或数据层拼接。
join 过滤器不能直接用，uni-app 里没有内置这个过滤器，你得自己注册一个；但更关键的是——别在模板里拼接数组，容易出空值、类型错误、性能问题。
为什么不能直接用 join 过滤器？
uni-app（基于 Vue 2）本身不提供 join 这类数组方法的过滤器，它只认你手动注册的函数。而且：
- 小程序平台对过滤器支持不稳定，{{ list | join }} 在微信小程序里大概率静默失效
- 如果 list 是 null 或 undefined，list.join() 会直接报 TypeError: Cannot read property 'join' of null
- v-for 中高频调用时，每次渲染都执行 join，无缓存，纯浪费
怎么安全注册一个 join 过滤器？
必须在 main.js 里、new Vue() 之前注册，且要加空值防护：
// main.js
import Vue from 'vue'
Vue.filter('join', function (arr, separator = ',') {
if (!Array.isArray(arr)) return ''
return arr.join(separator)
})
// 紧跟其后才是 new Vue(...)
模板中用法：{{ tags | join(', ') }}
注意：
- separator 参数只能是字面量或 data 字段，不能是表达式（比如 {{ list | join('，' + suffix) }} 会编译报错）
- 不支持链式传参，{{ list | join | uppercase }} 在 uni-app 2.x 中不合法
比过滤器更稳妥的替代方案
真正上线项目里，推荐这三种方式，按优先级排序：
- 用
computed预处理：把拼接逻辑提前到响应式计算中，避免模板里做任何数组操作 - 用
methods封装：适合需要动态分隔符的场景，例如{{ formatList(item.tags, ' / ') }} - 数据层就拼好：后端返回字符串，或请求回来立刻
map处理，如this.list = res.data.map(i => ({ ...i, tagText: i.tags?.join('、') || '' }))
最容易被忽略的边界情况
数组元素本身可能是对象、null、数字或布尔值，直接 join 会得到 [object Object],1,true 这种结果。如果你要显示标签名，得先映射：
Vue.filter('joinLabels', function (arr, key = 'name', separator = '、') {
if (!Array.isArray(arr)) return ''
return arr
.filter(item => item && typeof item === 'object')
.map(item => item[key])
.filter(Boolean)
.join(separator)
})
但这种复杂逻辑，早该抽成工具函数，而不是塞进过滤器里——尤其当你要适配多语言或权限字段时。
