Strange Vue behavior

[louiss0]

I have recently discovered that when you use two script tags the variables imported from one is available inside of another script setup.

Is this intended behavior or not? This picture is to show that you can create variables and functions inside of just a normal script and then access them in script setup.

Is this a bug or a feature? I created components in my normal script then decided to just omit the components option in a project that I was doing but then decided to omit them from the comments tab and they still rendered.

[liulinboyi]

It's a feature. The compiled location of code in <script> will be above code in <script setup>.
Playground Demo

<script lang="ts" setup>
console.log('--------Setup---------')
import { ref, onMounted } from 'vue'

const msg = ref('Hello World!')

onMounted(() => {
  console.log(iRef)
  console.log(test)
})
console.log('--------Setup---------')
</script>

<script lang="ts">
console.log('--------noSetup---------')
import { ref } from 'vue'
const iRef = ref()
const test = 'test'
console.log('--------noSetup---------')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input ref="iRef" v-model="msg">
</template>

After compiled

/* Analyzed bindings: {
  "ref": "setup-const",
  "onMounted": "setup-const",
  "iRef": "setup-ref",
  "test": "setup-const",
  "msg": "setup-ref"
} */
import { defineComponent as _defineComponent } from 'vue'

console.log('--------noSetup---------')
import { ref } from 'vue'
const iRef = ref()
const test = 'test'
console.log('--------noSetup---------')

import { onMounted } from 'vue'


const __sfc__ = /*#__PURE__*/_defineComponent({
  __name: 'App',
  setup(__props, { expose }) {
  expose();

console.log('--------Setup---------')
const msg = ref('Hello World!')

onMounted(() => {
  console.log(iRef)
  console.log(test)
})
console.log('--------Setup---------')

const __returned__ = { iRef, test, msg }
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
return __returned__
}

})
import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, vModelText as _vModelText, withDirectives as _withDirectives, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("h1", null, _toDisplayString($setup.msg), 1 /* TEXT */),
    _withDirectives(_createElementVNode("input", {
      ref: "iRef",
      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.msg) = $event))
    }, null, 512 /* NEED_PATCH */), [
      [_vModelText, $setup.msg]
    ])
  ], 64 /* STABLE_FRAGMENT */))
}
__sfc__.render = render
__sfc__.__file = "App.vue"
export default __sfc__

But i don't suggest use like this.
Document recommendations are as follows.
Document link

<script setup> can be used alongside normal <script>. A normal <script> may be needed in cases where we need to:

• Declare options that cannot be expressed in <script setup>, for example inheritAttrs or custom options enabled via plugins.
• Declaring named exports.
• Run side effects or create objects that should only execute once.