vuejs 踩坑及经验总结

问题描述

在使用 v-for repeat 组件时控制台会出现警告：

解决方法

在组件标签上使用 v-for ：

• 加 :key
• 使用 template 标签包裹该组件，再在 template 标签 上使用 v-for。

---

趟坑总结

问题描述

在 Vue data 属性中定义的变量名如果以 “_” 开头，就不能正确的赋值和渲染

问题原因

https://github.com/vuejs/vue/issues/2098

解决方法

变量名不要以 “_” 开头

趟坑总结

问题描述

在我们的前端组件库 dao-option 组件中 中使用 :key 时，如果 v-for 枚举的值是 Object，但是 :key 中的值是简单类型时，dao-options 选出来的值并不在 dao-select 原本储存的 options 中。
大专栏  vuejs 踩坑及经验总结5f-bd9c8b650d7c.png" alt="dao-select-062601"/>

问题原因

在组件中使用 :key 时，如果 v-for 枚举的值是 Object，但是 :key 中的值是简单类型时，当 Object 地址改变，:key 中解析值没变时，组件会被复用，并不会被销毁。例如： dao-style 的 dao-select 中 dao-option 因为上述的描述导致组件没被销毁，最终 dao-options 选出来的值不在 dao-select 原本储存的 options 中。

解决方法

:key 绑定复杂类型

趟坑总结

问题描述

在 Vue Router 中定义路由为 a/:id 形式时，从 a/1 跳转到 a/2 时，不会触发 component 的 created 等方法。

解决方法

1.<router-view :key="$route.path"></router-view>

1. 在 component 中监听 $route.path 的变化，手动触发 created 内的方法。
   P.S. 可以参照 router-link 中的 响应路由参数的变化

---

趟坑总结

问题描述

不能直接 watch subscriptions 中的变量，回调不会执行。

解决方法

要先在 data 中注册该变量