Skip to main content

Vue 技巧

通过 vm 在 data 初始化函数中访问组件实例 (this)​

在 data 初始化函数中定义好子组件所需的所有数据及处理方法，有利于代码逻辑的集中，也防止出现 methods 过长过乱的情况。

{
  data(vm) {
    return {
      // 此处集中定义好所有侧栏的数据及处理函数
      sidebar: {
        status: 'show',
        onNavChange: (nav) => {
          // some code here
        },
        onClose: () => {
          vm.sidebar.status = 'hidden'
        }
      }
    }
  }

}

计算属性应仅针对 $props 和 data 使用​

computed 的计算属性函数，是针对 Vue 特有的响应式依赖 ($props 和 data) 而存在的。

其它情况（逻辑里没有涉及到 props 或 data 的代码）应一律使用普通函数，放到 methods 里面。