如何避免script setup中的部分变量暴露至模板？

在script setup中，想要让部分变量仅在脚本内部可用、不暴露给模板，有几种实用的方法：

• ES原生私有变量语法：给变量名加上#前缀，这是ES模块的私有特性，Vue完全支持。这种变量会被彻底隔离，不会暴露到模板中：

  const #privateData = '仅脚本内部可访问'
  const publicData = '模板能读取'
  

• 利用立即执行函数(IIFE)包裹：把私有变量放在IIFE内部，只导出需要暴露给模板的内容。这种方式可以灵活控制哪些变量对外可见：

  const { publicValue, getPrivateInfo } = (() => {
    const secretValue = '私有内容'
    const publicValue = '模板可访问'
    
    // 如果需要在脚本内部操作私有变量，可以定义方法导出
    const getPrivateInfo = () => secretValue
    
    return { publicValue, getPrivateInfo }
  })()
  

  这里的secretValue只会存在于IIFE的作用域内，模板无法访问。

• 块级作用域隔离：通过{}创建局部作用域，把私有变量放在其中。块内的变量不会泄露到外部作用域，自然也不会暴露给模板：

  {
    const tempPrivate = '仅在这个块里可用'
    // 在这里处理tempPrivate的逻辑
  }
  
  const publicVar = '模板能拿到的变量'
  

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