Vue基础知识

基础部分

vuejs(/view/)概论

• 渐进式框架：作为应用的一部分嵌入业务

  • Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层

• 高级功能

  • 解耦视图和数据
  • 可复用组件
  • 前端路由技术
  • 状态管理
  • 虚拟dom

vuejs安装

• 直接cdn引入
• 开发环境： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
• 生产环境： <script src="https://cdn.jsdelivr.net/npm/vue"></script>
• 下载和引入
  • 右键链接另存为
• npm 安装

命令式编程和声明式编程

• 命令式编程
  • 一步一步的告知应该做什么(jquery)
• 声明式编程
  • 例如vue
  • 数据发生改变页面也会发生相应的改变

开发流程

• 创建vue对象
• 传参：
  • el:决定对象挂在到哪里，
  • data：存储数据,
  • methods:存储方法,
  • computed:计算属性，当做属性使用，会在内存中留下缓存
  • 生命周期钩子
• 解析流程
  • 在没有解析到相应的实例的时候仍然为相应的内容，然后再是有实例解析页面，替换数据等

vue的mvvm

• m:Model:数据层
• v:View:视图层 dom
• vm:View-Model:通信桥梁，vue实例，
  • 数据绑定：将数据绑定到view,响应式绑定
  • 监听dom:将事件作用到数据上面

分析：

• view :

<div id="app">

    <h3> 当前数值：{{ count }}</h3>

    <button v-on:click="add">加</button>

    <button @click="sub">减</button>

  </div>

• model:

  data:{

        count:0,

      },

• view-model:

  const app=new Vue({})
  

生命周期

• 生命周期：事务从诞生到死亡的过程

• vue 的生命周期：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19FxdSRP-1587352541142)(E:\codeforhtml\VUE\vuenote\vuejsnote\source\lifecycle.png)]

插值操作

• 模板语法
  • Mustache(胡须) 语法 {{}},写在标签之间，而不能在标签内
  • 可以进行简单的语句
• vue指令
  • v-once,只渲染一次，当值发生改变的时候不做相应改变<h2 v-once>{{ message }}</h2>
  • v-html:解析html <div v-html="title"></div>
  • v-text:直接展示text内容，不灵活，会对其后内容进行覆盖 <h2 v-text="message">123</h2>
  • v-pre:不对vue进行解析直接显示其内容 <h2 v-pre>{{ message }}</h2>
  • v-cloak(斗篷):可能延迟显示出现不该显示的内容,在vue解析只爱钱，div中有一个v-cloak
  • 在解析之后没有v-cloak属性,会自动进行属性的删除

v-bind

• 动态绑定属性 如a的href,img的src
• 语法糖 :

<img v-bind:src="url" alt="">

   <img :src="url" alt="">

• 绑定class
• 绑定style
• 对象语法
• 数组语法

计算属性

• 需要对数据进行转化在现实，或者需要将多个数据结合起来进行显示

• 每个计算属性都包含一个getter和seeter,通常指使用getter而不是用setter

计算属性和方法的区别

• 方法使用几次就会执行几次
• 计算属性只调用一次
  • 只要依赖的值没有发生改变就不会重新调用，在内存中有缓存

事件监听 v-on

