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

路由和导航

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

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

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

重载动画

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

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

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

Props 和 Methods

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

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

调用实例方法报错

TypeError: _vm.someMethods is not a function

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

$refs 无法取到某 DOM 元素

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

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

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

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


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

Array 内部元素监听问题

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

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

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

其他

还请大佬指正。