请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

面试题更新之-vue2x监听方面有什么缺点?所以才有了vue3.0

2023-07-13

在这里插入图片描述


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的变化,并执行相应的回调函数。

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

  1. 监听数组:你可以使用$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的变化。

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

  1. 计算属性的监听:
    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中的响应式系统更加灵活、高效和易用,提供了更好的开发体验。

相关阅读

手机版|MSIPO技术圈 皖ICP备19022944号-2

Copyright © 2024, msipo.com

返回顶部