• 绑定事件监听器
• 语法糖@
• 函数
• 参数event
  • 不需要参数可以省略括号 <button @click="sub">减</button>
  • 需要显示传递参数 <button @click="sub(3)">减</button>
  • 在需要传参的函数下省略了括号，会自动传递event参数
  • 在同时需要event 参数和其他参数时,用$event传参‘<button@click="propAndevent{(}^{\prime }ab{c}^{\prime },$event)">打印其他参数和事件event`
  • 传参需要带上引号否则会出错，除了纯数值类型
• 修饰符
  • 阻止冒泡 .stop 相当于event.stopPropagation()
  • 阻止默认事件 .prevent 相当于event.preventDefault() <a @click.prevent="pre" href="https://www.baidu.com/">百度首页</a>
  • 键盘监听 .{keycode}当事件是通过特定键触发 <input type="text" v-on:keyup.enter="KeyUp">
  • .native
  • .once 只触发一次回调

条件判断

• else-if 一般不常用，如果要用一般都是用计算属性就很方便

  <div id="app" >

  <h2 v-if="flag">{{ message}} {{ flag }}</h2>

  <h2 v-else>{{ message2}} {{ flag }}</h2>

  <button @click="change">change</button>

  <div>

    <h2 v-if="score>=90">优秀</h2>

    <h2 v-else-if="score>=80">良好</h2>

    <h2 v-else="score>=70">一般</h2>

  </div>

  </div>

• vue 在使用之前会使用虚拟dom ，为了尽可能多的复用代码，所以会出现一些小bug
  • 解决：给不希望复用的元素天上唯一的key,如果key相同则vue会为了节省性能直接服用，但是不同的key值会让vue明白其不可复用性

v-show

• <h1 v-show="flag"> {{message}}</h1>
• v-show 其实质是改变display为none,一直存在在dom树中
  • 适合切换频率高，性能更高
• v-if 其实质是改变dom的节点，将其挂载和删除

循环遍历

• v-for
• 数组 <li v-for="(item,index) in arr">下标:{{ index }}, 值为:{{ item }}</li>
• 对象
• 下标:{{ index }}, 键:{{ key }}, 值为:{{ item }}

组件的key属性

• 官方推荐使用v-for时，给对应元素添加key属性
• 和虚拟dom和diff算法有关系
• 用key 给每个节点做唯一的表示
• diff算法正确的识别节点，
• 为了高效的更新虚拟dom
• 要求内容和key一一对应且唯一 <li v-for="(item,index) in arr" :key="item">{{ item }}</li>
  • 优先对比key，如果key对比相同则不复用，则织田接一个添加项
  • 没有key 则会产生复用，然后后面依次后推

数组响应式方法

• 并不是所有的修改数组的方法都是响应式的
• 非响应式
  • 索引改变
  • 挽救方法
    • this.arr.splice(0,1,'bbb')
    • vue.set(要修改的对象，索引值，修改后的值)
• 响应式
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

案例

过滤器

filters:{

      // 过滤器

      showPrice(price){

       return '$'+price.toFixed(2)

      }

        }

• 使用：<td>{{item.price|showPrice}}</td>

表单双向绑定 v-model

• 实现表单元素和数据的双向绑定

• 原理

  • 是v-bind和事件监听(@input)的集合

• 修饰符

  • lazy:不是实时更新，在失去交点或者回车的时候更新变量
  • num:保证值为number类型
  • trim : 去除首尾空格

值绑定

• 先有原始值
• 遍历生成
• v-bind 动态绑定

高级部分

组件化

• 将页面差分成一个个小的功能块，每个功能块完成属于自己这部分的功能，那么维护将变得非常容易
• vue组件化思想
  • 提供了一种抽象，让我们可以开发一个个独立可复用的小组件来构造我们的应用
  • 任何应用都会被抽象成一颗独立的组件树

注册组件的基本步骤

• 创建组件构造器 Vue.extend({template})方法
• 注册组件 Vue.component(‘name’,构造器名称) 方法
• 使用组件
• 注意：当组件有多个标签时，必须有一个根标签包含

全局组件和局部组件

• 全局组件
  • 所有的Vue实例都可使用
  • 使用Vue.component('name',构造器名称)注册
• 局部组件
  • 只能在挂载的实例上使用
  • 在实例挂在中使用components:{usename,consname}进行注册
• 语法糖:主要是省去了Vue.extend()方法
  • 全局语法糖：在注册时讲第二个参数直接使用templateVue.component('myapp',{template:< div >

    标题

    内容

    })
  • 局部：在注册时直接注册为一个对象，myapp2: {template:

    标题局部

    内容

    `

父组件和子组件

• 子组件构造
• 父组件构造
• 在父组件中使用components:{}注册组件,并使用子组件
• 将父组件挂载到根组件中
• 组件挂在到哪里，哪里才可以使用,比如子组件在父组件中被注册了，但是不饿能在根组件中使用，想要只用必须在根组件中在注册一次

组件模板分离

• 使用<script type="text/x-template" id="myapp"> 注册的时候就直接使用template:'#myapp'
• 使用 template标签

为什么组件data必须是函数

• 组件是单独的功能模块封装，也应该有自己的数据data
• 组件是不能直接访问实例的data的
• 组件的数字那个数据是一个函数，函数返回一个对象，对象内部保存数据
• 组件构造中的mustache就可以使用data
• 原因
  • 为了让每个组件有独立的数据而不是使用相同的数据
  • 即每次返回的都是一个新的对象{}，拥有自己的独立空间

通信

父传子

