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

爱被打了一巴掌 2023-10-03 11:25 3阅读 0赞

### 过滤器的使用 ###

< div> \{ \{参数 | 过滤器名（形参）\}\}< /div> //这里面的形参可多个  
Vue.filter('过滤器名‘，处理函数方法（形参）\{ 方法体\}） //这里的形参第一个参数为div中的参数，第二个为过滤器传过来的值

注：过滤器可以多次调用 如：< div> \{ \{参数 | 过滤器名1（形参）| 过滤器名2（形参）\}\}< /div> //这里面的形参可多个  
另外过滤器目前是在vue2中才有使用的，虽然现在vue2比vue3使用得多一些，但是vue3肯定是未来趋势，因此过滤器我们也只需要了解一下即可。

--------------------

### 生命周期钩子函数： ###

##### 实例刚被初始化 #####

1.  beforeCreate（）\{\} 表示实例完全被创建出来之前，会执行它  
    在beforeCreat生命周期执行的时候，data和methods中的数据都还没有初始化
2.  created（）\{\} ，在这个函数中，data和methods都已经被初始化好了  
    如果调用methods中的方法或者操作data中的数据，最早只能在created中操作

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

1.  beforeMount（）\{\} 表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中  
    在beforeMount执行的时候，页面中的元素，还没有真正的替换过来，只是之前写的一些模板字符串
2.  mounted （）\{\} 表示模板中的已经真实的挂载到了页面中去，用户可以看到渲染好的页面了  
    mounted是实例实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就在内存中，没有变化  
    如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行，只要执行完了mounted，就表示整个Vue实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入了运行阶段

##### 运行期间 #####

1.  beforeUpdate（）\{\} 当触发这个函数时，表示我们的界面已经被更新了  
    当执行beforeUpdate的时候，页面中显示的数据还是原来的，但是在data中的数据时最新的，页面和data中的数据没有保持同步
2.  updated（）\{\} 这个事件执行的时候，页面和打他数据已经保持同步了，都是最新的

##### 运行结束 #####

1.  beforeDestroy（）\{\} 当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段，进入了销毁阶段，但是还没有真正的销毁
2.  当执行到destroyed 函数的时候，组件已经被完全销毁了，此时组件中所有的数据，方法指令等等都已经不可用了

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

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

**总结起来Vue的生命周期钩子总共有十个\[常见的时文档中标明的8个，另外两个只有在keep-alive中才能使用\]：**  
文档中的：【**beforeCreate、creacted、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed**】

**keep-alive**切换时的：【**activated、deactivated**】

### 组件定义 ###

定义公有组件：  
使用Vue.extend（\{ \}）创建全局的Vue组件模板对象  
使用Vue.component(‘组件的名称’ ，创建出来的组件模板对象）来引用组件

定义私有组件：  
components：\{ ’组件名称‘：\{组件模板对象 \} \}

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

--------------------

##### 组件之间传递参数： #####

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

--------------------

### vue路由使用 ###

使用**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

const p = Promise.resolve(3);
    	    p.then(data =>{
    		console.log('data',data);
    	    })
    	   //使用await 得到的结果和 .then的结果是一样的
    	   const data = await p;
    	   console.log('data',data);
    	}
    	test（）

#### Promise常用的API： ####

*  promise赋值变量名.then() 表示得到异步任务的正确结果
 *  promise赋值变量名.catch（） 表示获取异常信息
 *  promise赋值变量名.finally() 表示无论成功与否都会执行

##### Promise对象方法： #####

*  Promise.all()并发处理多个异步任务，所有任务执行完毕才能得到结果，用一个数组来传递值
 *  Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果，同样是传递一个数组