Vue的生命周期、Vue脚手架、Vue路由

Vue的生命周期

Vue的概念

组件在创建到销毁会经历一些列的过程，称为生命周期，在过程中执行的回调函数称为周期钩子函数

Vue生命周期的作用

可以让我们在恰当时期，做一些自动操作，网络请求数据，监听dom数据，执行定时器，清除定时器，结束监听

生命周期

总结下来一共8个：创建前后（beforeCreated、created），挂载前后（beforeMount、mounted），更新前后（beforeUpdate、updated），销毁前后（beforeDestroy、destroyed）
其中比较重要的有3个：创建后，挂载后，销毁前

作用：（重要）

1. 创建后（created）：ajax请求，本地数据读取，window事件监听，定时器开启
2. 挂载后（mounted）：可以和created重复，可以操作dom
3. 销毁前（beforeDestroy）：移除事件监听，清除定时器

beforeCreate() {
            console.log("beforeCreate 创建前", this, this.msg);
        },
        //创建完毕，已经有this，有数据
        //作用：执行ajax，读取本地数据，开启定时器，注册事件window相关
        created() {
            console.log("*created 创建前", this, this.msg);
            console.log("*created 创建前", this.$el);
        },
        //挂载前，生成了dom没有编译（挂载）
        beforeMount() {
            console.log("beforeMount 挂载前", this.$el);
            console.log("beforeMount 挂载前", document.querySelector("#app").innerHTML);
        },
        //挂载完毕，dom已经被挂载到真实的节点，已经完成了编译工作
        //作用：执行ajax，读取本地数据，开启定时器，注册事件，操作dom节点
        mounted() {
            console.log("mounted 挂载后", document.querySelector("#app").innerHTML);
        },
        //beforeUpdate 更新前，数据更新了，dom没有更新
        beforeUpdate() {
            //只要数据更新
            //只要数据发生变化就会执行更新（多次执行）
            console.log("beforeUpdate 更新前", this.num, document.getElementById("num").innerHTML);
        },
        //updated 更新完毕，数据更新，dom也更新完毕
        updated() {
            console.log("updated 更新后", this.num, document.getElementById("num").innerHTML);
        },
        //销毁前，能访问到this，也能操作data的数据
        //移除定时器，移除事件监听
        beforeDestroy() {
            this.num++;
            console.log("beforeDestroy 销毁前", this.num);
        },
        //销毁完毕，切断实例与dom的联系，无法再使用子组件的实例，methods、watch
        destroyed() {
            console.log("destroyed 销毁完毕");
        }

生命周期中常用的全局方法/属性

• $el：组件/vue的dom节点
• $destroy：销毁当前组件/vue的方法
• $nextTick（callback）：数据更新，等待dom更新后执行callback回调函数（重要）
• $refs：一个对象，持有注册过 attribute 的所有 DOM 元素和组件实例。
• $ mount()：手动挂载el
• 以及$set()等…

Vue 脚手架

Vue脚手架的安装基于node的环境，是创建复杂vue项目的模板

Vue脚手架的安装（分三步）

第一步：安装node.js
第二步：全局安装脚手架（装一次就不需要再装了）

npm i -g @vue/cli

第三步：检查是否安装成功（输入命令，如果能输出版本号，说明安装成功了）

vue -V

创建项目

第一步：切换到根目录/项目所在的目录

cd /

第二步：创建一个项目（myvue）

vue create myvue

运行项目

第一步：切换到项目目录

cd myvue

第二步：运行项目

npm run serve

Vue文件项目文件名称解释

node_modules：包下载地址
public：模板和公用文件地址
src：项目源文件目录(重要)
assets：资源目录
components：组件存放目录
App.vue：项目根组件（重要)
main.js：项目入口文件（重要)
.gitignore：规定那些文件不上传
babel.confg.js ：ES6转ES5配置文件
jscofig.json js：语法检测配置
package.json：项目包管理目录
package-lock.json：包下载缓存地址
README.md：项目说明目录
vue.config.js ：vue的配置文件

什么时候用props，什么时候用data

很多同学在学习的时候回有疑问什么时候使用props什么时候使用data，容易混淆，其实：当数据不需要修改且需要从父组件中获取的时候就用props，当数据需要修改的时候就用data。学习过程中，能使用props解决就用props解决

spa单页面（SinglePageApplication）

spa：一个网站的所有页面都集成在一个html文件里面，通过div模拟页面的切换
这种方式的优点：可以实现资源公共、前后端分离、页面切换流畅
同时也会优点缺陷：对SEO搜索引擎不友好
工作原理：当地址栏改变，不刷新页面监听地址栏的变化实现页面局部更新

Vue路由

路由分类

• Hash路由
  • 锚点（hash）变化不会刷新页面
  • 通过window.onhashchange来监听路由变化
• 历史记录路由
  • h5新增特性
  • 通过history.onpopstate来监听路由变化

内置组件（App.vue）

router-link：改变地址栏，改变hash值
router-view：存放页面

路由配置（/router/index.js）

普通：

{
    path: '/',//配置的地址
    name: 'home',//可省略不写
    component: HomeView,//配置的页面组件
  },

传参：

{
    path: '/produce/:id',//id是自定的参数（形参）
    name: 'produce',
    component: ProduceView
    // component: () => import("../views/ProduceView.vue"),
  },

子路由：

{
    path: '/admin',
    name: 'admin',
    component: () => import("../views/admin/AdminView.vue"),
    children: [
      {
        path: "dash",
        name: "dash",
        component: () => import("../views/admin/DashView.vue"),
      },
      {
        path: "event",
        name: "event",
        component: () => import("../views/admin/EventView.vue"),
      },
      {
        path: "",
        redirect: "dash",//如果子path为空，重定向到dash页面
      },
    ]
  },

404：

//在最后面配置404
  {
    path: "*",//path的值为*
    name: "nomatch",
    component: () => import("../views/NoMatch.vue"),
  },

路由的别名：

{
    path: '/',
    alias:["/index","main"],//别名，在地址栏输入index或者main都可以跳转到/的页面
    name: 'home',
    component: HomeView
  },

$route当前路由信息

• name：名称
• params：路由参数（重要）
• path：路径
• fullPath：全路径
• query：查询参数（重要）
• hash：哈希
• meta：元信息

$ router编程跳转（后边跟方法，与$ route区分开）

• $router.push：跳转并添加一个历史记录
• $router.replace：跳转替换（不留历史记录）
• .back（）：返回
• .forward（）：前进
• .go（-1）：返回一步
• .go（1）：前进一步

路由组件

• router-link：切换路由
  • to属性：改变地址栏的path值（实现跳转）

<div class="produce">
    <h1>这里是产品页面 {{ $route.params.id }}</h1>
    <router-link to="/about">关于</router-link> |
    <router-link :to="{ name: 'home' }">首页</router-link> |
    <router-link :to="{ path: '/produce/abc' }">*产品abc</router-link> |
    <router-link :to="{ name: '/produce', params: { id: 'abc' } }"
      >产品abc</router-link
    >
    <router-link to="/produce/abc">*产品abc</router-link>
  </div>

• router-view：存放路由