Vue.js中的计算属性、监视属性与生命周期详解

前言

本章节咱们来说一下vue中两个非常重要的计算属性、监视属性和生命周期，不废话直接上干货

计算属性

计算属性介绍

在模板中可以直接通过插值语法显示一些data中的数据，有些情况下我们需要对数据进行转化或者计算后显示，我们可以使用computed选项来计算，这时有些小伙伴可能就会问，我直接定义函数再调用不就行了，为什么还要整一个计算属性呢？这个问题在下边再做解释，我们先来看一下计算属性怎么用！

入门案例

需求

将人的姓和名拼接在一起

代码

效果

统计价格案例

代码

getter和setter方法

介绍

计算属性的完整写法其实是其中包含了getter和setter方法，声明一个fullname对象，因为我们一般只获取值，所以会将其省略写成上边案例的方式，我们在获取数据时会调用get方法，设置数据时会调用set方法

代码

计算属性缓存

这里就来回答一下上边的methods和computed的区别的问题，下方代码分别使用插值语法、methods、计算属性来做数据渲染。

代码

图解

结论

• methods和computed看起来都能实现我们的功能
• 计算属性会进行缓存，如果多次使用时，计算属性只会调用一次
  

监视属性

概述

我们可以使用watch来监听指定数据的变换，进而调用对应的逻辑处理数据

代码

总结

监听属性要比计算属性代码多很多，计算属性只需要计算数据即可，而监听属性需要监听每个数据的变化

vue生命周期

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高

生命周期大致分为三个阶段 初始化阶段 、 更新阶段 、 死亡阶段

初始化阶段

该阶段在new vue 实例时调用，并且只调用一次

beforecreate：创建之前调用函数

created：创建之后调用函数

之后进行挂载和模板渲染

beforemount：挂载前操作，去替换el选中的标签

mounted：挂载完成，数据显示在浏览器上

更新阶段

当数据发生变化时进入该阶段，该阶段会 频繁调用

beforeupdate：当数据发生修改时触发

updated：虚拟dom发生修改后，也就是数据修改后调用

死亡阶段

死亡阶段 也只 调用一次

beforedestroy：销毁之前

destroyed：销毁

示例代码如下

图示如下，在页面刷新时依次调用 beforecreate、created、beforemount、mounted，定时器运行修改isshow数据时多次调用 beforeupdate、updated，点击按钮调用注销函数，调用beforedestroy、destroyed

总的来说created、mounted、beforedestroy较为常用

• created、mounted：发送ajax请求，启动定时器等异步任务
• beforedestroy：做收尾工作，如：清除定时器

总结

到此这篇关于vue.js中计算属性、监视属性与生命周期的文章就介绍到这了,更多相关vue计算属性、监视属性与生命周期内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！