新手使用 Vue 时易忽略而导致的 Bug

这几天，忙完了后端，又赶来写前端了。一个萌新在初次独立使用 Vue 这个框架时，难免会出现很多意外的，我也是在这条路上跌跌撞撞，遇到了很多看似很奇怪的 Bug，却怎么也不知道哪里错了。

路由和导航

在 Vue 中，路由一般是由 Vue-router 实现的，在主页面中（View）存在一个 router-view 的标签，当地址发生改变时，仅仅会在 router-view 中的部分会被重载。

注意： 需要用 router-link 跳转指定路由，否则会使整个页面重载。

比如我，作为一个新手，无意间使用了 a 便签，后期难以发觉是这里出现了问题。

重载动画

router-view 里的内容在跳转前后是支持过渡动画的，只需要在外层包上一个 transition 标签就 ok 了。

html

1<transition name="slide-fade" mode="out-in">
2        <router-view class="body"></router-view>
3</transition>

COPY

定义一个 name 用于写动画样式，mode="out-in" 用于使出现和消失动画同时进行。

Props 和 Methods

在 Props 中 default 字段调用 Methods 中的方法会报错，提示 undefined。原因未知。

在 Vue 生命周期中，Props 和 Methods 都是在 created 之后的。

调用实例方法报错

1TypeError: _vm.someMethods is not a function

COPY

如果已有定义了这个方法还报错，十有八九是没写在methods里，大部分原因是没看清 methods 的作用域导致。小部分原因是在 created 之前调用了该方法。

$refs 无法取到某 DOM 元素

我们知道在模版中某一标签加上 ref 参数，能在后续vm实例中更快的获取该节点。

但是在操作中出现了 undefined, 而 console.log(this.$refs) 显示了这一 DOM 的确在 $refs 对象中，原因可能为在 mounted 之前就调用了该 dom 元素。

根据 Vue 生命周期， $refs 内的元素在 mounted 后才能使用。

在 created() 中如需调用，可以使用 setTimeOut() 的特征来实现。如

javascript

1create() {
2  setTimeOut(() => this.$refs.dom))
3}

COPY

Array 内部元素监听问题

在父子组件传参时，如果父组件使用数组内的元素传参，之后数组内的元素在父组件被直接赋值修改，Vue将无法监听到变化。

导致父组件里的元素看似改变了，但是子组件的值仍然没有改变。

请使用 this.$set(targetArray, index, value) 对 Array 赋值.

其他

还请大佬指正。