浅谈vue3与vue2的区别

**Vue3 与 Vue2 的区别**

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。从 Vue2 到 Vue3，框架有了许多重大变化。下面我们将浅谈这些变化。

### **1. Composition API**

Composition API 是 Vue3 中的一个新特性，它允许你更灵活地组织代码，并且可以避免一些在 Vue2 中使用的选项式 API 的局限性。

**Vue2 中的选项式 API**

javascriptexport default {
 data() {
 return { count:0 }
 },
 methods: {
 increment() {
 this.count++
 }
 }
}

**Vue3 中的 Composition API**

javascriptimport { ref, onMounted } from 'vue'

export default {
 setup() {
 const count = ref(0)

 function increment() {
 count.value++
 }

 onMounted(() => {
 console.log('组件已挂载')
 })

 return { count, increment }
 }
}

在 Vue3 中，我们使用 `setup` 函数来定义组件的逻辑，而不是像 Vue2 中那样使用选项式 API。我们还可以使用 `ref` 来创建响应式数据，并且可以使用 `onMounted` 生命周期钩子来执行一些初始化操作。

### **2. Teleport**

Teleport 是一个新特性，允许你将组件的内容渲染到 DOM 的任意位置，而不是像 Vue2 中那样只能在组件本身的容器中渲染。

**Vue2 中的例子**

html<template>
 <div>
 <p>我是 Teleport</p>
 </div>
</template>

<script>
export default {
 mounted() {
 console.log('组件已挂载')
 }
}
</script>

在 Vue2 中，我们需要将组件的内容渲染到 DOM 的任意位置时，需要使用 `v-if` 或 `v-show` 来控制组件的显示和隐藏。

**Vue3 中的 Teleport**

html<template>
 <div id="app">
 <teleport to="#target">
 <p>我是 Teleport</p>
 </teleport>
 </div>

 <div id="target"></div>
</template>

<script>
export default {
 mounted() {
 console.log('组件已挂载')
 }
}
</script>

在 Vue3 中，我们可以使用 `Teleport` 组件来将组件的内容渲染到 DOM 的任意位置。

### **3. Fragments**

Fragments 是一个新特性，允许你创建一个空白的组件，而不是像 Vue2 中那样需要使用 `v-if` 或 `v-show` 来控制组件的显示和隐藏。

**Vue2 中的例子**

html<template>
 <div v-if="show">
 <p>我是 Fragments</p>
 </div>
</template>

<script>
export default {
 data() {
 return { show: true }
 }
}
</script>

在 Vue2 中，我们需要使用 `v-if` 或 `v-show` 来控制组件的显示和隐藏。

**Vue3 中的 Fragments**

html<template>
 <teleport to="#target">
 <p>我是 Fragments</p>
 </teleport>
</template>

<script>
export default {
 mounted() {
 console.log('组件已挂载')
 }
}
</script>

在 Vue3 中，我们可以使用 `Fragments` 组件来创建一个空白的组件。

### **4. Suspense**

Suspense 是一个新特性，允许你在组件中显示一个加载动画，而不是像 Vue2 中那样需要使用 `v-if` 或 `v-show` 来控制组件的显示和隐藏。

**Vue2 中的例子**

html<template>
 <div v-if="loading">
 <p>正在加载...</p>
 </div>

 <div v-else>
 <p>我是 Suspense</p>
 </div>
</template>

<script>
export default {
 data() {
 return { loading: true }
 },
 mounted() {
 setTimeout(() => {
 this.loading = false },2000)
 }
}
</script>

在 Vue2 中，我们需要使用 `v-if` 或 `v-show` 来控制组件的显示和隐藏。

**Vue3 中的 Suspense**

html<template>
 <div>
 <Suspense>
 <template #default>
 <p>我是 Suspense</p>
 </template>

 <template #fallback>
 <p>正在加载...</p>
 </template>
 </Suspense>
 </div>
</template>

<script>
export default {
 mounted() {
 setTimeout(() => {
 console.log('组件已挂载')
 },2000)
 }
}
</script>

在 Vue3 中，我们可以使用 `Suspense` 组件来显示一个加载动画。

### **5. Proxy**

Proxy 是一个新特性，允许你创建一个代理对象，而不是像 Vue2 中那样需要使用 `Object.defineProperty` 来定义属性。

**Vue2 中的例子**

javascriptexport default {
 data() {
 return { count:0 }
 },
 methods: {
 increment() {
 this.count++
 }
 }
}

在 Vue2 中，我们需要使用 `Object.defineProperty` 来定义属性。

**Vue3 中的 Proxy**

javascriptimport { ref } from 'vue'

export default {
 setup() {
 const count = ref(0)

 function increment() {
 count.value++
 }

 return { count, increment }
 }
}

在 Vue3 中，我们可以使用 `ref` 来创建一个代理对象。

### **6. Ref**

Ref 是一个新特性，允许你创建一个响应式数据，而不是像 Vue2 中那样需要使用 `Object.defineProperty` 来定义属性。

**Vue2 中的例子**

javascriptexport default {
 data() {
 return { count:0 }
 },
 methods: {
 increment() {
 this.count++
 }
 }
}

在 Vue2 中，我们需要使用 `Object.defineProperty` 来定义属性。

**Vue3 中的 Ref**

javascriptimport { ref } from 'vue'

export default {
 setup() {
 const count = ref(0)

 function increment() {
 count.value++
 }

 return { count, increment }
 }
}

在 Vue3 中，我们可以使用 `ref` 来创建一个响应式数据。

### **7. Computed**

Computed 是一个新特性，允许你创建一个计算属性，而不是像 Vue2 中那样需要使用 `Object.defineProperty` 来定义属性。

**Vue2 中的例子**

javascriptexport default {
 data() {
 return { count:0 }
 },
 computed: {
 doubleCount() {
 return this.count *2 }
 }
}

在 Vue2 中，我们需要使用 `Object.defineProperty` 来定义属性。

**Vue3 中的 Computed**

javascriptimport { ref, computed } from 'vue'

export default {
 setup() {
 const count = ref(0)

 const doubleCount = computed(() => count.value *2)

 return { count, doubleCount }
 }
}

在 Vue3 中，我们可以使用 `computed` 来创建一个计算属性。

### **8. Watch**

Watch 是一个新特性，允许你监听一个数据的变化，而不是像 Vue2 中那样需要使用 `Object.defineProperty` 来定义属性。

**Vue2 中的例子**

javascriptexport default {
 data() {
 return { count:0 }
 },
 watch: {
 count(newValue, oldValue) {
 console.log(`count changed from ${oldValue} to ${newValue}`)
 }
 }
}

在 Vue2 中，我们需要使用 `Object.defineProperty` 来定义属性。

**Vue3 中的 Watch**

javascriptimport { ref } from 'vue'

export default {
 setup() {
 const count = ref(0)

 watch(count, (newValue, oldValue) => {
 console.log(`count changed from ${oldValue} to ${newValue}`)
 })

 return { count }
 }
}

在 Vue3 中，我们可以使用 `watch` 来监听一个数据的变化。

### **9. Lifecycle**

Lifecycle 是一个新特性，允许你定义一个组件的生命周期钩子，而不是像 Vue2 中那样需要使用 `Object.defineProperty` 来定义属性。

**Vue2 中的例子**

javascriptexport default {
 data() {
 return { count:0 }
 },
 mounted() {
 console.log('组件已挂载')
 }
}

在 Vue2 中，我们需要使用 `Object.defineProperty` 来定义属性