Vue 组件框架

<script>
export default {
  name: "cominfo",
  data() {
    return {
      msg: "12345"
    };
  },
  props: {},
  components: {},
  methods: {
    changebtn() {
      this.msg = "6666666";
      this.changeStatus;
    }
  },
  computed: {
    //计算属性
    getData() {
      console.log("计算里面的方法");
    },
    changeStatus() {
      console.log("在事件执行的方法里面调用");
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    //在挂载完成之后去调用
    //computed 里面的方法在调用的时候不需要添加括号执行
    this.getData;
  },
  watch: {
    //监听属性和方法变化 或者是组件上的数据变化
    //watch里面写的监听方法和变量同名 只有这样才能监听到变量的一个变化
    msg(a, b) {
      console.log(a, b); //a为修改之后的数据 b为修改之前的变量
    }
  },
  beforeUpdate() {},
  update() {},
  beforeDestory() {},
  destroyed() {}
};
</script>

组件的八个生命周期

<script>
export default {
  name: "lifeinfo",
  //八个钩子函数 对应组件的生命周期
  beforeCreate() {
    //该组件初始化之前
    console.log("初始化之前");
  },
  created() {
    //该组件初始化完成之后
    console.log("初始化完成之后");
  },
  data() {
    //数据源
    return {
      msg: "123"
    };
  },
  methods: {
    changeData() {
      this.msg = "修改";
    }
  },
  beforeMount() {
    //该组件挂载之前
    console.log("该组件挂载之前");
  },
  mounted() {
    //该组件挂载完成
    console.log("该组件挂载完成");
  },
  beforeUpdate() {
    //该组件修改之前
    console.log("该组件修改之前");
  },
  updated() {
    //该组件修改之后
    console.log("修改之后");
  },
  beforeDestory() {
    //该组件卸载之前
    console.log("卸载之前");
  },
  destoryed() {
    //该组件卸载之后、
    console.log("卸载之后");
  }
};
</script>