Vue全家桶
Vue3

vue3 的 script标签

# vue3 的 script标签

# 一、Vue2 中 `script` 标签内能定义的内容

data：定义组件的响应式数据。
methods：定义组件的方法。
computed：定义计算属性。
watch：监听响应式数据的变化。
props：定义从父组件传递到子组件的属性。
mixins：混入外部的代码块，以复用逻辑。
components：注册局部组件。
directives：定义或注册局部自定义指令。
filters：定义局部过滤器。
lifecycle hooks：如created、mounted等生命周期钩子。
provide/inject：跨级传递数据的API。
extends：从其他组件扩展。
template（render函数）：定义渲染函数。
watchers：定义单独的监听器，用于侦听数据的变化。

# 二、Vue3 中 `script` 标签内能定义的内容

ref 和 reactive：定义响应式数据。
methods（函数）：直接在setup中定义函数。
computed：定义计算属性。
watch 和 watchEffect：监听响应式数据的变化。
props：通过setup的参数直接使用props。
components：通过导入并在setup中使用或通过模板自动导入组件。
directives：直接在模板中使用指令或通过useDirective。
filters：通常通过计算属性或方法实现（Vue3不再支持全局过滤器）。
lifecycle hooks：如onMounted、onCreated等生命周期钩子。
provide/inject：依旧可以通过provide和inject API实现。
setup：组件的入口函数，可以在此使用Composition API。
template（或 JSX/TSX）：通常仍然使用单文件组件的模板部分。

# 三、逐项对比与详细实现

# 1. `data` vs `ref` 和 `reactive`

# Vue2：`data`

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>User: {{ user.name }} ({{ user.age }})</p>
  </div>
</template>

