vue3 文件總結

應用 && 元件例項

每一個 Vue 應用都是通過 createApp 函式建立一個新的應用例項開始的

const app = Vue.createApp({ /* 選項 */ })

防抖和節流

Vue 內部沒有做防抖和節流，但可以使用 Lodash 等庫來實現

計算屬性的 setter

計算屬性預設只有 setter,不過在需要時你也可以提供一個 setter

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }

條件渲染

當 v-if 與 v-for 一起使用時，v-if 具有比 v-for 更高的優先順序，v-for 與 v-if 不可以同時出現在 v-for 中

    <ul>
      <li v-for="item in list" :key="item.key" v-if="item.value">
        {{ item.value }}
      </li>
    </ul>

1. v-show 代替 v-if

   <ul>
      <li v-for="item in list" :key="item.key" v-show="item.value">
        {{ item.value }}
      </li>
    </ul>

2. 可以用計算屬性重新輸出一個陣列來代替原陣列

   <ul>
      <li v-for="item in lister" :key="item && item.key">
        {{ item && item.value }}
      </li>
    </ul>

    setup() {
      const list = reactive([
        { key: 1, value: false },
        { key: 2, value: true },
      ]);
      const lister = computed(() => {
        return list.filter((item) => {
          return item.value === true;
        });
      });

      return {
        lister,
      };
  },

v-for 裡使用物件

第一個值為 value,第二個值為 key, 第三個值為 index

 <ul>
      <li v-for="(value, key, index) in object" :key="key">
        <p>key: {{key}}</p>
        <p>value: {{value}}</p>
        <p>index: {{index}}</p>

      </li>
  </ul>

  setup() {
    const object = reactive({
      key: "KEY",
      value: "VALUE",
      number: "NUMBER",
    });

    return {
      object,
    };
  },

vue3 中基於偵測不再需要 this.$set Array.push/pop/splice/reverse…

        data() {
          return {
            obj: {
              name: "name",
            },
            items: [0, 1, 2],
          };
        },
        mounted() {
          setTimeout(() => {
            this.obj.sex = "male";
            this.items[0] = "changed";
            console.log("changed");
          }, 1000);
        },

對於上面同樣的程式碼，vue2 不會對於狀態的新增，或者對陣列下標修改做出響應，而 vue3 會做出響應

多事件處理器

事件處理程式非最後一個，一定要加上括號

  <button @click="click1(), click2()">click</button>
  setup() {
    const click1 = () => {
      console.log(1);
    };
    const click2 = () => {
      console.log(2);
    };
    return {
      click1,
      click2,
    };
  },