Vue Tips

[Leecason]

参考

https://vuedose.tips

[Leecason]

New v-slot directive in Vue.js 2.6.0

vue 2.6.0+ 废弃 slot-scope

使用 v-slot 指令

限用于 <component> 和 <template>，不支持原生 HTML 标签

默认插槽

<!-- old  slot-scope -->
<template>
  <List :items="items">
    <template slot-scope="{ filteredItems }">
      <p v-for="item in filteredItems" :key="item">{{ item }}</p>
    </template>
  </List>
</template>

<!-- new  v-slot -->
<template>
  <List v-slot="{ filteredItems }" :items="items">
    <p v-for="item in filteredItems" :key="item">{{ item }}</p>
  </List>
</template>

具名插槽 + props

<!-- old -->
<template>
  <Promised :promise="usersPromise">
    <p slot="pending">Loading...</p>

    <ul slot-scope="users">
      <li v-for="user in users">{{ user.name }}</li>
    </ul>

    <p slot="rejected" slot-scope="error">Error: {{ error.message }}</p>
  </Promised>
</template>

<!-- new -->
<template>
  <Promised :promise="usersPromise">
    <template v-slot:pending>
      <p>Loading...</p>
    </template>

    <template v-slot="users">
      <ul>
        <li v-for="user in users">{{ user.name }}</li>
      </ul>
    </template>

    <template v-slot:rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>

<!-- 使用 # 简写 -->
<template>
  <Promised :promise="usersPromise">
    <template #pending>
      <p>Loading...</p>
    </template>

    <template #default="users">
      <ul>
        <li v-for="user in users">{{ user.name }}</li>
      </ul>
    </template>

    <template #rejected="error">
      <p>Error: {{ error.message }}</p>
    </template>
  </Promised>
</template>

[Leecason]

Creating a Store without Vuex in Vue.js 2.6.0

new API in Vue.js 2.6.0 Vue.observable

让一个对象可响应

// store.js
import Vue from "vue";

export const store = Vue.observable({
  count: 0
});

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

// vue component
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="setCount(count + 1);">+ 1</button>
    <button @click="setCount(count - 1);">- 1</button>
  </div>
</template>

<script>
  import { store, mutations } from "./store";

  export default {
    computed: {
      count() {
        return store.count;
      },
    },
    methods: {
      setCount (count) {
        mutations.setCount(count);
      },
    },
  };
</script>

[Leecason]

Listen to lifecycle hooks

<template>
  <component @hook:created="doSomething" />
</template>

[Leecason]

Immediately run watcher callback after observation

export default {
  props: {
    user: {
      type: Object,
    }
  },
  watch: {
    user: {
      immediate: true,
      handler (user) {
        this.initUser(user);
      }
    }
  }
};

[Leecason]

v-bind .sync modifier

Vue 2.3.0 新增

在子组件中 emit event 意图更新数据

this.$emit('update:title', newTitle);

在父组件中监听事件并更新更新

<child
  v-bind:title="title"
  v-on:update:title="title = $event"
/>

合并语法

<child v-bind:title.sync="title" />

多个 props 语法

<child v-bind.sync="obj" />