vue前端重构computed及watch组件通信等实用技巧整理

基于 springboot+vue 的测试平台开发

继续更新

当前项目进度的前端重构已经完成了,在重构之余也对一些交互做了优化等。在本次的重构过程中感觉还是有不少收获,尤其是对于一些vue的前端知识的应用。

今天不做具体的开发记录分享,整理一下过程中用到的一些vue知识点,结合实际项目代码举例,方便后续回顾,也供有需要的童鞋参考。

主要可以分为 2 个大类:常规的、组件通信相关。

一、常规知识点

1.mounted 与 created

mounted 和 created 这两个都是 vue 生命周期中的钩子函数。在实际开发中,通常用来做一些初始化的事情,比如订阅一个消息、绑定一个自定义事件、发送一个http请求等等。

再通俗一点讲,比如有些事情是我一上来就要做的,就可以放在这里去执行。

但是要注意这两者存在的区别:

created: 在模板渲染成html前调用,这时候浏览器虽然解析dom、css、js,

mounted:在模板渲染成html后调用

拿项目中的代码举例:

  • 使用 created

有一个列表页,里面的数据是通过后端接口返回的,我希望列表一上来就能自动展示数据,所以我自然要先去做后端的接口请求的。

vue前端重构computed及watch组件通信等实用技巧整理_第1张图片

  • 使用 mounted

再比如,我抽离出来的一个组件,我希望组件只要准备好了就要给自身绑定一个事件 clear,以便其他组件随时调用这个事件。

vue前端重构computed及watch组件通信等实用技巧整理_第2张图片

如果你的操作不涉及要操作一些dom,那么就可以放在 created 里去做,这时候 data 里的数据是可以访问的。反之就只能放在 mounted 里,因为只有渲染完成了,你才能操作dom。

2. 计算属性 computed

如果你有要使用的一些属性不存在,而需要你通过已有属性进一步运算得来,那么推荐使用计算属性。

实际代码举例:

我在vuex(后面会讲到)中有一些重要的属性需要获取到值,为我当前组件使用。但是直接获取的表达式又臭又长,在这个组件里我要复用很多次,我想简洁点,那我就可以定义一个计算熟悉来使用。

vue前端重构computed及watch组件通信等实用技巧整理_第3张图片

这里我定义了一个计算属性叫needRefreshList,因为计算属性最终出现在vm上,那么我在模板里可以直接needRefreshList使用。而在一些其他方法里也可以通过this.needRefreshList来获取。

这里注意的是,上图中的是一个完整的写法,有getset方法,干什么用:

get:初次读取的时候、以及依赖的数据发生变化的时候执行。

set:如果计算属性需要被修改,只能通过set函数去修改。而且set函数中还要去改依赖的数据才可以。

如果只用获取而不需要去更改,则可以使用简写方式。

通常来说,使用method方法也可以做到这个结果。但是,computed有这vue内部的缓存机制,效率更高,调试也方便。

3. 监视属性 watch

顾名思义,监视属性可以用来监视属性的变化。当被监视的属性变化时,自动调用回调函数,进行你的一些相关操作。

还是拿上面的计算属性needRefreshList继续举例。

vue前端重构computed及watch组件通信等实用技巧整理_第4张图片

我在 watch 里监视了属性needRefreshList,这个属性是我用来标记是否需要刷新列表用的,所以我要关注needRefreshList值的变化,当产生变动的时候,就去执行handler()方法里的事情。

上图这里也是一个完整写法,还看到了immediatedeep:

immediate: 立即的意思,初始化的时候立马就调用一次。

deep: 深度监视,如果你监视的属性是一个对象,里面可能还有多个层级,只要里面任何层级的值有变动你都要知道,那么deep:true 即可。

如果上面这2个配置项你用不到,那么就可以使用简写方式。

vue前端重构computed及watch组件通信等实用技巧整理_第5张图片

二、组件通信相关

剩下的就是本次重构中用到的重点知识了,都是围绕着组件之间通信来的。

首先,通过一个图说明一下各组件之间的关系。

vue前端重构computed及watch组件通信等实用技巧整理_第6张图片

