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)
希望解答一下，谢谢🙂🙂
这个问题真的没人解答嘛
不会
🙄help
- vue3.0还没出，你这是vue2.x的ts写法
- 没用过ts写vue，你试试这样可不可以
@Emit('hello')
hello() {};
sayWorld(){
console.log('hi');
this.hello();
console.log('world');
}
@kgdfj 3.x都是ts写的，应该是下半年出来，基本上也是这种写法了
sayhi是父组件的处理 所以才好奇@Emit如何保证函数执行顺序 纯js写的话，毕竟可以按照顺序去处理
@Rabbitzzc 按逻辑来的话，我上面那种写法应该是可以的 6月4号的VueConf： 3.x的写法是function-based, 虽然 2.x的 class-api 也能兼容，但是class-api ts的类型推导难以支持，用ts写 function-based更友好一点
@Rabbitzzc 看官方了吗，3.x 不会有装饰器API， 而且vue2.x支持ts本来就不完善。
不建议这么快入坑vue3.x的函数式编程，目前还没有相关的文档，而且源代码也还没释放。vue3.x基本上是大改以前的风格变成函数式api。
不要谈兼容不兼容的，未来2.x终将变成3.x
建议多花时间在react上会更快上手，到时用使转vue3.x也很快。如果没什么意外，可以考虑vue入坑react。
@xjh22222228 没仔细看，上次看到一个教程，突然想到的，静等vue3.x
v3 不会有 class api。
看了一下vue-Conf 尤大的视频 3.x的设计目标在于
- 更小更快(比如使用Proxy来做数据劫持绑定， VDOM的重写)
- 使用ts
- 开放更多底层功能
- APi设计统一性
同时也提到了放弃class api的原因：类型推导存在一些问题，ui组件更多是组合，而不是继承 也取消了装饰器：比如现在比较火的decorators不稳定，风险大 取而代之的是function-based， 因为：
- 支持ts
- 逻辑复用
- 代码更容易压缩
谢谢各位大佬的答案😁
@bs32g1038 我也很同意你的观点，现在就这么做了
@Liklei 进阶react了么？2333
Vue3是对ts支持更友好, 而不是只能用ts写