切換語言為:簡體

Vue 2 和 Vue 3 之間響應式區別

  • 爱糖宝
  • 2024-10-19
  • 2047
  • 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.