前端编写规范

一、常见避免风险操作

1、vue3.0事件名称不要定义常用保留词[强制]。

比如（click、change、select、submit）。

也可以通过子组件的选项中设置了 ==inheritAttrs: false==解决这个问题。

原因：vue3.0 移除v-on.native修饰符，对于原生的事件v-on也可以接收到。那么可能就造成原生本地事件触发定义事件，导致意外的事件触发。

==错误示例==:

this.$emit("change")

正确示例：

this.$emit('search')

2、query取出来的参数不能直接当参数传入的后端接口[建议]

原因： 对于后端的接入参数不可控制。防止参数利用。

==错误示例==：

const query = this.$route.query;
XXrequest(query)

正确示例:

//其他方式也都行。这里只是演示
const {name, id} = this.$route.query;
XXrequest({name,id})

3、对于query传复杂类型的值，需要用encodeURI, decode URL进行编码[建议]

原因：url参数特殊字符不能传参。如#/

==错误示例：==

const link = () => {
    //currentModel 为当前正确查询的form数据。
    this.$router.push({path: '/**', 
    query: {data: JSON.stringify(currentModel)}})
}

...
    //formModel 为页面双向绑定数据。 query为路由query参数
    onMounted(() => {
        Object.assign(formModel, JSON.pares(query)) 
    })
...

正确示例：

const link = () => {
    //currentModel 为当前正确查询的form数据。
    this.$router.push({path: '/**', query: {data: encodeURL(JSON.stringify(currentModel))}})
}

...
    //formModel 为页面双向绑定数据。 query为路由query参数
    onMounted(() => {
        Object.assign(formModel, decodeURL(JSON.pares(query))) 
    })
...

4、vue在销毁时将页面的定时器回收销毁[强制]。

原因：setTimeut,setInterval 浏览器会在页面关闭后才会销毁。而vue
是单页面。路由跳转也没有销毁定时器

正确示例：

    destroy(() => {
        clearInterval(timer);
        clearTimeout(timer)
    })

二、模块划分规则。

1、request.data文件需要用闭包导出[建议]。

原因：防止页面数据共享。出现页面数据需要回收。

==错误示例：==

export const requestData =  ref([]);
export const requestFun = funciotn() { ...}

正确示例：

export function () {
    const requestData =  ref([]);
    const requestFun = funciotn() { ...};
    return {
        requestData,
        requestFun
    }
}()

三、组件划分规则。

四、查询问题。

1、正确查询之后将之前的错误消息提示清除[建议]。

==错误示例：==

const search = () => {
    if() {
    ...
        message.error('错误！')
    }
    ...
}

正确示例：

const search = () => {
  if() {
    ...
        message.error('错误！')
    }
    ...
    message.destroy();
}

2、正确查询之后,并临时存入正确查询的formModel数据。所有的参数从临时数据获取。[强制]

原因：防止翻页之前，改变formModel，没有点击查询。翻页数据不一致。防止下载excel文件数据之前，改变formModel，没有点击查询，导致的excel与页面数据不一致。

==错误示例：==

const search = () => {
    //formModel 与页面input双向绑定
    this.$emit("search", {...formModel})
}

正确示例：

const currentModel = ref({});
const search = () => {
    //formModel 与页面input双向绑定
    currentModel.value = {...formModel};
    this.$emit("search", {...currentModel.value})
}

五、ant-design-vue组件相关问题。

1、table组件加上rowkey。[建议]

原因：防止页面数据重载时。没有根据diff算法消耗性能。
错误示例：

    <a-table v-bind="{ columns, dataSource }" :pagination="pagination">
    </a-table>

正确示例：

    <a-table v-bind="{ columns, dataSource }" :pagination="pagination" rowKey="id">
    </a-table>