vue2和vue3一时转不过来

以下是 Vue2 和 Vue3 在核心语法和功能上的主要区别，结合具体代码示例说明：

---

一、响应式数据定义方式

1. ​​数据声明位置​​

// Vue2 选项式 API
export default {
  data() {
    return {
      name: 'iwen',
      list: []
    }
  }
}

// Vue3 组合式 API
import { ref, reactive } from 'vue'
export default {
  setup() {
    const name = ref("iwen") // 基本类型用 ref
    const state = reactive({   // 复杂类型用 reactive
      list: []
    })
    return { name, state }
  }
}

区别：

• Vue2 通过 data() 函数集中声明响应式数据
• Vue3 在 setup() 中通过 ref/reactive 分散声明，支持按需响应式

---

二、方法定义与绑定

1. ​​方法定义位置​​

// Vue2
export default {
  methods: {
    fetchData() {
      this.list.push('new item')
    }
  }
}

// Vue3
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const fetchData = () => {
      state.value.list.push('new item') // 需显式访问 .value
    }
    return { fetchData }
  }
})

区别：

• Vue2 方法定义在 methods 对象中，自动绑定 this
• Vue3 方法直接定义在 setup() 中，需手动处理响应式数据

---

三、生命周期钩子

1. ​​钩子名称与调用时机​​

// Vue2
export default {
  created() { console.log('created') },
  mounted() { console.log('mounted') }
}

// Vue3
import { onMounted, onBeforeMount } from 'vue'
export default {
  setup() {
    onBeforeMount(() => console.log('beforeMount')) 
    onMounted(() => console.log('mounted')) 
  }
}

区别：

• Vue2 生命周期直接作为选项
• Vue3 需从 vue 导入钩子函数，在 setup() 中调用

---

四、组件通信

1. ​​父子组件通信​​

// Vue2 父组件
<Child :msg="parentMsg" @child-event="handleEvent" />

// Vue2 子组件
this.$emit('child-event', data)

// Vue3 父组件
<Child :msg="parentMsg" @child-event="handleEvent" />

// Vue3 子组件
import { defineEmits } from 'vue'
const emit = defineEmits()
emit('child-event', data)

区别：

• Vue3 需通过 defineEmits 显式声明事件
• 移除了 $on/$off 等实例方法

---

五、跨层级通信

1. ​​Provide/Inject​​

// Vue2（需通过插件或全局事件）
// 父组件
this.$root.$emit('global-event')

// Vue3
// 父组件
import { provide } from 'vue'
provide('theme', 'dark')

// 子组件
import { inject } from 'vue'
const theme = inject('theme')

区别：

• Vue3 的 provide/inject 可在任意层级使用
• Vue2 需依赖事件总线或 Vuex

---

六、模板结构

1. ​​根节点限制​​

<!-- Vue2 必须单根节点 -->
<div>
  <h1>Title</h1>
  <p>Content</p>
</div>

<!-- Vue3 支持多根节点 -->
<h1>Title</h1>
<p>Content</p>

区别：

• Vue3 允许模板直接返回多个根节点（Fragment）
• 减少不必要的 DOM 包裹层

---

七、类型支持

1. ​​TypeScript 集成​​

// Vue2 需额外配置
// data.ts
interface State {
  count: number
}
export default {
  data(): State { ... }
}

// Vue3 原生支持
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const count = ref<number>(0) // 类型注解
    return { count }
  }
})

区别：

• Vue3 从底层重构了类型系统，提供更好的类型推断

---

八、性能优化

1. ​​静态提升​​

<!-- Vue2 -->
<div>{{ staticText }}</div> <!-- 每次渲染都重新计算 -->
{{ dynamicText }}

// Vue3 编译后
const staticText = "Static Content" // 提升为常量
return () => h('div', staticText)

区别：

• Vue3 通过编译器优化静态内容，减少虚拟 DOM 对比开销

---

九、其他重要区别

​​特性​​	​​Vue2​​	​​Vue3​​
​​过滤器​​	支持 `{{ msg	filter }}`
​​指令修饰符​​	.sync, .once 等	通过参数化指令实现（如 v-model:title）
​​全局 API​​	Vue.component() 等全局方法	通过 app.component() 实例化调用

---