VUE组件结构详解

一个vue页面主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style

<script>

export default {

  name: "App",

  data() {//数据定义 函数方法，返回数据的方式

    return {};

  },

  methods: {

    // 组件的方法

  },

  watch: {

    // watch监听方法，擅长处理的场景：一个数据影响多个数据 
watch是去监听一个值的变化，然后执行相对应的函数。

  },

  computed: {

    // computed擅长处理的场景：一个数据受多个数据影响 
computed是计算属性，也就是依赖其它的属性计算所得出最后的值

  },

  beforeCreate () {

    // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

  },

  created () {

    // （在实例创建完成后被立即调用。实例已经创建完成之后被调用。
在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，
 watch/event 事件回调。然而，挂载阶段还没开始，
$el 属性目前不可见。初始化数据请求写这里

  },

  beforeMount () {

    // 在挂载开始之前被调用：相关的 render 函数首次被调用。

  },

  mounted () {//页面初始化方法

    // 编译好的HTML挂载到页面完成后执行的事件钩子
 初始化数据除非有依赖dom的放在mounted()里面，加个nextTick

    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

    // 此钩