10分钟看懂VUE代码结构，汇总总结了exprot defalut所有的方法

<!-- 这里是html界面设计,template套着 -->
<template>
  <div>
    <div>
      <button @click="buttonClick">{{button}}</button>
    </div>
    <div>{{ allNum }}</div>
  </div>
</template>

<!-- 这里是js程序核心逻辑设计，script套着 -->
<script>
//import导入.js或者.vue文件
import utils from "@/common/utils";
//写vue的方法
export default {
  name: "tab2", //name只有作为组件选项时起作用,在devTools查看组件位置更方便，不常用
  inject: [], //子组件可以通过inject注入父组件，不常用
  provide() {
    return {}; //父组件provide出去自己，不常用
  },
  mixins: [], //先import .js文件，再在这里面加入，可以共用混入进来js文件里面的方法，不常用
  components: {}, //先import .vue自定义组件，再在这里面加入，就可以在上面的html地方用了
  props: {
    //子组件用来接收父组件传过来的数据
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    //html上定义的属性，在这里赋值，并在方法里面用this.XXX来使用
    return {
      button: 555, //对应着按钮的文字显示 555
      num1: 1, //自定义的全局变量
      num2: 2, //自定义的全局变量
    };
  },
  computed: {
    //动态绑定html上定义的属性 <div>{{ allNum }}</div>，如下，如果num1或者num2变了，allNum也会跟着变,一般用于简单的计算
    allNum() {
      return this.num1 + this.num2;
    },
  },
  watch: {
    //一般用于子组件，检测父组件传过来的值是否发生变成，如果传值过来，之前的值变了，触发自己写的逻辑
    value(val) {
      console.log("val:", val);
      if (val) {
        this.buttonClick();
      }
    },
  },
  methods: {
    //写方法的地方，也是程序大部分逻辑的地方，在其他地方引用需要用 this.方法
    buttonClick() {
      //引用前面import导入进来utils.js文件里面的getDel方法
      this.button = utils.getDel(this.button);
      //把子组件的值传给父组件
      this.$emit("value2", this.button);
      //改变allNum显示的值
      this.num1++;
    },
  },
  //下面就是.vue生命周期的八个方法，一般只用到渲染完成后的mounted方法
  beforeCreate() {
  	//不常用
    //实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
  },
  created() {
    //常用
    //数据对象 data 已存在，可以调用 methods 中的方法，操作data中的数据，
    //但 dom 未生成，$el 未存在
  },
  beforeMount() {
    //不常用
    //vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，
    //但是尚未把模板渲染到页面中。data.message 未替换。
  },
  mounted() {
    //最常用的，基本每个vue文件都会用到这个
    //vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，
    //用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，
    //实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了
  },
  beforeUpdate() {
    //不常用
    //当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
  },
  updated() {
    //不常用
    //当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
  },
  beforeDestroy() {
    //不常用
    //组件销毁之前调用 ，在这一步，实例仍然完全可用。
  },
  destroyed() {
    //不常用
    //组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，
    //但 dom 结构依然存在。
  },
};
</script>
<!-- 这里是css界面组件美化设计，style套着 -->
<style scoped>
</style>