A 是最外层的父组件,里面包含了2个子组件 B 和 CB 和 C 是兄弟组件C 中 又包含了一个子组件 D

1. 父组件给子组件传递

比如,父组件 C 中要给子组件 D 传值(或者方法),这里使用props来传递。

首先,在父组件绑定要传递的数据,比如这里current-tab-namecurrent-data

vue前端重构computed及watch组件通信等实用技巧整理_第7张图片

然后,在子组件中使用props来定义要接收属性。

vue前端重构computed及watch组件通信等实用技巧整理_第8张图片

2. 子组件给父组件传值

通过在父组件中绑定一个自定义事件,然后通过事件的方法接收参数,最终由子组件调用这个方法,并且把参数传递过来。

vue前端重构computed及watch组件通信等实用技巧整理_第9张图片

这里在父组件中绑定了自定义事件@getArgInfo,事件触发的getArgInfo方法:

vue前端重构computed及watch组件通信等实用技巧整理_第10张图片

子组件中通过$emit来调用getArgInfo方法,并且发送要传递的值。

vue前端重构computed及watch组件通信等实用技巧整理_第11张图片

3. 任意组件之间传值

如果B 和 C 这种兄弟组件也有东西要传递,通常可以使用2种方法:全局事件总线,消息发布与订阅。

消息发布与订阅我并没有使用,因为通过安装三方的js库来实现。这里我就直接使用了vue原生的全局事件总线的方式。

首先开启全局事件总线的配置,在main.js中添加。

vue前端重构computed及watch组件通信等实用技巧整理_第12张图片

接着,在需要接收数据的组件上绑定一个全局事件,通过使用this.$bus.$on,图中的getModule即事件名称,data接收传递来的数据。

vue前端重构computed及watch组件通信等实用技巧整理_第13张图片

最后,在发送数据的组件上使用这个全局事件,通过this.$bus.$emit,传入要发送的事件名称,带上要发送的数据。

vue前端重构computed及watch组件通信等实用技巧整理_第14张图片

4. vuex

vuex的定义:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应 用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方 式,且适用于任意组件间通信。

简单来说,什么时候用这个vuex:

多个组件依赖于同一状态来自不同组件的行为需要变更同一状态

原理图是这样:

vue前端重构computed及watch组件通信等实用技巧整理_第15张图片

在项目中的位置和结构是这样的:

vue前端重构computed及watch组件通信等实用技巧整理_第16张图片

注意在项目的前端脚手架中,vuex 是在store这个模块中使用。

state

这里记录了 vuex 管理的状态对象。

vue前端重构computed及watch组件通信等实用技巧整理_第17张图片

actions

值为一个对象,包含多个响应用户动作的回调函数。通过commit()来触发mutation中函数的调用,间接更新state

在组件中使用$store.dispatch('对应的 action 回调名') 触发。

不过在实际应用中,如果我只是为了直接修改state,而不用加一些逻辑判断条件后才去修改state,那就可以直接绕开action,直接调用mutations里的方法。

目前项目中actions就是空的,我在代码中直接调用mutations:

vue前端重构computed及watch组件通信等实用技巧整理_第18张图片

mutations

值是一个对象,包含多个直接更新 state 的方法,供actions里调用。

mutations中方法的特点:不能写异步代码、只能单纯的操作 state。

vue前端重构computed及watch组件通信等实用技巧整理_第19张图片

getters

这里还有一个非必须配置项getters,值也是一个对象,包含多个用于返回数据的函数。

什么时候用呢?

比如说 state 中的某个属性值,你需要依赖它然后进一步做计算处理,而且这个处理后的值很多组件都会用到,那么就可以使用getters配置项来处理。

vue前端重构computed及watch组件通信等实用技巧整理_第20张图片

这是脚手架里统一存放的位置,也可以跟上面的actions等写在一个文件中。

最后,要对外暴露这些属性才可以,脚手架中vuex的配置处理在这里:

vue前端重构computed及watch组件通信等实用技巧整理_第21张图片

以上就是vue前端重构computed及watch组件通信等实用技巧整理的详细内容,更多关于vue组件computed watch的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(vue前端重构computed及watch组件通信等实用技巧整理)