第一次使用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>