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参数来决定采用哪一种方式。

1、Hash模式：

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

2、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页面

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

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

4、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

5、vue-router传参

1) 用name传递参数   

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

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

 

下面是我的微信公众号欢迎大家关注一起学习一起进步

 

 

参考文章：

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

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

 

posted @ 2019-06-14 10:05  夏目友人喵  阅读(247)  评论(0)  编辑  收藏  举报