vue风格指南(简)

vue风格指南(简)

========================================================props

prop 的定义应该尽量详细，至少需要指定其类型。

反例：props: ['status']// 这样做只有开发原型系统时可以接受

props: {
    status: String
}

========================================================v-for+key

反例：

<ul>
    <li v-for="todo in todos">
         {{ }}
      </li>
</ul>

<ul>
    <li  v-for="todo in todos" :key="todo.id">
         {{ }}
    </li>
</ul>

========================================================v-if+key

v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。

Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。

<div  v-if="error" key="search-status">
       错误：{{ error }}
</div>
<div  v-else  key="search-results">
       {{ results }}
</div>

========================================================v-if、v-for不用同一元素

v-for 比 v-if 具有更高优先级

反例：

<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
       {{ user.name }}
    </li>
</ul>

方式一：用计算属性替代v-if过滤，有更高渲染效率

<ul>
   <li v-for="user in activeUsers" :key="user.id">
       {{ user.name }}
    </li>
</ul>

computed: {
      activeUsers: function () {
           return this.users.filter(function (user) {
               return user.isActive
           })
       }
}

方式二：将v-if移到上级元素上

<ul v-if="shouldShowUsers">
     <li v-for="user in users" :key="user.id">
          {{ user.name }}
      </li>
</ul>

========================================================vue文件名

反例：

components/
     |- myComponent.vue

components/
           |- MyComponent.vue//大写开头

components/
          |- my-component.vue//横线连接