vue2x监听
在Vue.js 2.x中，你可以通过监听属性来响应数据的变化。以下是几种常见的监听方式：
- 监听计算属性：你可以使用computed属性来创建一个计算属性，并监听它的变化。
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
fullName(newVal, oldVal) {
console.log('fullName发生了变化', newVal, oldVal);
}
}
在上面的代码中，fullName是一个计算属性。当firstName或lastName发生变化时，fullName会重新计算，然后watch会监听fullName的变化，并执行相应的回调函数。
- 监听对象：你可以使用$watch方法来监听对象的变化。
data() {
return {
user: {
name: 'John',
age: 30
}
};
},
created() {
this.$watch('user', (newVal, oldVal) => {
console.log('user对象发生了变化', newVal, oldVal);
}, {
deep: true });
}
在上面的代码中，通过$watch方法监听user对象的变化。{ deep: true }选项用于深度监听对象的属性变化。
- 监听数组：你可以使用$watch方法监听数组的变化。
data() {
return {
items: ['apple', 'banana', 'orange']
};
},
mounted() {
this.$watch('items', (newVal, oldVal) => {
console.log('items数组发生了变化', newVal, oldVal);
}, {
deep: true });
}
在上面的代码中，通过$watch方法监听items数组的变化。同样，{ deep: true }选项用于深度监听数组内部元素的变化。
这些是Vue.js 2.x中常见的属性监听方式。通过监听属性的变化，你可以执行相应的操作来响应数据的更新。
vue3.0监听
在Vue 3.0中，监听数据变化的方式有所改变。Vue 3.0使用了基于Proxy的响应式系统来替代了Vue 2.x中基于Object.defineProperty的方式。以下是Vue 3.0中的监听方式：
- 响应式数据变化的监听：
Vue 3.0通过reactive函数将一个普通对象转换为响应式对象，并可以使用ref函数将基本类型数据（如数字、字符串）转换为响应式对象。然后可以使用watch函数来监听响应式数据的变化。
import { reactive, ref, watch } from 'vue';
const data = reactive({
name: 'John',
age: 30
});
const count = ref(0);
watch(() => {
console.log('name:', data.name);
}, { immediate: true });
watch(count, (newVal, oldVal) => {
console.log('count:', newVal, oldVal);
});
在上面的代码中，data是一个响应式对象，通过watch函数可以监听data.name的变化。count是一个响应式引用，通过watch函数可以监听count的变化。
- 数组和Map的监听：
Vue 3.0中也支持对数组和Map的变化进行监听，通过watch函数的deep选项来实现深度监听。
import {
reactive, watch } from 'vue';
const list = reactive(['apple', 'banana', 'orange']);
watch(() => {
console.log('list:', list);
}, {
deep: true });
在上面的代码中，通过watch函数监听数组list的变化，并使用deep: true选项来进行深度监听。
- 计算属性的监听：
Vue 3.0中的计算属性通过computed函数来创建，并可以使用watch函数来监听计算属性的变化。
import {
computed, watch } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => {
return firstName.value + ' ' + lastName.value;
});
watch(fullName, (newVal, oldVal) => {
console.log('fullName:', newVal, oldVal);
});
在上面的代码中，通过computed函数创建了一个计算属性fullName，并通过watch函数监听fullName的变化。
通过以上方式，你可以在Vue 3.0中监听数据的变化并执行相应的操作。新的响应式系统在性能和灵活性方面有所提升，使开发更加便捷。
vue2x监听方面有什么缺点？所以才有了vue3.0
在Vue 2.x中，监听数据变化主要使用了Object.defineProperty来实现。但是这种方式存在一些缺点，这也是为什么在Vue 3.0中进行了改进的原因之一：
-
需要深度递归：Vue 2.x对于响应式数据的监听是在初始化时进行的，需要对整个数据对象进行递归遍历，将每个属性都转为getter和setter。对于大型的对象或嵌套层级较深的对象，这会导致初始化时的性能开销较大。
-
难以检测新增属性和删除属性：Vue 2.x通过Object.defineProperty监听属性的读取和修改，但是对于新增属性和删除属性无法直接检测到。需要通过其他手段，例如Vue.set 和 Vue.delete 方法来处理。
-
数组监听的问题：Vue 2.x对于数组的变化无法完全捕获，只能拦截特定的数组方法（如 push、pop 等），而直接通过索引或修改 length 属性的方式无法被监听到。
-
精确追踪变化：Vue 2.x的监听机制只能追踪到被访问过的属性，无法追踪到动态添加的属性。这意味着在渲染过程中，如果属性未被使用，那么对该属性的修改不会触发重新渲染。
基于以上缺点，Vue 3.0引入了基于Proxy的响应式系统来替代Object.defineProperty。使用Proxy可以提供更细粒度的监听和拦截能力，解决了以上问题，并且在性能方面也有所提升。Vue 3.0中的响应式系统更加灵活、高效和易用，提供了更好的开发体验。