Vue.js如何访问组件状态/变量并保持封装、对模板隐藏？

不管是Options API还是Composition API，都有简单的方式实现只在脚本内部可用、对模板隐藏的逻辑，类比Angular的private修饰符，具体方法如下：

Options API 方案 #

Options API里所有methods对象下的方法都会挂载到组件实例，模板能直接访问。要封装内部逻辑，你可以把这些私有函数定义在export default之外——也就是模块级的私有函数，它们不属于组件实例，模板完全访问不到，但组件内部的钩子、methods里的方法可以正常调用。

示例代码：

// 模块内私有函数，模板无法访问
function calculateCartTotal(items) {
  return items.reduce((total, item) => total + item.price * item.quantity, 0)
}

export default {
  data() {
    return {
      cartItems: [{ price: 50, quantity: 2 }, { price: 30, quantity: 1 }]
    }
  },
  methods: {
    checkout() {
      const total = calculateCartTotal(this.cartItems)
      console.log(`结算总价：${total}`)
      // 后续结算逻辑
    }
  }
}

上面的calculateCartTotal只能在脚本内部调用，模板里写{{ calculateCartTotal(cartItems) }}会直接报错。

Composition API（