vue 学习记录

监听组件的生命周期

• 只需要在父组件引用的时候通过 @hook来监听即可，代码如下

//父组件
<Child @hook:mounted="doSomething"/>

属性事件的传递

• 一次性传递（比如react里面的 {...this.props}）答案就是 v-bind和 v-on。

举个例子，假如有一个基础组件 BaseList，只有基础的列表展示功能，现在我们想在这基础上增加排序功能，这个时候我们就可以创建一个高阶组件 SortList。

<!-- SortList-->
<template>
  <BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList>
</template>


import BaseList from "./BaseList"; 
// 包含了基础的属性定义
import BaseListMixin from "./BaseListMixin";
// 封装了排序的逻辑 
import sort from "./sort.js";  
export default {
    props: BaseListMixin.props,
    components: { BaseList }
  };

传递属性和事件的方便性，而不用一个个去传递

url变了，但数据没有更新

场景：不同路由复用组件，路由变化，数据并未更新，生命周期钩子并为触发
解决办法：

• 在设置一个unique key

<router-view :key="$route.fullPath">

• 设置个watch函数

watch: {
    "$route": {
        handler(somevalue) {
            // do stuff
        },
        immediate: true
    }
}