Vue的过滤器、生命周期钩子函数、组件开发、路由、Promise基本使用语法(1)

实例将要被挂载和已经被挂载

3、beforeMount（）{} 表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中

在beforeMount执行的时候，页面中的元素，还没有真正的替换过来，只是之前写的一些模板字符串

4、mounted （）{} 表示模板中的已经真实的挂载到了页面中去，用户可以看到渲染好的页面了

mounted是实例实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就在内存中，没有变化

如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行，只要执行完了mounted，就表示整个Vue实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入了运行阶段

运行期间

5、beforeUpdate（）{} 当触发这个函数时，表示我们的界面已经被更新了

当执行beforeUpdate的时候，页面中显示的数据还是原来的，但是在data中的数据时最新的，页面和data中的数据没有保持同步

6、updated（）{} 这个事件执行的时候，页面和打他数据已经保持同步了，都是最新的

运行结束

7、beforeDestroy（）{} 当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段，进入了销毁阶段，但是还没有真正的销毁

8、当执行到destroyed 函数的时候，组件已经被完全销毁了，此时组件中所有的数据，方法指令等等都已经不可用了

keep-alive组件中的两个生命周期钩子

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

总结起来Vue的生命周期钩子总共有十个[常见的时文档中标明的8个，另外两个只有在keep-alive中才能使用]：

文档中的：

【

**beforeCreate、creacted、

beforeMount、mounted、

beforeUpdate、updated、

beforeDestroy、destroyed**

】

keep-alive切换时的：

【activated、deactivated】

---

组件化开发：

在组件开发模板中，可以直接在html文档中使用template标签来创建一个模板，方便写html类型的模板，但是需要定义相关的id或者class

在Vue.component中使用template：’#id 或者 .class名‘

---

定义公有组件：

使用Vue.extend（{ }）创建全局的Vue组件模板对象

使用Vue.component(‘组件的名称’ ，创建出来的组件模板对象）来引用组件

定义私有组件：

components：{ ’组件名称‘：{组件模板对象 } }

组件可以有自己的data数据，但是组件中的data和实例中的data有点不一样，即：实例中的data可以作为一个对象，但是组件中的data必须是一个方法，且该方法必须有返回值，返回值为一个对象。

组件中的data数据和实例中的data使用方式完全一样

---

组件之间传递参数：

父组件向子组件：props[ ]

子组件向父组件：$emit (可选参数 )

===============================================

路由

---

使用Vue-router 定义路由

在vue的容器中使用router-view标签来当作占位符，将路由规则，匹配到的组件，展示到这个占位符中去

使用router-link to=’路由位置‘来定义要去的路由位置 在里面可以使用tag属性来定义对应的标签，默认为a标签

// 创建路由实例对象 

    var router = new VueRouter({



        routes: [

            { path: '路由名1', redirect: '重定向的路由名2' },//重定向路由

            { path: '路由名2', component: 在当前路由下需要解析的对象模板 },

            {

                path: '路由名3',

                component: 在当前路由下需要解析的对象模板,

                // 通过 children 属性， 添加子路由规则

                children: [

                    { path: '子路由名', component: 在当前路由下需要解析的对象模板},

                    { path: '子路由名', component: 在当前路由下需要解析的对象模板 }

                ]

            }

        ]

    })

===============================================

async、await、promise三者的关系

---

执行async函数，返回得都是promise对象

promise.then 成功的情况对应await

---

async function test（）{

#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/8a648ac65d9a7313464c8b7dc43d18e2.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/85ca2bbaab1fb372d4e08112d4d8ea5b.png)

![](https://img-blog.csdnimg.cn/img_convert/d57731e4766ed816c2bad750e8536037.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
d开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**