对vue计算属性computed与watch的理解

女爷i 2022-02-01 20:15 180阅读 0赞

watch和computed各自处理的数据关系场景不同

1.**watch**擅长处理的场景：**一个数据影响多个数据**

2.**computed擅**长处理的场景：**一个数据受多个数据影响**

watch示例
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="myDiv">
    		</div>
    	</body>
    	<script type="text/javascript">
    		let vm = new Vue({
    		  // 选项
    		  el: '#myDiv',
    		  data:{
    		  	animal:'动物',
    		  	tiger:'老虎',
    		  	lion:'狮子',
    		  	cat:'猫'
    		  },
    		  methods:{
    		  	
    		  },
    		   watch: {
    		    animal: function (newValue,oldValue) {
    		      this.tiger = newValue  + this.tiger
    		      this.lion = newValue + this.lion
    		      this.cat = newValue  + this.cat
    		      console.log(this.tiger);
    		      console.log(this.lion);
    		      console.log(this.cat);
    		    }
    		  },
    		  computed:{
    
    		  }
    		})
    		vm.animal='红色皮肤的'
    	</script>
    </html>

computed示例
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    	</head>
    	<body>
    		<div id="myDiv">
    			<p>{
       {animalworld}}</p>
    		</div>
    	</body>
    	<script type="text/javascript">
    		let vm = new Vue({
    		  // 选项
    		  el: '#myDiv',
    		  data:{
    		  	tiger:'老虎',
    		  	lion:'狮子',
    		  	cat:'猫'
    		  },
    		  methods:{
    		  	
    		  },
    		  computed:{
    			animalworld:function(){
    				return this.tiger+','+this.lion+','+this.cat
    			}
    		  }
    		})
    		vm.tiger='东北虎'
    	</script>
    </html>