关于前端躺过的坑之编码习惯——vue

[Hibop]

一定要做好数据初始化， 否则会发现数据会莫名奇妙 数据更新界面不更新情况：

• beforeCreate 创建之前：已经完成了 初始化事件和生命周期
• created 创建完成：已经完成了 初始化注册和响应， 数据初始化一般放到created里面
• beforeMount 挂载之前：已经完成了模板渲染
• mounted :挂载之后：已完成HTML虚拟化，创建了el节点 可以操作DOM了
• beforeDestroy ：摧毁之前：整个vue都处在实时监控空渲染和更新
• destroyed: 已摧毁，已经摧毁了观察者，子元素和事件监听

1. 原生事件绑定一般放在mounted去操作。一些插件的使用或者组件的使用中进行操作。 mounted在整个实例生命中只执行一次

2. 数据初始化一般放到created里面，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { / code / })}里面

3. created钩子每次加载完成后都可以重复执行；而mounted钩子只在页面第一次加载后才调用出来，只要el被加载过，之后的重复加载该页面就不会调用该钩子了。

4. 数组更新要使用splice，push、unshift，$set等方法， 或者es6遍历方法 返回替换；

编码风格推荐：

1. 组件名多单词，防止与原生HTML冲突
2. 文件名大驼峰书写（PascalCase）或者kebab-case ； DOM 模板中组件和props（传递props最好使用单个单词）使用kebab-case， 文件夹小写、复数；

   本来PascalCase 相比 kebab-case 有一些优势，，但是在 DOM 模板中HTML大小写不敏感，故要kebab-case： 当然也可以在所有地方都使用kebab-case规范； JS/JSX 中的组件名应该始终是 PascalCase； 关于文件名， 推荐只使用小写： Linux 系统是大小写敏感的，而 Windows 系统和 Mac 系统正好相反，大小写不敏感。 小写可以区分系统文件和用户文件

• 基础组件： Base/App/V前缀
• 单例组件(不接受props)： The/One
• 紧密耦合组件： 父组件前缀

  components/
  |- TodoList.vue
  |- TodoListItem.vue
  |- TodoListItemButton.vue