Vue常用属性（计算属性和侦听器属性）

目录

计算属性computed

名称例子：

 浏览器实现：

性和名输入：

只读输入： 

读写输入：

 侦听器属性watch

练习例子:

浏览器实现：

属性侦听：

对象侦听：

 对象中的属性侦听：

---

官网地址：计算属性和侦听器 — Vue.js (vuejs.org)

计算属性computed

• 方法名可以直接在对象中使用.这个属性是通过计算得出的
• 这个方法中的任意属性改变，都会触发这个方法

​​使用场景：希望把一些计算的业务逻辑放在方法中，例如：全名计算、地址计算、购物车合计

名称例子：

此例子中有使用方法实现的，也有计算属性实现的。

推荐使用计算属性的方式。有缓存机制，在页面重复调用多次的情况下，只执行一次

    
    
    


    

        

            姓： 
            名：

            方法只读实现：

            计算属性只读实现：

            计算属性读写实现：
        
    

 浏览器实现：

性和名输入：

姓和名改的话后面都会跟着一起改

只读输入： 

 只读的实现其他的却不会跟着一起改，还会有浏览器报错的情况出现

读写输入：

 读写实现其他的也是可以一起跟着改，但是计算属性一般只有只读的，读写使用的不多

 

 侦听器属性watch

• 被侦听的属性发生改变时，调用回调函数，执行相关操作
• 侦听属性须存在才能进行侦听

 ​​使用场景：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，例如：需要对修改前后的数据操作、名称修改

练习例子:

此次例子不需要HTML代码演示，但是HTML代码要写个div盒子绑定el，要不浏览器会报错

浏览器实现：

属性侦听：

最常用的一种侦听，可以拿到修改前后的数据

对象侦听：

immediate初始化属性：网页刷新自动执行一遍此监听。

deep深度侦听属性：用来侦听整个对象的改变，没有这个属性，就不能对对象进行侦听。

但要慎重使用，因为太消耗性能；而且修改前的对象和修改后的对象数据一样，应该是个bug可能在以后的Vue版本会对其进行修复。

 对象中的属性侦听：

如果要侦听对象，建议使用这种方式；

因为name是person对象中的数据，所以对象侦听也执行了