• props(properties(属性))
• 方式
  • 字符串数组，数组中的字符串就是传递的名称 <myapp :arr="arr"></myapp> 通过v-bind传参,子组件通过props接收
  • 对象，对象可以设置传递时的类型，也可以设置默认值
    • 可进行类型限制，
    • 可提供默认值
  • 将每个值都设置为对象
    • 其中：type:类型 default:默认值 required: true/false
• 驼峰标识
  • v-bind不支持驼峰，只能使用-加小写

子传父

• 事件($emit Event)
  • 子组件通过发送this.$emit("自定义事件名",参数)发送信号
  • 父组件通过@事件名="处理逻辑方法"收到信号,到实例的methods写处理函数

父子组件传值不该props

• ​ 一般而言不能直接修改props,因为props是与父子间的data所传递的值是同步的
  • 可以通过data方法对props进行拷贝(this.props),然年后通过v-bind绑定到实例上实现了props到实例上的改变
  • 实现实例上的到props通过函数监听,先修改data中的数据，然后发送this.emit去修改父组件的data，则自动更新了props
• 总结
  • v-model 的原理使用+父子组件传值

父子组件的访问方式

• 父访子
  • this.$children(不推荐使用，下标值一旦改变这需要再次修改)
    • 返回的是由子组件组成的数组
  • this.refs
    • 默认是一个空的对象，需要在子组件中用ref="aa"声明<myapp ref="bbb"></myapp>
• 子访父
  • this.$parent(不推荐使用，会降低耦合度)
• 访问根组件
  • this.$root

插槽Slot

• 为什么使用插槽
  • 让封装的组件更加具有扩展性
  • 让使用者决定组建内部的一些内容到底展示什么
• 怎么封装
  • 抽取共性,保留不同
• 怎么使用
  • 在模板中使用<slot>默认值</slot>
  • 如果有多个值，同时放到组件中替换式全部一起替换
• 具名插槽
  • 在模板中使用<slot name="left">默认值</slot>给插槽命名
  • 在使用的时候通过给投标签命名方式使用<span slot="left">返回</span>

编译作用域

• 自己使用自己的数据，父模板所有的东西都在父级作用域编译，子模板也相同

作用域插槽

• 父组件替换插槽的标签，但是内容由子组件来提供
• 父组件拿子组件数据
• 过程
  • 模板定义slot并绑定传递数据 <slot :data="info"></slot>
  • 实例在使用时中用template接收，<template slot-scope="slot">
  • 使用子组件传递的数据slot.data

模块化开发

• 历史问题
  • 多个文件可能重名问题，文件引入顺序问题
    • 解决：匿名函数包(function(){})()
      • 出现方法没法重复使用的情况
        • 解决：导出一个所有需要复用的对象let x=(function(){return obj})()x为模块名
• es6
  • import:
  • export:
• 常见模块化规范
  • CommonJs:Nodejs:
    • 文件作用域
    • 导出：Module.exports=obj
    • 导入：let y=require('路径') y.add()
• AMD
• CMD
• es6的Modules

webpack

