---

vue2x监听

在Vue.js 2.x中，你可以通过监听属性来响应数据的变化。以下是几种常见的监听方式：

1. 监听计算属性：你可以使用computed属性来创建一个计算属性，并监听它的变化。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
watch: {
  fullName(newVal, oldVal) {
    console.log('fullName发生了变化', newVal, oldVal);
  }
}

在上面的代码中，fullName是一个计算属性。当firstName或lastName发生变化时，fullName会重新计算，然后watch会监听fullName的变化，并执行相应的回调函数。

2. 监听对象：你可以使用$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 }选项用于深度监听对象的属性变化。

3. 监听数组：你可以使用$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中的监听方式：

1. 响应式数据变化的监听：
   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的变化。

2. 数组和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选项来进行深度监听。

3. 计算属性的监听：
   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中进行了改进的原因之一：

1. 需要深度递归：Vue 2.x对于响应式数据的监听是在初始化时进行的，需要对整个数据对象进行递归遍历，将每个属性都转为getter和setter。对于大型的对象或嵌套层级较深的对象，这会导致初始化时的性能开销较大。

2. 难以检测新增属性和删除属性：Vue 2.x通过Object.defineProperty监听属性的读取和修改，但是对于新增属性和删除属性无法直接检测到。需要通过其他手段，例如Vue.set 和 Vue.delete 方法来处理。

3. 数组监听的问题：Vue 2.x对于数组的变化无法完全捕获，只能拦截特定的数组方法（如 push、pop 等），而直接通过索引或修改 length 属性的方式无法被监听到。

4. 精确追踪变化：Vue 2.x的监听机制只能追踪到被访问过的属性，无法追踪到动态添加的属性。这意味着在渲染过程中，如果属性未被使用，那么对该属性的修改不会触发重新渲染。

基于以上缺点，Vue 3.0引入了基于Proxy的响应式系统来替代Object.defineProperty。使用Proxy可以提供更细粒度的监听和拦截能力，解决了以上问题，并且在性能方面也有所提升。Vue 3.0中的响应式系统更加灵活、高效和易用，提供了更好的开发体验。