vue开发,100个易犯的错误之cumputed 写了两个,或mounted 写了两个
概述
在代码写的比较长的时候,很容易出现上面写了一次mounted,下面接着又写一遍的情况。这个时候控制台不报错,就很难找到问题的原因。
问题展示
两个computed的案例
报错信息提示len未定义。
两个mounted的案例
list2和current都没被赋值
原因分析
页面中写了两个mounted,下面的把上面的覆盖了,所以导致页面的方法不执行。
完整demo
两个computed的demo
<template>
<div class="wCen">
<h3>len:{{len}}</h3>
<h3>current:{{current}}</h3>
</div>
</template>
<script>
export default {
computed:{
len(){
return this.list.length
}
},
data(){
return {
list:[
1,2,3,4,5
],
active:true
}
},
computed:{
current(){
return this.active
}
},
}
</script>
<style lang="scss" scoped>
.wCen{
width:1200px;
margin: 40px auto;
}
</style>
两个mounted的demo
<template>
<div class="wCen">
<h3>list2:{{list2}}</h3>
<h3>current:{{current}}</h3>
</div>
</template>
<script>
export default {
mounted() {
this.list2 = this.list
this.current = this.active
},
data() {
return {
list: [
1, 2, 3, 4, 5
],
active: true,
current:false,
list2: []
}
},
mounted() {},
}
</script>
<style lang="scss" scoped>
.wCen {
width: 1200px;
margin: 40px auto;
}
</style>
问题避免的方法
可以按照如下的方法来组织页面的中的computed data methods 等各种的位置。
先写外部的,再写计算的,再写执行的,最后写方法。
demo顺序如下,供参考
<template>
<div class="wCen">
</div>
</template>
<script>
export default {
props:{},//外部的
computed:{},//计算属性
data() {// 当前的属性
return {
}
},
mounted() {},// 执行
methods: {},// 方法
}
</script>
<style lang="scss" scoped>
.wCen {
width: 1200px;
margin: 40px auto;
}
</style>