切换语言为:繁体

Vue 2 和 Vue 3 之间响应式区别

  • 爱糖宝
  • 2024-10-19
  • 2048
  • 0
  • 0

一、响应式系统

Vue 2 的响应式系统

Vue 2 使用了基于依赖收集的观察模式。对于对象,Vue 2 会遍历对象属性,为每个属性创建一个 Watcher 实例,并在访问这些属性时收集依赖。当属性改变时,会通知相关的 Watcher 更新视图。

Vue 2 响应式原理代码示例
Javascript
深色版本
// Vue 2 的数据响应式部分简化示例
function observe(value) {
  if (!value || typeof value !== 'object') {
    return;
  }
  new Observer(value);
}

function defineReactive(obj, key, val) {
  let dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      Dep.target && dep.addDep(Dep.target);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify();
    }
  });
}

function initState(vm) {
  const opts = vm.$options;
  if (opts.data) {
    vm._data = data = opts.data;
    for (const key in data) {
      proxy(vm, '_data', key);
    }
    observe(data);
  }
}

function proxy(target, sourceKey, key) {
  Object.defineProperty(target, key, {
    get() {
      return target[sourceKey][key];
    },
    set(val) {
      target[sourceKey][key] = val;
    }
  });
}

class Dep {
  constructor() {
    this.deps = [];
  }
  addDep(dep) {
    this.deps.push(dep);
  }
  notify() {
    this.deps.forEach(dep => dep.update());
  }
}

Vue 3 的响应式系统

Vue 3 利用了 JavaScript 的 Proxy 对象来实现数据的响应性,这使得整个过程更为简洁和高效。Proxy 对象可以拦截对象的访问和修改操作,并执行相应的处理逻辑。

Vue 3 响应式原理代码示例
Javascript
深色版本
import { reactive, effect } from 'vue';

const state = reactive({ count: 0 });

effect(() => {
  console.log('Count is now ', state.count);
});

state.count++; // 输出 "Count is now 1"

这里 reactive 创建了一个响应式对象,而 effect 则是一个副作用函数,它会在依赖的数据发生变化时自动重新运行。

二、Composition API

Vue 3 引入了 Composition API,这是一组新的 API,用于在 Vue 组件中以函数的方式组织和重用逻辑。与 Options API 相比,Composition API 更适合逻辑的复用和测试。

Vue 2 Options API 示例

Vue
深色版本
<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Vue 3 Composition API 示例

Vue
深色版本
<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      count,
      increment
    };
  }
};
</script>

三、其他改进

  • 性能优化:Vue 3 重构了渲染器,提高了性能。

  • TypeScript 支持:Vue 3 原生支持 TypeScript,提供了更好的类型定义和工具支持。

  • 构建工具:Vue 3 使用 Rollup 构建工具替代了 Webpack,提供了更好的 Tree-shaking 支持。

  • 依赖项更新:Vue 3 升级了许多底层依赖库,如 Lodash 至按需引入的 lodash-es。

总结

Vue 3 相对于 Vue 2 的主要改进在于响应式系统的现代化(使用 Proxy)、Composition API 的引入以及整体性能和类型的改进。这些变化使得 Vue 3 更加灵活、强大和易于维护。

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.