vue107-了解beforeMounted和mouted‘特点

 

<template>
  <div class="hello">
    <h3>{{ init }}</h3>
    <button @click="changeName">+1</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  //props是自定义属性 为当前属性定义初始值
  //对象设置默认值
  props: {
    init: {
      default: 9,
      type:Number,
      required:true
    }, 
  },
  beforeCreate(){
    //这边的值是拿不到的
    console.log(this.init)
     console.log(this.count)
  },
  //
  create(){
   //经常发送请求调用数据
   //拿不到dom
  },
  beforeMount(){
    console.log(this.$el)
  },
   mounted(){
    console.log(this.$el)
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    changeName() {
      //报错 this.props是只读的
      this.init++;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
</style>