四、 Vue

优质

小牛编辑

129浏览

2023-12-01

本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性：

其它开发者或是团队成员更容易阅读和理解。 IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能更容易使用现有的工具更容易实现缓存以及代码包的分拆

要点

尽量使用ES2015，遵循CommonJs规范
切勿直接操作DOM,所以也应该避免使用jQuery库
data属性一定要是一个函数并且返回一个json对象
无论是公共组件还是页面都应该使用单文件组件.vue
不要在JS里绑定跟业务相关的事件，业务事件及逻辑，应该在HTML上绑定。在JS里绑定事件应该用于使用了第三方的插件等场景，如果主动绑定了事件，记得在相关生命周期接触绑定以及销毁相关实例，比如在组件内创建了一个百度editor，并加了一个定时器来更新数据，在组件销毁时，应该销毁这个editor实例，并将定时器clear。

data(){
    return {a:}
},
mounted(){
    /* 注册ueditor */
    var $this = this;
    var id = this.$route.query.id;

    this.ue_editor = UE.getEditor('editor');
    this.ue_editor.addListener( 'contentChange', function( editor ) {
        $this.formData.content = $this.ue_editor.getContent();
        $this.$validator.validate('richtext',$this.formData.content);
    });
    if(id){
        this.editActivity(id);
        this.formData.edit = 1;  
    }
    this.interval = setInterval(function(){
        update($this.formData.conten);
    },1000);
},
beforeRouteLeave(to,from,next){
    /* 销毁百度编辑器 */
    this.ue_editor.destroy();
    this.ue_editor = null;
    clearInterval(this.interval);
    setTimeout(function(){
        next();
    },0)


},

组件

编写一个组件按照<template>、<script>、<style>的顺序编写
公共组件就是独立的一块，要将公共组件相关的东西写在一块，有利于重复调用
一个独立组件，视组件大小、API多少而定，小的应该在文件头部注释写明参数以及回调；比较大的组件要在组件文件夹内写明组件的README.md,README.md要编写得清晰明了，最好具备开源的基础

template标签

尽量使用Vue的语法糖，比如可以用:style代替v-bind:style；用@click代替v-on:click
使用for列表循环要绑定:key，可以优化列表更新
简单的数据处理返回应该用过滤器
根元素应该根据具体情况给一个class控制样式，例如会员中心根模块首页：home-index

script标签

使用 name 属性。借助于 vue devtools 可以让你更方便的测试。指定 name 选项的另一个好处是便于调试--有名字的组件有更友好的警告信息。
对象的属性应该按照以下方法统一排序（考虑了数据之间的关联性与常用性）
methods 里面的方法使用驼峰命名的动宾短语。
变量以及其他没有提及的问题参照js规范处理

<script type="text/javascript">
  export default {
    name:'homePage'
    components: {},
    directives:{},
    props: {
      bar: {}, // 按字母顺序
      foo: {},
      fooBar: {}
    },
    data() {},
    computed: {},
    watch: {},
     // 生命周期函数
    beforeCreate() {},
    mounted() {},
    methods: {
        getType(){}
    }

  };
</script>

style标签

只存放本组件相关的css
其余规则参考css规范