vue computed watch,vue的watch和computed使用场景

　　本文主要介绍vue前端重构的实用技巧，如计算和观察组件通信。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。

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

　　继续更新

　　目前项目进度的前端重建已经完成，除了重建之外还优化了一些交互。在这个重建过程中，我感觉还是有很多收获的，尤其是对于vue的一些前端知识的应用。

　　与其今天分享具体的开发记录，不如整理一些过程中用到的vue知识点，结合实际项目代码实例，方便后续复习，也为有需要的童鞋提供参考。

　　可以分为两类：常规的和组件通信相关的。

一、常规知识点

1.mounted 与 created

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

　　说的通俗一点，比如有些事情，我一上来就要做，可以放在这里执行。

　　但是要注意两者的区别：

　　Created:在模板呈现为html之前调用。此时，虽然浏览器解析dom、css、js、

　　Mounted:在模板呈现为html后调用

　　以项目中的代码为例：

　　有一个使用created的列表页面，里面的数据通过后端接口返回。希望列表一上来就能自动显示数据，自然要先做后端接口请求。

　　用mounted，比如我拉出来的一个组件，我希望组件一准备好，就用event clear把自己绑定起来，这样其他组件就可以随时调用这个事件。

　　如果你的操作不涉及到操作一些dom，那么你可以在created里面做。这时就可以访问data中的数据了。相反，它只能放在mounted中，因为只有在渲染完成后才能操作dom。

2. 计算属性 computed

　　如果你想用的一些属性不存在，但是需要通过已有的属性进一步计算，建议使用计算属性。

　　实际代码示例：

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

　　这里我定义了一个计算属性叫做needRefreshList，因为计算属性最后出现在vm上，所以可以直接在模板中使用needRefreshList。在其他一些方法中，也可以通过this.needRefreshList获得。

　　这里注意，上图的是一个完整的写方法，有get和set方法。它的用途是什么：

　　Get:在第一次读取和依赖数据发生变化时执行。

　　Set:如果计算出来的属性需要修改，只能通过set函数修改。此外，应在set函数中更改从属数据。

　　如果你只需要得到它而不需要改变它，你可以使用速记。

　　一般来说，方法方法也能达到这个效果。不过computed有这个vue内部缓存机制，更高效，更容易调试。

3. 监视属性 watch

　　顾名思义，监控属性可以用来监控属性的变化。当被监控的属性发生变化时，自动调用回调函数执行一些相关操作。

　　我们以上面的计算属性needRefreshList为例。

　　我在监视中监视属性needRefreshList。这个属性被我用来标记列表是否需要刷新，所以我不得不注意needRefreshList值的变化。当有变化时，我会执行handler()方法中的东西。

　　上图也是完整的写法，你也看到了即时和深刻：

　　Immediate:表示立即，初始化时调用一次。

　　深度：深度监控。如果您正在监视的属性是一个对象，其中可能有多个级别。只要其中任何一级的值发生变化，你都应该知道。然后深：真的就好。

　　如果不能使用以上两个配置项，可以使用简写。

二、组件通信相关

　　剩下的就是这个重构中用到的关键知识，都是围绕着组件之间的通信。

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

　　a是最外面的父组件，它包含两个子组件，B和CB和C是兄弟，C包含另一个子组件d。

1. 父组件给子组件传递

　　例如，在父组件C中，要将一个值(或方法)传递给子组件D，这里使用props来传递它。

　　首先，绑定要在父组件中传递的数据，比如这里的current-tab-name和current-data。

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

2. 子组件给父组件传值

　　在父组件中绑定一个自定义事件，然后通过事件的方法接收参数。最后，子组件调用此方法并传递参数。

　　这里，自定义事件@getArgInfo被绑定在父组件中，事件触发的getArgInfo方法：

　　getArgInfo方法由子组件中的$emit调用，并发送要传递的值。

3. 任意组件之间传值

　　如果像B和C这样的兄弟组件有东西要交付，通常有两种方法：全局事件总线、消息发布和订阅。

　　我没有使用消息发布和订阅，因为它是通过安装三方的js库实现的。在这里，我直接使用vue的原生全局事件总线。

　　首先，打开全局事件总线的配置，并将其添加到main.js中

　　然后，将一个全局事件绑定到需要接收数据的组件。用这个。$巴士。$on，图中getModule是事件名，data接收传递的数据。

　　最后，在发送数据的组件上使用这个全局事件，并通过这个传递要发送的数据和要发送的事件的名称。$巴士。$emit。

4. vuex

　　vue的定义：在Vue中实现集中式状态(数据)管理的Vue插件。它集中管理(读/写)Vue中多个组件的共享状态，也是组件之间的一种通信方式，适用于任何组件之间的通信。

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

　　多个组件依赖于同一个状态，不同组件的行为需要改变同一个状态。

　　示意图是这样的：

　　在项目中的地位和结构如下：

　　注意，在项目的前端搭建中，模块存储中使用的是vuex。

　　状态

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

　　行动

　　Value是一个对象，它包含多个响应用户操作的回调函数。使用commit()触发变异中函数的调用，间接更新状态。

　　使用$store.dispatch(相应的操作回调名称)在组件中触发。

　　但在实际应用中，如果我只是直接修改状态，而没有添加一些逻辑判断条件，我可以直接绕过动作，调用突变中的方法。

　　目前，actions项目中是空的，我在代码中直接调用突变：

　　突变

　　Value是一个对象，包含几个直接更新状态的方法，可以在actions中调用。

　　突变中方法的特点：不能写异步代码，只能简单操作状态。

　　吸气剂

　　还有一个可选的配置项getters，值也是一个包含多个用于返回数据的函数的对象。

　　你什么时候使用它？

　　例如，如果您需要依赖state中的一个属性值并做进一步的计算处理，并且这个处理后的值将被许多组件使用，那么您可以使用getters配置项来处理它。

　　这是脚手架中统一的存储位置，也可以和上面的动作一起写在一个文件中，等等。

　　最后，只能将这些属性暴露给外界。脚手架中vuex的配置如下：

　　以上是computed和watch组件通信的vue前端重构等实用技能的详细内容。更多关于computed watch的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。