vue3 的 script标签

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

1. data：定义组件的响应式数据。

2. methods：定义组件的方法。

3. computed：定义计算属性。

4. watch：监听响应式数据的变化。

5. props：定义从父组件传递到子组件的属性。

6. mixins：混入外部的代码块，以复用逻辑。

7. components：注册局部组件。

8. directives：定义或注册局部自定义指令。

9. filters：定义局部过滤器。

10. lifecycle hooks：如created、mounted等生命周期钩子。

11. provide/inject：跨级传递数据的API。

12. extends：从其他组件扩展。

13. template（render函数）：定义渲染函数。

14. watchers：定义单独的监听器，用于侦听数据的变化。

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

1. ref 和 reactive：定义响应式数据。
2. methods（函数）：直接在setup中定义函数。
3. computed：定义计算属性。
4. watch 和 watchEffect：监听响应式数据的变化。
5. props：通过setup的参数直接使用props。
6. components：通过导入并在setup中使用或通过模板自动导入组件。
7. directives：直接在模板中使用指令或通过useDirective。
8. filters：通常通过计算属性或方法实现（Vue3不再支持全局过滤器）。
9. lifecycle hooks：如onMounted、onCreated等生命周期钩子。
10. provide/inject：依旧可以通过provide和inject API实现。
11. setup：组件的入口函数，可以在此使用Composition API。
12. 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>

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>

---

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>

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>

---

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>

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>

---

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>

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>

---

5. props vs setup 中的 props

Vue2：props

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

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

Vue3：setup 中的 props

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

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

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

---

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

Vue2：components

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

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

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

Vue3：setup 中的局部组件注册

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

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

---

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>

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>

---

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>

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>