#第一次使用Vue使用过程中遇到的一些小坑

第一次使用Vue使用过程中遇到的一些小坑

后端返回Long 类型ID精度丢失

产生原因：后端通过雪花算法生成ID 返回给前端 后端返回long型数据，但是前端展示时数据不一致。比如，后端返回的数据是1475797674679549851，但前端显示出来却成了1475797674679550000，后面几位全变成了0，精度丢失了。

原因：

Java long类型的的数字超出了Javascript的处理范围；

解决办法

后端将long类型数据转为字符串返回给前端；
第一种
加注解：ize(using = ToStringSerializer.class)
第二种：
配置文件全局更改：spring.jackson.generator.write-numbers-as-strings=true

vue方法种的执行顺序问题 导致我想要的页面效果没有出现

原因 VUE中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制。

以下方法中都带有promise函数或异步调用。

	initUserData() {
	  this.getPsCountryList() // 1 获取国家列表stateOptions，方法内同步
	  this.getTimeZone() // 2 获取时区timezones，方法内同步
	  this.getUserInfo() // 3 获取用户信息
	}

在实际运行中，三个方法的执行顺序是1-2-3，但是方法3始终不能获取到stateOptions和timezones

背后的调用顺序是1-2-3，但是，方法的执行时间并没有严格控制。

如果想要做到方法调用和执行是同步的，可以使用async和await修饰符。

async initUserData() {
  await this.getPsCountryList() // 1 获取国家列表stateOptions，方法内同步
  await this.getTimeZone() // 2 获取时区timezones，方法内同步
  await this.getUserInfo() // 3 获取用户信息
}

Vue中父子组件的生命周期

在使用过程中 发现倒计时组件中的时间没有显示 在Created方法中初始化了子组件的时间 结果倒计时组件显示NAN

原因：加载渲染过程

　　父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

　　父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

　　父beforeUpdate->父updated

销毁过程

　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

父组件调用子组件方法

使用ref

//父组件
<template>
  <div class="home">
    <HelloWorld ref="mychild"></HelloWorld>
    <div @click="clickParent">click me</div>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

//子组件
<template>
  <div class="hello">
    <h1>我是HelloWorld组件</h1>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    created() {

    },
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

子组件调用父组件方法

子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>