vue2 && vue3 区别

vue2 && vue3 区别

对象响应性

在 Vue 2 中，如果一个对象的属性没有预先声明，后期直接添加的属性默认不具有响应性。

解决办法:

1. 预先声明所有可能的属性

   data() {
   return {
   user: {
   name: '',
   age: null // 预先声明
   }
   }
   }

2. 使用 Vue.set 或 this.$set 添加新属性

   methods: {
   addAge() {
   this.$set(this.user, 'age', 25) // 正确方式，使属性具有响应性
   }
   }

3. 创建新对象替换原对象

   methods: {
   addAge() {
   this.user = {
   ...this.user,
   age: 25
   }
   }
   }

数组的类似情况

Vue 2 中直接通过索引修改数组元素也不具有响应性：

// 不会触发视图更新

this.items[index] = newValue

// 应该使用

this.$set(this.items, index, newValue)

// 或

this.items.splice(index, 1, newValue)

Vue 3 使用 Proxy 实现响应式系统，可以检测到动态添加的属性，解决了这个问题。

template 只有一个根元素

Vue 3 的一个重要变化是模板不再强制要求只能有一个根元素

v-if && v-for 优先级

在 Vue 中，当 v-if 和 v-for 同时存在于同一个元素上时，会存在优先级和执行顺序的问题。这个问题在 Vue 2 和 Vue 3 中有不同的表现。

Vue 2 中的行为

优先级：v-for > v-if

Vue 3 中的行为

优先级：v-if > v-for

无论是 Vue 2 还是 Vue 3，官方都不建议在同一个元素上同时使用 v-if 和 v-for。以下是推荐的替代方案：

使用计算属性过滤列表

computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive)
  }
}

<li v-for="item in filteredItems">
  {{ item.name }}
</li>