Vue: 生命周期, VueRouter

Z时代
2024-01-10
分类：综合

vue

beforeCreate:

　　实例创建之前除标签外，所有的vue实例需要的数据，事件都不存在

created:

　　实例被创建之后，data和事件已经被解析到，el还没有找到

beforeMount:

开始找标签，数据还没有被渲染，事件也没有被监听

mounted:

开始渲染数据，开始监听事件

beforeUpdat:

数据已经被修改在虚拟DOM，但是没有被渲染到页面上

updated:

开始使用Diff算法，将虚拟DOM中的修改应用到页面上，此时真实DOM中的数据被修改了

beforeDestroy:

所有的数据都存在

destroy:

所有的数据都有（虚拟DOM中找的）

<keep-alive></keep-alive> Vue提供的用来缓存被消除的标签

用activated和deactivated取代了beforeDestroy和destroyed的执行

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

第一步, 在根实例中使用，

第二步, 实例化一个router对象,本质上是将路径和页面内容绑定了对应关系

第三步, 在根实例中注册router对象

第四步, router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径

第五步, router-view是页面内容的渲染出口

2.1 VueRouter的实现原理

<script>
        let oDiv = document.getElementById("app");
        window.onhashchange = function () {
            switch (location.hash) {
                case '#/login':
                    oDiv.innerHTML = `<h1>这是登录页面</h1>`;
                    break;
                case '#/register':
                    oDiv.innerHTML = `<h1>这是注册页面</h1>`;
                    break;
                default:
                    oDiv.innerHTML = `<h1>这是首页</h1>`;
                    break;
            }
        }
    </script>

2.2 VueRouter安装使用,需要下载使用:
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>