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

路由和导航

在 Vue 中,路由一般是由 Vue-router 实现的,在主页面中(View)存在一个 router-view 的标签,当地址发生改变时,仅仅会在 router-view 中的部分会被重载。
注意: 需要用 router-link 跳转指定路由,否则会使整个页面重载。
比如我,作为一个新手,无意间使用了 a 便签,后期难以发觉是这里出现了问题。

重载动画

router-view 里的内容在跳转前后是支持过渡动画的,只需要在外层包上一个 transition 标签就 ok 了。
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() 的特征来实现。如
1create() {
2  setTimeOut(() => this.$refs.dom))
3}
Copy

Array 内部元素监听问题

在父子组件传参时,如果父组件使用数组内的元素传参,之后数组内的元素在父组件被直接赋值修改,Vue将无法监听到变化。
导致父组件里的元素看似改变了,但是子组件的值仍然没有改变。
请使用 this.$set(targetArray, index, value) 对 Array 赋值.

其他

还请大佬指正。

亲亲留个评论再走呗

正在加载评论区...