Vue基础知识的巩固与学习

生命周期的解析和应用：

Vue 实例有一个完整的生命周期，也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。通俗说就是 Vue 实例从建立到销毁的过程，就是生命周期。

1. beforecreate : 
   完成实例初始化，初始化非响应式变量
   this指向建立的实例；
   能够在这加个loading事件；
   data computed watch methods上的方法和数据均不能访问
2. created
   实例建立完成
   完成数据(data props computed)的初始化 导入依赖项。
   可访问data computed watch methods上的方法和数据
   未挂载DOM,不能访问$el,$ref为空数组
   可在这结束loading，还作一些初始化，实现函数自执行,
   能够对data数据进行操做，可进行一些请求，请求不易过多，避免白屏时间太长。
   若在此阶段进行的 DOM 操做必定要放在 Vue.nextTick() 的回调函数中
3. berofeMount
   有了el,编译了template|/outerHTML
   能找到对应的template,并编译成render函数
4. mounted
   完成建立vm.$el，和双向绑定，
   完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操做
   即有了DOM 且完成了双向绑定 可访问DOM节点,$ref
   可在这发起后端请求，拿回数据，配合路由钩子作一些事情；
   可对DOM 进行操做
5. beforeUpdate
   数据更新以前
   可在更新前访问现有的DOM,如手动移除添加的事件监听器；
6. updated :
   完成虚拟DOM的从新渲染和打补丁；
   组件DOM 已完成更新；
   可执行依赖的dom 操做
   注意：不要在此函数中操做数据，会陷入死循环的。
7. activated:
   在使用vue-router时有时须要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，
   若是咱们的子组件须要在每次加载的时候进行某些操做，可使用activated钩子触发
8. deactivated 
   for keep-alive 组件被移除时使用
9. beforeDestroy： 
   在执行app.$destroy()以前
   可作一些删除提示，如：你确认删除XX吗？ 
   可用于销毁定时器，解绑全局时间 销毁插件对象

10. destroyed ：

    当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁
    这时组件已经没有了，你没法操做里面的任何东西了。

子父组件的生命周期
仅当子组件完成挂载后，父组件才会挂载
当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）
父子组件在data变化中是分别监控的，可是在更新props中的数据是关联的（可实践）
销毁父组件时，先将子组件销毁后才会销毁父组件

兄弟组件的初始化（mounted以前）分开进行，挂载是从上到下依次进行
当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

页面渲染优先级：
render函数选项 > template选项 > outer HTML.

vue-router 

　　vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超连接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 路由模块的本质 就是创建起url和页面之间的映射关系 。 至于咱们为啥不能用a标签，这是由于用Vue作的都是单页应用，就至关于只有一个主的index.html页面，因此你写的标签是不起做用的，你必须使用vue-router来进行管理。

　　实现原理：单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。 单页面应用(SPA)的核心之一是: 更新视图而不从新请求页面 ;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪种方式。

一、Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。hash（#）是URL 的锚点，表明的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会从新加载网页，也就是说 #是用来指导浏览器动做的，对服务器端彻底无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增长一个记录，使用”后退”按钮，就能够回到上一个位置；因此说 Hash模式经过锚点值的改变，根据不一样的值，渲染指定DOM位置的不一样数据

二、History模式：

因为hash模式会在url中自带#，若是不想要很丑的 hash，咱们能够用路由的 history 模式，只须要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须从新加载页面。

//main.js文件中
const router = new VueRouter({
   mode: 'history',
   routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！ 不过这种模式要玩好，还须要后台配置支持。由于咱们的应用是个单页客户端应用，若是后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就很差看了。 因此呢， 你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}
]

此处就设置若是URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面

三、使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏
方式2：this.$router.push(‘路由地址')
方式3： <router-link to="路由地址"></router-link>

四、vue-router使用方式

1:下载 npm i vue-router -S

2:在main.js中引入 import VueRouter from 'vue-router';

3:安装插件 Vue.use(VueRouter);

4:建立路由对象并配置路由规则

let router = new VueRouter({routes:[{path:'/home',component:Home}]});

5:将其路由对象传递给Vue的实例，options中加入 router:router

6:在app.vue中留坑 <router-view></router-view>

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//建立路由对象并配置路由规则
let router = new VueRouter({
  routes: [
    //一个个对象
    { path: '/home', component: Home }
  ]
});
//new Vue 启动
new Vue({
  el: '#app',
  //让vue知道咱们的路由规则
  router: router, //能够简写router
  render: c => c(App),
})


//app.vue中
<template>
  <div>
    <!-- 留坑，很是重要 -->
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data(){
      return {}
    }
  }
</script>

View Code

五、vue-router传参

1) 用name传递参数   

2) 经过 <router-link> 标签中的to传参

3) vue-router 利用url传递参数----在配置文件里以冒号的形式设置参数

 

下面是个人微信公众号欢迎你们关注一块儿学习一块儿进步

 

 

参考文章：

一、包你理解---vue 的生命周期

二、关于vue-router的那些事儿