vue2.0开发注意事项

[JNUfeatherwit]

1、尽量在组件里而不是在store里定义变量，否则，可能需要做额外的初始化数据及组件间值冲突处理

2、使用watch来减少副作用

比如在modal关闭时重置数据，清楚校验提示

3、做搜索功能时将搜索项的数据源与后端接口参数的搜索值区分开来，不要共用一个值

4、列表删除某一项时需要判断此项是否是当前页的唯一一项，若是，需做相应处理

queryAfterDelete() {
      if (this.datas.length <= 1) {
        this.handlePageChange(this.currentPageIndex > 1 ? this.currentPageIndex - 1 : 1)
      } else {
        this.query()
      }
    }

5、对于复杂的类型（数组/对象），watch只会响应其引用的变化，若需要监控深层的变化，需要加deep

6、v-model的实质（自定义组件如何双向绑定）

<custom-input v-model="searchText"></custom-input>

等价于

<custom-input
  :value="searchText"
  @input="searchText = $event"
></custom-input>

如果子组件里双向绑定的是input组件，子组件需这样传参数

<input
    :value="value"
    @input="$emit('input', $event.target.value)"
/>

这是v-model在自定义组件上的表现 但是对于html的input组件

<input v-model="searchText">

会等价于

<input
 :value="searchText"
  @input="searchText = $event.target.value"
>

7、在事件处理函数里同时传参数和原始的DOM事件(包括子组件回传回来的参数)

使用$event来代表

<button @click="func('data', $event)">
  Submit
</button>

注意，在模板中

<button @click="func">
  Submit
</button>

等价于

<button @click="func($event)">
  Submit
</button>

8、横向和纵向的滚动

overflow-x,overflow-y