feat(api): introduce inspectSetupState

[alexzhang1030]

closes #376

This is very useful when using defineComponent with setup returning the render function.

const Component = defineComponent({
  setup() {
    const name = ref('foo')
    inspectSetupState({
      name,
    })
    return h('div', name.value)
  },
})

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	0b6464b
🔍 Latest deploy log	https://app.netlify.com/sites/vue-devtools-docs/deploys/66d7bd95a1973000086a777b

[webfansplz]

I’m not sure about it. I don't think most users will use it manually to inspect it. If we can't handle it automatically in devtools at the moment, I think the better solution is to expose some possibilities in vue core.
But it might work as a helper to help some developers who want this feature, I'll check it out later!

[alexzhang1030]

I’m sure about it. I don't think most users will use it manually to inspect it. If we can't handle it automatically in devtools at the moment, I think the better solution is to expose some possibilities in vue core. But it might work as a helper to help some developers who want this feature, I'll check it out later!

If the setup returns a render function, which will be a closure, it becomes challenging for vue/core to register the setup state without static analysis. An existing PR, #5383, aims to add a debug API. However, I believe it would be more appropriate to integrate this function into vue-devtools.

[pkg-pr-new]

Open in Stackblitz

@vue/devtools-core

pnpm add https://pkg.pr.new/@vue/devtools-core@450

@vue/devtools

pnpm add https://pkg.pr.new/@vue/devtools@450

@vue/devtools-api

pnpm add https://pkg.pr.new/@vue/devtools-api@450

@vue/devtools-kit

pnpm add https://pkg.pr.new/@vue/devtools-kit@450

vite-plugin-vue-devtools

pnpm add https://pkg.pr.new/vite-plugin-vue-devtools@450

commit: 0b6464b