这次学习了生命周期，mixin混入，以及路由传递参数的params方法和query方法，之后还会更新学习

一，生命周期

一，mounted

当vue完成模板渲染，并且将dom元素放入页面之后，（挂在完毕）第一次调用称为挂载，第二次以及之后就是更新了。

但是这仅仅是vue生命周期的一部分，一个完整的生命周期包含很多的部分

生命周期是什么：

1. 生命周期又叫做生命周期函数，生命周期回调函数，生命周期钩子。

2. vue再特殊时期帮我们调用的一些函数。

3. 生命周期函数的名字不可更改，但是函数内部的内容是我们自己编写的

4. 生命周期函数中的this指向的是vue实例化的对象，或者是组件的实例对象。

生命周期的三个大阶段：

1. 更新

2. 挂载

3. 销毁

二，挂载

挂载的流程可谓是生命周期中最长的一条线，在整个挂载的过程中：

1. beforecreate，此时我们还无法访问vm中的data和methods等等

2. created，此时我们可以通过实例化vue对象来访问到data和methods中的内容，随后页面开始解析模板，生成虚拟DOM并且将DOM存起来。

3. berforeMount，此时页面呈现没有经过vue编译的DOM内容，举个例子我们的插值语句会以原本的姿态呈现出来

4. mounted，此时页面呈现的内容就是vue编译过后的DOM，从现在开始算是初始化的过程结束了

三，更新

1. beforeUpdate，此时数据更新了但是页面是旧的

2. upDated，此时数据和页面都是更新过后的

四，销毁

1. beforeDestory,弥留之际，此时还是能拿到数据和调用方法的，但是此时页面已经不在调用了

2. destory,完全销毁一个实例，清理它与实例的连接，解绑它的全部指令及事件监听器，这里的事件是自定义事件

二，mixin混入

遇到组件script部分有重复的地方的时候写这个(这个部分是后来再次看的，真不知道当时学了个什么)

app.vue

<template>
​
<!-- 模板文档只能有一个容器 -->
  <div>
    <h1 ref="text">真TMD服了！！！</h1>
    <MyName name="王鼎舒"></MyName>
    <button @click="showMe">点我输出test的节点</button>
  </div>
</template>
​
<script>
import MyName from "./components/MyName.vue";
​
import {a} from '../minix.js'
​
export default {
  name: "App",
  components: {
    MyName,
  },
 mixins:[a]
};
</script>
​
​
​

minix.js （创建文件的时候打错字了）

 export const a = {methods: {
    showMe(){
      console.log(this.$refs.text)
    }
  }
}

三，路由的query参数

可以通过query参数传递值

message.vue

<template>
  <div>
    <ul>
      <!-- 跳转路由携带参数to的字符串写法 -->
      <!-- <li v-for="n in messageList" :key="n.id"><router-link :to="`/home/message/detail?id=${n.id}&title=${n.title}`">{{n.title}}</router-link>&nbsp;&nbsp;</li> -->
      <!-- 跳转路由携带参数to的对象写法 -->
    <li v-for="n in messageList" :key="n.id">
      <router-link :to="{
      path:'/home/message/detail',
      query:{
        id:n.id,
        title:n.title
      }
    }
    ">{{n.title}}</router-link>&nbsp;&nbsp;</li>
    </ul>
    <router-view></router-view>
  </div>
</template>
​
<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息一" },
        { id: "002", title: "消息二" },
        { id: "003", title: "消息三" },
      ],
    };
  },
};
</script>
​
<style>
</style>

detail.vue

<template>
  <div>
    message:id{{$route.query.id}}<br>
    message:title{{$route.query.title}}
  </div>
</template>
​
<script>
export default {
    name:'Detail',
}
</script>
​
<style>
​
</style>

四，命名路由

只有在路由过长的时候，为了方便解决问题，在配置路由的时候添加名字。

就用上面的代码作为例子来解析一下

message.vue

<router-link :to="{
     name:'detail',
      query:{
        id:n.id,
        title:n.title
      }
    }
    ">{{n.title}}</router-link>

router/index.js

children:[
                        {
                            name:'detail',
                            path:'detail',
                            component:Detail
                        }
                    ]

路由嵌套较少的时候还是不要这么用比较好

五，路由的param参数

直接将要传递打的对象写道路由里，按理说是安全，但是个人感觉鸡肋

message.vue

      <!-- 跳转路由携带参数to的字符串写法 -->
      <!-- <li v-for="n in messageList" :key="n.id"><router-link :to="`/home/message/detail/${n.id}/${n.title}`">{{n.title}}</router-link>&nbsp;&nbsp;</li> -->
      <!-- 跳转路由携带参数to的对象写法 -->
    <li v-for="n in messageList" :key="n.id">
      <router-link :to="{
       name:'detail',
      params:{
        id:n.id,
        title:n.title
      }
    }
    ">{{n.title}}</router-link>&nbsp;&nbsp;</li>

detail.vue

  <div>
    message:id{{$route.params.id}}<br>
    message:title{{$route.params.title}}
  </div>

/router/index.js

 children:[
    {
        name:'detail',
        //这里要写展位符
        path:'detail/:id/:title',
        component:Detail
    }
]