vue.js 计算属性和监听器

妖狐艹你老母 2023-06-22 03:27 3阅读 0赞

### vue.js 计算属性'computed'和监听器'watch' ###

*  计算属性 computed
 *   *  案例
     *  计算属性双向绑定
     *  监听器watch

# 计算属性 computed #

计算属性 类似于 methods 选项中定义的函数  
计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。  
函数 每次都会执行函数体进行计算。  
需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分

## 案例 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70]

## 计算属性双向绑定 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70 2]  
1.函数没有缓存，每次都会被调用

2.计算属性有缓存，只有当计算属性体内的属性值被更改之后才会被调用，不然不会被调用

3.函数只支持单向的 即：不能改变 sumScore()框里面的值

4.计算属性默认只有getter函数,而没有set函数 所以只支持单向  
如果你要进行双向 则需要定义setter方法

## 监听器watch ##

使用方法一

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70 3]使用方法二

![在这里插入图片描述][20191213184012937.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191213174600823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191213174942943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191213174832711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191213183935737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyZW50dG9t,size_16,color_FFFFFF,t_70
[20191213184012937.png]: https://img-blog.csdnimg.cn/20191213184012937.png