记录低级错误

在组件中通过计算属性检测Vuex的数据

错误原因:没有通过state数据属性去获取其中的值,而是直接用vuex对象去取值

computed:{
    courses(){
      // return this.$store.course  错误方式
      return this.$store.state.course  // 正确方式
      }
  }

被遗漏的vue声明周期

现象

template

<div class="hello">
    <p>{{ msg }}</p>
    <input type="text" name="btnSetNumber" v-model="msg">
</div>

script

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  beforeCreate(){console.log('beforeCreate',this.msg)},
  created(){console.log('created',this.msg)},
  beforeMount(){console.log('beforeMount',this.msg)},
  mounted(){console.log('mounted',this.msg)},
  beforeUpdate(){console.log('beforeUpdate',this.msg)},
  updated(){console.log('updated',this.msg)},
  beforeDestroy(){console.log('beforeDestroy',this.msg)},
  destroyed(){console.log('destroyed',this.msg)}

加载页面时

beforeCreate undefined
created Welcome to Your Vue.js App
beforeMount Welcome to Your Vue.js App
mounted Welcome to Your Vue.js App

修改input框内容时

beforeUpdate Welcome to Your Vue.js Ap
updated Welcome to Your Vue.js Ap

切换组件时

beforeDestroy Welcome to Your Vue.js Ap
destroyed Welcome to Your Vue.js Ap

图解