vue.js - 如何理解“与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行”？
官网上的这句话
与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行
不太理解，普通的<script>不也是在组件实例被创建的时候执行吗？
共有2个答案
对于组件：
<script setup>
// script setup
import { ref } from 'vue'
const count = ref(0)
</script>
<script>
// script
const CompName = 'MyComp'
</script>
<template>
<div>
<p>{{ CompName }}</p>
<p>count: {{ count }}</p>
<button @click="count++">click me</button>
</div>
</template>将被编译为：
import { ref } from "vue";
// script
const CompName = "MyComp";
const __sfc__ = {
__name: "Comp",
setup(__props, { expose: __expose }) {
__expose();
// script setup
const count = ref(0);
const __returned__ = { CompName, count, ref };
Object.defineProperty(__returned__, "__isScriptSetup", {
enumerable: false,
value: true,
});
return __returned__;
},
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
/** 渲染函数 */
}
__sfc__.render = render;
__sfc__.__file = "src/Comp.vue";
export default __sfc__;script 部分在模块顶层，将在模块第一次导入时执行。而 script setup 部分被编译为 setup 函数，将在每次组件创建时被 vue 调用。
拿基础的html文件来举例子就很好理解
普通的 <script> 只在组件被首次引入的时候执行一次
这段代码在加载好网页后,只执行一次<body></body> <script> var value = 1 console.log(value) </script><script setup> 中的代码会在每次组件实例被创建的时候执行
这段代码在每次点击创建组件按钮的时候都会运行<body> <button onClick="createComponent">创建组件</button> </body> <script> function createComponent() { var value = 1 console.log(value) } </script>
-
本文向大家介绍iOS实现代码只执行一次，包括了iOS实现代码只执行一次的使用技巧和注意事项，需要的朋友参考一下 iOS实现代码只让执行一次
-
问题内容： 到目前为止，我已经看到了这些问题的答案2，）建议使用GCD的这样： 输出： 等一下 是一个变量，因此我可以轻松做到这一点： 输出： 所以，是没有用的，如果我们我可以改变的价值！转换成常量并非易事，因为它需要类型化。 那么我们应该放弃Swift吗？有没有一种安全的方法可以只执行一次代码？ 问题答案： 由闭包初始化的静态属性是延迟运行的，最多只能运行一次，因此尽管被调用了两次，但它仅打印一
-
问题内容： 我有一个从Qt Designer派生的简单窗口 （design.py） ，其中包含三个单选按钮： 并且我添加了此代码，以便监视选中了哪个单选按钮。 我注意到，如果选中radioButton1，它似乎可以正常工作，但是如果选中radiobutton2或radiobutton3，则将检查消息打印两次。 另一方面，如果我将每个信号都连接到不同的功能，例如： 然后它会按预期工作。 因此，我想将
-
我正在学习angularjs，作为一个测试项目，我正在轮询一个返回活动进程列表（它们的pid）并显示这些进程的服务器。 客户端代码如下所示： 这适用于Firefox和Chrome，但不太适用于Internet Explorer 11。 所有浏览器每秒都执行ReloadData方法，但IE11实际上并不从服务器获取流程数据。Firefox和Chrome确实每秒都会获取数据。我也可以在服务器的输出中看
-
问题内容： 我正在编写一个Django中间件类，该类只想在启动时执行一次，以初始化一些其他人工代码。我遵循了sdolan 在此处发布的非常好的解决方案，但是“ Hello”消息两次输出到终端。例如 在我的Django设置文件中，该类已包含在列表中。 但是当我使用runserver运行Django并请求页面时，我进入了终端 有什么想法为什么要打印两次“ Hello world”？谢谢。 问题答案：
-
我写了一个maven插件，我正在一些项目中使用它。在第一个项目中，它只有一次执行，我可以直接用 在第二个项目中，插件有多个执行，当我尝试上面的命令时，我最终失败了，因为插件尝试使用空参数执行。 请注意，在这两种情况下，插件在作为流程资源阶段的一部分执行时都可以正常工作。只有当我试图执行插件目标时，它才会失败。有人能帮我理解为什么第二个示例尝试使用空白参数执行吗？ 第一个项目（一次执行-工程罚款）：
-
问题内容： 我正在编写一个Django中间件类，该类只想在启动时执行一次，以初始化一些其他人工代码。我遵循了sdolan 在此处发布的非常好的解决方案，但是“ Hello”消息两次输出到终端。例如 在我的Django设置文件中，该类已包含在列表中。 但是当我使用runserver运行Django并请求页面时，我进入了终端 有什么想法为什么要打印两次“ Hello world”？谢谢。 问题答案：
-
用的是vue-element-admin架子. 点击一个菜单连接后打开一个列表(A.create), 点击列表中的一个项(B.create)打开B页面. 再关闭B页面, 此时再回到A, 此时又执行了A页面的create方法 开发时以上操作不会触发A页面的create, 现在莫名的都create了