监听第三方组件的生命周期钩子
通过使用 @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