vue2 vue3 区别
vue2 && vue3 区别
对象响应性
在 Vue 2 中，如果一个对象的属性没有预先声明，后期直接添加的属性默认不具有响应性。
解决办法:
- 预先声明所有可能的属性
data() {return {user: {name: '',age: null // 预先声明}}
}
- 使用 Vue.set 或
this.$set添加新属性
methods: {addAge() {this.$set(this.user, 'age', 25) // 正确方式，使属性具有响应性}
}
- 创建新对象替换原对象
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>