Hibop/Hibop.github.io

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

Opened this issue · 0 comments

Hibop commented

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

  • 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