vue中computed计算属性和watch侦听器的区别

1.作用不同:

计算属性是为了解决模板语法的冗余问题   侦听器是为了侦测data中单个数据的变化

2.计算属性有缓存   侦听器没有缓存

3.计算属性不支持异步操作   侦听器支持异步操作

4.计算属性可以新增一个属性   侦听器一定要是data中已经存在的属性

---

以下内容是computed计算属性和watch侦听器的详细解析

一、computed 计算属性

1.作用：解决模板语法的冗余问题

2.应用场景：求累加和（经典：多选全选）

3.语法：

（1）函数写法 

computed: { 计算属性名() {  return 计算属性值 }  }

 （2）对象写法

get和set方法的区别:

get只能获取的时候使用,set只能修改的时候使用

computed: {

                计算属性名: {

                    get() {  },

                    set(value) {  }

                }

            }

 4.特点

(1)当第一次使用计算属性的时候,会执行这个函数,并把函数的返回值放入缓存

(2)下一次使用计算属性的时候,vue不会执行这个函数,而是直接从缓存中读取

(3)当计算属性内部的数据发生变化的时候,才会重新执行这个函数,并把新的函数返回值放入缓存

5.经典单选全选案例

   

   

   

   

   

   

   

   

        全选

       

           

•                 {{item.name}}

             

       

   

   

二、watch侦听器

1.作用:监听data中某一个数据的变化

2.语法:

(1)值类型

watch:{

                要侦听的属性名(newVal,oldVal) {    }

            }

(2)引用数据类型(深度监听)

watch: {

                要侦听的属性名: {

                    deep: true, // 深度侦听复杂类型内变化

                    handler (newVal, oldVal) {}

                }

            }

3.深度监听案例 

   

   

   

   

   

   

   

   

        用户名:

       

        密码: