Vue中的计算属性（computed）与侦听属性（Watch）

喜欢ヅ旅行 2022-10-01 13:51 225阅读 0赞

computed计算属性：当依赖的属性的值发生变化时，计算属性会重新计算，否则使用缓存中的属性值。  
功能：双向绑定、缓存值、分离逻辑  
基本用法：

`computed: { rooms(){ return this.$store.state.rooms1 } }//当vuex里面的rooms1变化，那么计算属性就会响应式地发生变化，重新渲染`

计算属性地getter和setter函数：  
getter函数：当依赖的属性值发生变化的时候，计算属性也自动进行更新。  
setter函数：当给计算属性赋值的时候会调用setter函数，多用于修改计算属性自身的值的时候。需要注意的是：当包含计算属性的节点被移除或模板中其他地方没有引用该属性的时候，计算属性的getter函数是不会执行的。

data(){
    	return {
    		room:[]
    	}
    }
    computed:{
    		rooms:{
    			get(){
    				return this.$store.state.rooms1
    			},
    			set(newValue){
    				this.room = newValue
    			}
    		}
    }
    **watch:**
    每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
    **watch和computed比较**
    watch：是观察的动作；
                 监听props、$emit或本组件的值执行异步操作；
                 无缓存性，页面渲染的时候值不变化也会执行；
     computed：是计算属性；
                        简化template里面{
       {}}的计算、处理props或$emit的传值
                        有缓存性，页面渲染的时候值不变化，计算属性会返回之前的计算结果，而不必再次执行函数。
     所以说，有的时候，我们从vuex里面取数据，并需要对该数据进行处理的时候，可以结合使用computed和watch。因为如果只是使用computed的话，vuex里面取的数据内容没有变化，也不会触发里面的set方法来对获取的vuex中的数据进行处理。下面放一段代码易于理解：

data() \{  
return \{  
myFloor: “”,  
roomsData: \[\],  
floors: \[\],  
roomList: \[\]  
\};  
\},  
computed: \{  
rooms()\{  
return this.$store.state.rooms1//获取vuex里面的数据  
\}  
\},  
watch: \{  
rooms: \{  
handler: function(val) \{//处理获取的数据  
this.roomsData = val;  
//获取楼栋和楼层  
this.floors = \[\];  
for (let item of this.roomsData) \{  
if (item.louloop\_yesno == true) \{  
this.floors.push(item.floor);  
\}  
\}  
//初始化房态数据  
this.getFloors(this.roomsData\[0\].floor)  
\}  
\}  
\}