<script>
export default {
  // `data`选项用于定义响应式数据
  data() {
    return {
      count: 0,  // 基本类型的响应式数据
      user: {    // 复杂对象的响应式数据
        name: 'Alice',
        age: 25
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Vue3：`ref` 和 `reactive`

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>User: {{ user.name }} ({{ user.age }})</p>
  </div>
</template>

<script setup>
// 使用 `ref` 定义基本类型的响应式数据
import { ref, reactive } from 'vue';

const count = ref(0);

// 使用 `reactive` 定义复杂对象的响应式数据
const user = reactive({
  name: 'Alice',
  age: 25
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 2. `methods` vs `setup` 中的函数

# Vue2：`methods`

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0  // 响应式计数器
    };
  },
  methods: {
    // 定义一个方法来递增计数器
    increment() {
      this.count++;
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Vue3：`setup` 中的函数

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
// 使用 `ref` 定义响应式计数器
import { ref } from 'vue';

const count = ref(0);

// 定义一个方法来递增计数器
const increment = () => {
  count.value++;
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3. `computed` vs `computed`

# Vue2：`computed`

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0  // 响应式计数器
    };
  },
  computed: {
    // 定义一个计算属性，返回计数器的两倍
    doubleCount() {
      return this.count * 2;
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Vue3：`computed`

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script setup>
// 使用 `ref` 定义响应式计数器
import { ref, computed } from 'vue';

const count = ref(0);

// 定义一个计算属性，返回计数器的两倍
const doubleCount = computed(() => count.value * 2);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 4. `watch` vs `watch`

# Vue2：`watch`

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0  // 响应式计数器
    };
  },
  watch: {
    // 监听 `count` 的变化并执行回调
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Vue3：`watch`

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script setup>
// 使用 `ref` 定义响应式计数器
import { ref, watch } from 'vue';

const count = ref(0);

// 监听 `count` 的变化并执行回调
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 5. `props` vs `setup` 中的 `props`

# Vue2：`props`

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  // 定义 `props`，接收父组件传递的值
  props: {
    title: String
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Vue3：`setup` 中的 `props`

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup>
// 通过 `setup` 的参数直接接收 `props`
import { defineProps } from 'vue';

const props = defineProps({
  title: String
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 6. `components` vs `setup` 中的局部组件注册

# Vue2：`components`

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  // 使用 `components` 选项注册局部组件
  components: {
    ChildComponent
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Vue3：`setup` 中的局部组件注册

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script setup>
// 直接导入并使用子组件，无需显式注册
import ChildComponent from './ChildComponent.vue';
</script>

1
2
3
4
5
6
7
8
9
10

# 7. `lifecycle hooks` vs `setup` 中的生命周期钩子

# Vue2：`lifecycle hooks`

<template>
  <div>
    <p>Check the console for lifecycle logs.</p>
  </div>
</template>

<script>
export default {
  // `created` 生命周期钩子
  created() {
    console.log('Component created');
  },
  // `mounted` 生命周期钩子
  mounted() {
    console.log('Component mounted');
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Vue3：`setup` 中的生命周期钩子

<template>
  <div>
    <p>Check the console for lifecycle logs.</p>
  </div>
</template>

<script setup>
// 使用生命周期钩子
import { onMounted } from 'vue';

// `onMounted` 生命周期钩子
onMounted(() => {
  console.log('Component mounted');
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 8. `provide/inject` vs `setup` 中的 `provide/inject`

# Vue2：`provide/inject`

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello from parent'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Vue3：`setup` 中的 `provide/inject`

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script setup>
// 使用 `provide` 提供数据
import { provide } from 'vue';

provide('message', 'Hello from parent');
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
// 使用 `inject` 接收数据
import { inject } from 'vue';

const message = inject('message');
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

编辑此页

上次更新: 2025/01/30, 23:55:43

← Vue3中的data数据 setup函数中执行顺序→

vue3 的 script标签

# vue3 的 script标签

# 一、Vue2 中 script 标签内能定义的内容

# 二、Vue3 中 script 标签内能定义的内容

# 三、逐项对比与详细实现

# 1. data vs ref 和 reactive

# Vue2：data

# Vue3：ref 和 reactive

# 2. methods vs setup 中的函数

# Vue2：methods

# Vue3：setup 中的函数

# 3. computed vs computed

# Vue2：computed

# Vue3：computed

# 4. watch vs watch

# Vue2：watch

# Vue3：watch

# 5. props vs setup 中的 props

# Vue2：props

# Vue3：setup 中的 props

# 6. components vs setup 中的局部组件注册

# Vue2：components

# Vue3：setup 中的局部组件注册

# 7. lifecycle hooks vs setup 中的生命周期钩子

# Vue2：lifecycle hooks

# Vue3：setup 中的生命周期钩子

# 8. provide/inject vs setup 中的 provide/inject

# Vue2：provide/inject

# Vue3：setup 中的 provide/inject

# 一、Vue2 中 `script` 标签内能定义的内容

# 二、Vue3 中 `script` 标签内能定义的内容

# 1. `data` vs `ref` 和 `reactive`

# Vue2：`data`

# Vue3：`ref` 和 `reactive`

# 2. `methods` vs `setup` 中的函数

# Vue2：`methods`

# Vue3：`setup` 中的函数

# 3. `computed` vs `computed`

# Vue2：`computed`

# Vue3：`computed`

# 4. `watch` vs `watch`

# Vue2：`watch`

# Vue3：`watch`

# 5. `props` vs `setup` 中的 `props`

# Vue2：`props`

# Vue3：`setup` 中的 `props`

# 6. `components` vs `setup` 中的局部组件注册

# Vue2：`components`

# Vue3：`setup` 中的局部组件注册

# 7. `lifecycle hooks` vs `setup` 中的生命周期钩子

# Vue2：`lifecycle hooks`

# Vue3：`setup` 中的生命周期钩子

# 8. `provide/inject` vs `setup` 中的 `provide/inject`

# Vue2：`provide/inject`

# Vue3：`setup` 中的 `provide/inject`