vue3.x @emit触发事件，如何保证执行顺序
vue3.x @Emit执行顺序问题
在vue2.x中
写v-on v-emit
// 父组件
<div @hello="sayHello"></div>
export default {
method: {
sayHello() {
console.log('hello')
}
}
}
// 子组件
export default {
methods: {
sayWorld() {
console.log('hi')
this.$emit('hello')
console.log('world')
}
}
}
触发事件，输出结果为hi hello world
在vue.3x中
// 子组件
@Component
export default class World extend Vue{
@ Emit()
sayWorld():void {
console.log('hi')
console.log('world')
}
}
触发事件，输出结果为hello hi world
想了解一下@Emit如何保证执行顺序？也就是在3.x中如何保证输出hi hello world
16 回复
- vue3.0还没出，你这是vue2.x的ts写法
- 没用过ts写vue，你试试这样可不可以
@Emit('hello')
hello() {};
sayWorld(){
console.log('hi');
this.hello();
console.log('world');
}
@Rabbitzzc 按逻辑来的话，我上面那种写法应该是可以的 6月4号的VueConf： 3.x的写法是function-based, 虽然 2.x的 class-api 也能兼容，但是class-api ts的类型推导难以支持，用ts写 function-based更友好一点
不建议这么快入坑vue3.x的函数式编程，目前还没有相关的文档，而且源代码也还没释放。vue3.x基本上是大改以前的风格变成函数式api。
不要谈兼容不兼容的，未来2.x终将变成3.x
建议多花时间在react上会更快上手，到时用使转vue3.x也很快。如果没什么意外，可以考虑vue入坑react。
看了一下vue-Conf 尤大的视频 3.x的设计目标在于
- 更小更快(比如使用Proxy来做数据劫持绑定， VDOM的重写)
- 使用ts
- 开放更多底层功能
- APi设计统一性
同时也提到了放弃class api的原因：类型推导存在一些问题，ui组件更多是组合，而不是继承 也取消了装饰器：比如现在比较火的decorators不稳定，风险大 取而代之的是function-based， 因为：
- 支持ts
- 逻辑复用
- 代码更容易压缩
谢谢各位大佬的答案😁