• webpack 配置vue
  • npm install vue --save
  • 出错 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.
    • 解决:在webpack的五大模块并列添加下列代码

      resolve:{

    alias:{

      // 别名

      'vue$':'vue/dist/vue.esm.js'

    }
  

• 版权设置：webpack.BannerPlugin("版权信息")
• 打包HTML文件，并根据html模板产生
• js压缩uglify-webpack-plungin
• 本地服务 我失败了，有空再来完善

el和template的区别

• 目前开发多是通过路由实现单页面复用的效果，所以对于html的操作变得很少，并且很不希望频繁的修改html
• 定义template属性，来避免对html文件的频繁操作，在编译的时候就会将template整个替换到div#app(即在实例上template会替换el所挂载的部分)

vue的终极用法

import Vue from 'vue'

const App={

 template:`

  <div>

  <h2>{{message}}</h2>

  <button @click="btnClick">按键</button>

  <span>{{info}}</span>

  </div>

  `,

  data(){

    return {

      message:"你好呀",

      info:"你也好呀"

    }

  },

  methods:{

    btnClick(){

      this.info="按钮被点击了呀！"

    }

  }

}

new Vue({

  el:"#app",

  /* template:`

  // <div>

  // <h2>{{message}}</h2>

  // <button @click="btnClick">按键</button>

  // <span>{{info}}</span>

  // </div>

  // `, */

  template:'<App />',

  components:{

    App

  }

  

})

• 需要配置webpack
  • 依赖如下

{

  "dependencies": {

    "css-loader": "^3.5.2",

    "style-loader": "^1.1.3",

    "vue": "^2.6.11",

    "vue-loader": "^15.9.1",

    "vue-style-loader": "^4.1.2",

    "vue-template-compiler": "^2.6.11",

    "webpack": "^4.42.1",

    "webpack-cli": "^3.3.11"

  },

  "name": "04_1vue_webpack",

  "version": "1.0.0",

  "main": "index.js",

  "license": "MIT"

}

const {resolve}=require("path")

const VueLoaderPlugin = require('vue-loader/lib/plugin.js')

module.exports={

  entry:"./index.js",

  output:{

    filename:"built.js",

   path:resolve(__dirname,'build')

  },

  module:{

    rules:[

     {

      test: /.vue$/,

     use: ['vue-loader']

  },

 {

    test: /.css$/,

    use: [

      'vue-style-loader',

      'css-loader'

       ]

    }

    ]

  },

  resolve:{

    alias:{

      // 别名

      'vue$':'vue/dist/vue.esm.js'

    }

  },

  plugins: [

    new VueLoaderPlugin()

  ],

   mode: 'production'

}

• 在上述文件中 App 已经变成一个对象，我们可以将对象单独抽离到一个文件在导出

  export default {
  
   template:`
  
    <div>
  
    <h2>{{message}}</h2>
  
    <button @click="btnClick">按键</button>
  
    <span>{{info}}</span>
  
    </div>
  
    `,
  
    data(){
  
      return {
  
        message:"你好呀",
  
        info:"你也好呀"
  
      }
  
    },
  
    methods:{
  
      btnClick(){
  
        this.info="按钮被点击了呀！"
  
      }
  
    }
  
  }
  
  

• 使用时

import Vue from 'vue'

import App from './vue/app.js'

new Vue({

  el:"#app",

  template:'<App />',

  components:{

    App

  }

  

})

• 进一步发现缺点，模板和js代码没有进行分离
  • 创建一个.vue文件单独存放vue代码

<template>

  <div>

  <h1 title>{{message}}</h1>

  <button @click="btnClick">按钮</button>

  <h2>{{info}}</h2>

  </div>

</template>

<script>

export default {

  name:'App',

 data(){

     return{

    message:"你好呀",

    info:"你也好呀"

     }

   

  },

  methods:{

    btnClick(){

      this.info="按钮被点击了呀"

    }

  },

}

</script>

<style scoped>

[title]{

  color:red;

}

</style>

• 使用

import Vue from 'vue'

import App from './vue/app.vue'

new Vue({

  el:"#app",

  template:'<App />',

  components:{

    App

  }

})

• 使用 <myapp @itemclick="myappclick"></myapp>

脚手架

脚手架 Vue CLI

• CLI 是Command-Line Interface
• 前提 node
• 安装

npm install -g @vue/cli

# OR

yarn global add @vue/cli

• 检查vue --version

创建项目

vue create 项目名称

选项

• `vue create 项目名称·
• ? Please pick a preset: Manually select features和defaule:选择配置，默认还是手动选择
• ? Check the features needed for your project: 上一条选择自定义有后选择：Babel, Router, Vuex, CSS Pre-processors,Linter(eslint) 空格确定
• ? Use history mode for router? (Requires proper server setup for index fallback in production): Yes
• ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 选择css 预处理 Less
• ? Pick a linter / formatter config: 选择语法检测工具Airbnb
• ? Pick additional lint features:选择语法什么时候检查语法 Lint on save
• ? Where do you prefer placing config for Babel, ESLint, etc.? :在哪里放置配置文件In dedicated config files(独立的文件)
• ? Save this as a preset for future projects?:要不要将选择保存为配置(入口选择时) Yes
• ? Save preset as: test 保存文件名
• ? Pick the package manager to use when installing dependencies: Yarn
• �🎉 Preset test saved in C:\Users\123\.vue

目录

• node_modules
• public
• src
• browerslistrc:对浏览器进行控制
• editorconfig:代码规范条例
• eslintrc:eslint配置
• .gitignore:代码管理是需要忽略的部分
• babel.config.js:babel配置

runtime-compiler和runningtimeonly

• 区别在main.js上

• runtime-compiler

  • 使用 App时用的components:{App注册,在`template:’'使用
  • 见下面程序运行过程
  • template - ast -render-virtualdom-truedom
  • 通过vue-tempalte-compiler将template转换为对象的

• runningtimeonly

  • 使用App时直接使用render:h=>h(app)(箭头函数)渲染
  • render-virtualdom-truedom
    • 性能更高，代码更少

• render函数详解

 render:function(createElement){

  //h是createElement的别名，应为createElement生成的是dom 是超文本标签

 /* 它来自单词 hyperscript，这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指生成HTML 结构的 script 脚本，因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言） */

  //createElement是一个函数

 }

• createElement 用法详解
  • createElement(‘标签名’，{标签的属性}，[‘内容’]),会用标签替换挂载到的元素;如果在内容中继续使用createElement,使用无限套娃模式
  • 传入对象,对象里面使用template语法,就像单独抽离出来的vue对象一样 然后将对象传入createElement(对象)

​

vue 程序运行过程

• 在source里面有图
• 将模板template传递给vue时，vue会将保存在vm.option里面
• 将保存的模板将会被解析为ast(abstruct syntax tree 抽象语法树)
• 在便以为render函数
• 创建虚拟dom树
• 渲染真实dom树

vue-router

什么是路由

• 什么是路由
• 路由的两种机制：路由和转送
  • 路由决定了数据包从来元到目的地的路径
  • 转送键输入端的数据转移到合适的输出端
• 路由表
• 前端路由和后端路由
  • 发展阶段
    • 最开始都是后端渲染jsp(java server page),收到请求后服务器会在服务器中就解析完成(包含 html+css+java(从数据库中拿数据，并动态放到页面中))
    • 前后端分离阶段，用ajax请求数据，后端只负责数据，不负责任何额阶段的数据（前端渲染）
      • 后端连接服务器(提供APi接口的服务)，静态资源服务器
      • 前端发起请求，到静态服务器中拿到html+css+js拿到html+css就可以直接去执行，遇到js请求时在API服务器中拿到数据，并处理
      • 多个页面
    • 单页面富应用阶段
      • SPA(single page application) 在前后端分离的基础上加了一层前端路由
      • 整个网页只有一个html页面
      • 在静态资源服务器中，在前后端分离的阶段是有好几套html+css+js,一个url对应一套，而在单页面富应用是则只存在一套index.html +css+js
      • 一旦请求将所有资源下载下来，点击对应模块时，将相关代码抽离并显示(在vue里面就是对应一个组件)
• 后端路由
  • 后端处理url和页面映射关系
  • url会发送到服务器，服务器通过正则对该url进行匹配，最后交由Controller 进行处理
  • Cotroller进行各种出来，最终生成HTML或者数据返回给前端
  • 完成一个IO操作
• 缺点
  • 后端负担太重
• 前端路由
  • 单页面富应用阶段
  • 降低服务器压力

url和history

• 希望改变url而不向服务端请求数据
  • 改变url的hash loaction.hash=xxx(#后面的部分)
• url的组成：协议://域名(主机地址):端口/路径/:参数/?查询字符串/#哈希
  • html5的部分：history.pushState({},'','路径')在栈结构中用的很多，history是栈结构，可以返回history.replace({},'','路径')不可以返回，直接替换不是压栈history.go(num)弹出num个历史 history.forward()相当于history.go(-1)

认识Vue-router

官网

• 路由用于设定访问路径将路径和组件映射起来
• 在单页面富应用中，页面的路径改变就是组件的切换
• 安装
  • npm install vue-router --save
  • 在创建app的时候就会选择自动创建
• 使用
  • 导入路由对象，并且调用Vue.use(VueRouter)
  • 创建路由实例。并且配置映射配置
  • 在Vue事例中挂载到创建的路由实例
• 配置路由步骤
  • 创建路由组件
  • 配置路由映射：组件和路径映射关系
  • 使用路由：通过<router-link>和`
• `是一个vue-router中的内置组件，会被渲染为 标签
  • 改标签会根据当前的路径，动态渲染出不同的组件，占位组件，决定渲染的位置
  • 在路由切换时，切换挂载的组件，其他内容不会发生改变
• 默认路由通过重定向实现redirect
  • 默认是hash路由的方式，通过修改注册时的mode:history可以改变
• 补充
  • tag="button"将 变成一个button
  • replace属性将history 设置为replaceState,默认是history.pushState
• 当处于激活状态时时，会自动添加router-link-exact-active ,router-link-active 这两个class，当是取件点这两个类将会自动消失
  • 鉴于名字太长 我们可以将router-link-active 可以通过active-class="newname 设置，如果<router-link>很多，可以直接在注册router的时候就直接linkActiveClass: 'active',统一设置
• 使用代码进行跳转，在需要跳转的标签添加事件
  • 在methods里面接收，并处理
  • 使用this.$router.push('/home')进行路由跳转(连着两次点击会出错)
  • 同理也有this.$router.replace('/home')

动态路由

• 在某些情况下，一个页面的path路径可能不确定，
  • /user, /user/list ,/user/name 等此类就叫做动态路由
• 配置
  • 在配置路由是带上参数path: '/user/:id',
  • 跳转是带上参数，动态获取参数<router-link :to="/user/+userId" tag="button" replace>user</router-link>
  • 通过v-bind动态绑定，uerId是定义在data中的数据
• 获取参数
  • 在加速暗属性中使用 return this.$route.params.id; $route拿到的是当前处于活跃状态的路由，paramas是参数的意思，id是在配置动态路由时所设置的参数
  • 直接在模板中使用 <h1>当前参数是:{{ $route.params.id }}</h1>

打包分析

• 当打包构建应用时，打包出来的包非常大，让首次加载变得很慢
• 把不同路由对应的组件分割位不同的代码块，然后被访问的时候才加载对应组件
• yarn build后会出现dist文件夹
  • index.html
  • js文件包含了除了index.html之外的所有东西，在想静态资源服务器请求路径的时候会很慢很慢
  • app… 是业务代码，手动写的那个
  • vender(提供商) 存放所有第三方的东西
  • 其他的不知道咋记录

懒加载

• 用到时再加载
• 使用方式
  • 异步组件
  • AMD 写法
  • es6写法

// 引入

const User = () => import('../views/User.vue');

// 注册

 {

    path: '/home',

    component: Home,

  },

• 这时候在进行打包时会多出几个文件，有几个组件用了懒加载，就会多出几个文件

路由嵌套

• 步骤
  • 创建对应的子组件，并且在路由映射中配置对应的子路由children:[]进行子路由配置
  • 在组件内部使用

 {

    path: '/home',

    component: Home,

    children: [

      {

        path: 'news',

        component: HomeNews,

      },

      {

        path: 'message',

        component: HomeMessage,

      },

    ],

  },

路由传递参数

• params
  • 配置路由(配成动态路由)
  • 传递方式：动态绑定 :to
  • 传递后形成的路径：/router/123
  • route.params.name
• query
  • 以普通方式配置路由
  • 传递方式 :对象中使用query的key 作为传递方式
  • 传递后形成的路径：/router?id=123
  • 同里也可以通过代码跳转`点击+this.$router.push({path,query})

// 一般路由配置

 <router-link :to="{path:'/profile',query:{'age':18}}" tag="button" replace>profile</router-link>

 <h3>我收到的参数是：{{$route.query}}</h3>

    <h3>我收到的参数的值是：{{$route.query.age}}</h3>

$router和$route（讲到原理，可以多看几次）

• $router是从router文件下的index导出的router实例
• $route是路由配置里面的routes里面的正在活跃的路由
• (使用use注册的时候会执行install)
• Object.defineProperty() 响应式核心，劫持数据

导航守卫

• 监听路由的跳转
• 让页面的title随着组件切换而变换
  • 使用document.title
• 使用导航守卫

router.beforeEach((to, from, next) => {

  document.title = to.meta.title;

  next();

});

• meta是定义在路由配置的一个配置
  • 全局守卫(上述)
  • 路由独享守卫
  • 组件内的守卫

keep-alive(建议在看一遍)

• 生命周期函数
• keep-alive 是Vue内置的一个组件，可以使其被包含的组件保留状态，或避免车重新渲染
• 也是一个组件，如果直接被包在keep-alive 里面，所有路径匹配到的试图组件都会被缓存
• 每次切换组件都是将原组件销毁,再次回来重新创建,但是会更新
• activated(){} deactivated(){} 在keep-alive下有用

keep-alive 属性介绍

• include

• exclude :,不要加空格，exclude里面的是组件导出中的name,这个是由正则表达来分隔的<keep-alive exclude="About,profile">

案例时间 TabBar