芝士蒸梨（四）：Vue的method/watch/computed区分

芝士蒸梨（四）：Vue的watch、computed、methods区分

watch：数据监听

作用：监听data中属性的变化，改变则执行watch中对应函数。

适用场景：一个数据影响多个数据。监听一个数据，若其发生变化，则执行其他一系列逻辑函数来影响其他数据。

• watch函数名称即为data中的属性名称
• watch函数在所监听的属性发生改变，即进行调用
• watch可以有两个参数，新值和旧值
• watch默认无法监听对象内部属性，需要设置handler函数和deep深度监听
• watch默认在页面第一次渲染时不监听，可以设置handler函数和immedate属性

<script>
export default {
	name: "app",
  	data() {
    	return {
      	count: 0,
      	person: {
	        name: {
	          	words: 3,
	          	language: 'Chinese'
	        },
	        age: 19
	      }
		};
  },
  watch: {
	   // 侦听主体：count
	   // 普通用法一
	   count(){
	      console.log("count 发生了变化");    }
	   }
	  // 普通用法二
	   count : {
	      handler() {
	         console.log("count 发生了变化");     
	     }
	   }
	   // 获取新旧值用法一
	   count(newValue, oldValue) {
	      console.log("count 发生了变化");
	      console.log("变化前为"+oldValue);
	      console.log("变化后为"+newValue);
	   }
	  //获取新旧值用法二
	   count : {
	      handler(newValue, oldValue) {
	         console.log("count 发生了变化");     
	         console.log("变化前为"+oldValue);
	         console.log("变化后为"+newValue);
	     }
	   }
	  // 页面首次渲染则触发监听
	   count : {
	      handler() {
	         console.log("count 发生了变化");     
	     },
	      immediate: true
	   }
	
	   // 侦听主体：对象person
	  // 深度监听，检测对象所有属性的变化
	   person : {
	      handler() {
	        console.log("person 有属性发生了变化");   
	        console.log("变化前为"+oldValue);
	        console.log("变化后为"+newValue);  
	     },
	       deep: true
	   }
	
	   // 侦听主体：对象person的属性
	  // 字符串形式，检测对象某个具体属性的变化
	   'person.name.words' : {
	       handler(newValue, oldValue) {
	        console.log("person 有属性发生了变化");   
	        console.log("变化前为"+oldValue);
	        console.log("变化后为"+newValue);  
	     }
	   }
};
</script>

computed：计算属性

作用：对属性做复杂计算得到数据。可以就当作是一个新的属性，其值计算来自于其他属性

适用场景：多个数据影响一个数据。依赖于data，对data属性值进行复杂逻辑运算后返回单一数据。

• computed内部函数必须将数据return，以变量形式返回
• 尽量不在computed函数体内进行data属性的赋值
• 调用时不用加（）
• 两个属性：
  • 依赖：依赖于data属性或其他对象和变量
  • 缓存：存储上一次的值
• 依赖的属性发生变化，就立刻重新调用计算，返回新值作为计算属性的值；否则不调用，计算属性的值就是上次缓存的值

computed : {
            likeImg() {
                return this.liked?require('../assets/images/image 12.png'):require('../assets/images/image 8.png');
            },
            likedTxt() {
                const list = this.album.likedUserList;
                const len = list?list.length:0;
                if (len===0) return '还没人赞过';
                let result='';
                for (let i=0; i<len; i++) {
                    result += list[i].nick;
                    if (i!==len-1) {
                        result += '、';
                    }
                }
                return result+'觉得很赞';
            }
}

methods：函数调用

作用：即时执行一些逻辑函数以达到一定功能

适用场景：及时响应一些事件操作，如点击等

• 可以不返回数据，在函数体内进行赋值等其他操作
• 调用时需要带上（）
• 页面刚加载时会调用执行一次，之后只有在进行主动调用时才会执行
• 没有缓存，每次调用每次执行

methods : {
            clickLike() {
                this.liked = !this.liked;
                    if (this.liked) {
                        this.album.likedUserList.push(this.$owner);
                    } else {
                        this.album.likedUserList.pop();
                    }
                },
            handleComment() {
                let date = new Date();
                let d = {
                    nick: this.$owner.nick,
                    avatar: this.$owner.avatar,
                    comment: this.myComment,
                    time: date.getHours()+":"+date.getMinutes()
                }
                this.album.commentList.push(d);
                this.myComment = '';
            }
}