refactor(runtime-core): add @internal for instance.proxy #1849
Conversation
|
How to access the component instance in setup? Current usage: import { getCurrentInstance } from "vue";
setup() {
const instance = getCurrentInstance();
instance.proxy. // == vm
} |
|
I still think we should revert it, it's especially useful in third-party libraries such as vue-test-utils-next, also very commonly used in component libraries. |
|
So,How to access the component Public instance in setup for now? |
Agreed. |
BREAKING CHANGE: `onBeforeRouteLeave` and `onBeforeRouteUpdate` used to have access to the component instance through `instance.proxy` but given that: 1. It has been marked as `internal` (vuejs/core#1849) 2. When using `setup`, all variables are accessible on the scope (and should be accessed that way because the code minimizes better) It has been removed to prevent wrong usage and lighten Vue Router
BREAKING CHANGE: `onBeforeRouteLeave` and `onBeforeRouteUpdate` used to
have access to the component instance through `instance.proxy` but given
that:
1. It has been marked as `internal` (vuejs/core#1849)
2. When using `setup`, all variables are accessible on the scope (and
should be accessed that way because the code minimizes better)
It has been removed to prevent wrong usage and lighten Vue Router
|
Why are people trying to get |
|
This is our use case: expose some apis for component user // Form.jsx
export default {
name: 'MyForm',
setup() {
const vm = getCurrentInstance().proxy;
vm.reset = () => {
// reset form
};
return () => <div class="form"></div>
},
};<!-- App.vue -->
<template>
<MyForm ref="form" />
</template>
<script>
export default {
mounted() {
this.$refs.form.reset();
}
}
</script> |
|
@chenjiahan You can achieve your purpose like this: // Form.jsx
export default {
name: 'MyForm',
methods: {
reset() {
// reset form
}
},
setup() {
return () => <div class="form"></div>
},
}; |
|
@Picknight no, we can't. // Form.jsx
export default {
name: 'MyForm',
setup() {
const vm = getCurrentInstance().proxy;
const text = ref('foo');
vm.reset = () => {
// reset form
text.value = '';
};
return () => <div class="form">{text.value}</div>
},
}; |
|
Ok, so the team actually is discussing an API to explicitly expose public methods, something like import { expose } from 'vue'
export default {
setup() {
expose({
reset() {
// ...
}
})
}
}Either way I don't think it should be done by messing directly with the internal instance. |
No description provided.