网站建设业务渠道小程序平台

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>