Vue 的小奇技

监听第三方组件的生命周期钩子

通过使用 @hook: 前缀监听生命周期中的钩子，并指定回调函数。
举个例子，如果你想要在第三方组件 v-runtime-template 渲染时做一些事情，那么你可以监听它的生命周期中的 updated 钩子：

<v-runtime-template @hook:updated="doSomething" :template="template" />

用Object.freeze 方法阻止vue的data中数据响应

比如我们请求的数据是一个很大的数据列表。如地图的标记点 markers 列表数据，这就是一个拥有很多对象的大型数组，我们不会对这些数据进行操作，其实可以理解成这是一个常量。

export default {
   
  data: () => ({
   
    users: {
   }
  }),
  async created() {
   
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

如果你确实有需要去修改请求得到的列表数据，那么你仍然可以通过创建一个新的数组来实现。

this.users = Object.freeze([...this.users, user]);

Vue2.6.0 中的新指令 v-slot

（1）作用域插槽
原方法：

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