computed计算属性及方法对比和循环遍历统计以及watch和watchEect监听的用法

1.computed计算属性及方法对比

1.了解computed计算属性和用法

在我们的一些应用中可以看的应用会给我们提供一些计算类的功能比如取名，它会给你提供两个输入框，然后在你给这两个输入框输入值的时候会在下方生成你输入这个两个值的结合值，就比如你先输入了一个姓氏，然后输入一个名，下方就会生一个姓名。

我们先在uni-app里面创建一个页面然后给其一些组件和css属性等

页面示例：

当我们分别给两个赋予值时

会发现我们的两个属性在下方结合在了一起，是因为我们调用了{{}}给两个输入框的值冰并和在了一起。

我们也可以使用我们的函数来完成。

保存好我们修改的代码后去页面看一下我们的效果是否还和之前的效果一致。

但是我们右击检查页面的时候，会发现我们调用了三次我们的函数就运行了三次，控制台输入是因为我们在函数里面添加了console.log("函数计算")，来查看我们执行了多少次我们的函数。

但是如果我想要调用了多次，却只需要执一次我们的方法时可以使用我们的computed来实现。

保存好我们的运行结果之后去页面查看。

这个方法可以帮助我们节省性能，在需要进行多次相同的运算是需要使用此方法可以大大节约我们的性能。

在使用我们的computed的时候需要注意不要更改值。

我们不可以修改我们的computed的值否则会发生错误。

2.computed的循环计算

1.computed的认知和用法

我们在又多个数据的情况下需要计算他们的总值时可以使用我们的computed的循环计算来完成。

先创建我们的页面，示例：

添加了以上的代码后在我们的页面显示的地方使用checkbox-group包裹住，并且添加上@change给其赋予一个点击方法，我们吗可以从点击方法里面获取我们的值。

我们可以在选中产品的下方添加一个显示我们数组的值。

添加好了之后到页面中查看我们的效果。

这个时候我们可以来给我们的数组新增一个是否被选中的属性，我们默认给其值为false，在checkbox里面添加一个：checked属性在这个属性里面调用我们的是否被选中的属性。

我们将我们整个的数组放在一个view里面到页面中展示我们的数组，观察我们的数组是否被选中且，改为了true。

这样我们就可以根据这个属性来找到我们的价格，从而完成我们的计算我们选中的总共价值是多少了。

我们在下放创建了一个函数，将我们的总价值改为我们创建的函数，根据我们的是否被选中的属性，从而计算出我们的总价值，filter是根据我们依靠什么属性来作为依据，reduce是来定义我们的总价值，一个属性适总价另一个是这个被选中的对象里面我们所定义的price属性，这个依靠我们的遍历来实现的，将我们的所以内容遍历完成之后才会给出我们的总金额。

这个就是我们的computed的循环遍历数组的作用，可以依靠遍历来实现我们的取总。

3.watc和watchEect监听器的用法

1.了解我们的watch的基本用法

我们如果需要在改变我们的值的时候将我们新改变的值获取可以使用我们的watch监听器，这个监听器的作用是我们在改变值的时候获取到我们改变的新值和老值。

如果我们只需要我们新输入的值，可以将我们的新值后面的参数去掉 ，只保留我们的新值。我们将我们的变量该为数组，然后只取我们指定的值。

没有输出我们刚刚改变的新值是因为我们的取值范围并没有确地下来，所以我们需要将我们的watch里面的取值范围改成我们的指定属性即可。

我们可以以使用我们的另一个方法来实现，这个需要我们的deep也就是深层监听，不过这个监听在我们的官网里面说明会影响我们的性能，可以去官网自己了解一下。在使用我们的深层监听的时候也可以使用我们的立即执行immediate这个作用是我们一进去就会执行一次。

链接：侦听器 | Vue.js (vuejs.org)

我们改为之前的那个项目将我们的计算器改为我们的watch

我们也可以使用我们的watchEffect来实现我们改变其中一个值的时候，就会同步出我们的两个输入框里面的值。

所以我们的watchEffect就是我们在对页面的值改变是获取我们的被改变页面的所有值。

这个以上就是我们的watch和watchEffect监听器的认知和用法。