Vue中methods，computed，watch的区别

最新推荐文章于 2024-09-21 11:34:18 发布

日暮途远人间何世？

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量150

点赞数 1

文章标签： vue js javascript vue.js

本文链接：https://blog.csdn.net/weixin_45223696/article/details/106452311

版权

methods

methods中定义的都是具体的方法，根据一些触发条件，调用一次，重新执行一次。

比如说点击事件

<template>
	<div>
        <!-- 调用一次，执行一次 -->
    	<div @click="onClick">
            
    </div>
    </div>
</template>

<script>
export default{
    methods:{
        // 定义一些事件处理函数
        onClick(){
            window.console.log("hello word")
        }
    }
}
</script>

computed

computed是vue中独有的一个计算属性，它是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。
计算属性默认只有getter，可以在需要的时候自己设定setter
setter默认有一个参数(用不到也可以不写)

比如说购物车总价总价总量计算，用计算属性实现会变得非常容易。

<script>
	export default{
        computed:{
            // 总价计算
    		totalPrice(state) {
      		// 声明一个变量
      		let totalPrice = 0
      		// 循环购物车数组
      			state.shoppingCartItem.forEach(ele => {
        			// 如果选中则累加商品价格*商品数量
        			if(ele.checked == true){
          				totalPrice += ele.count * ele.price
        			}
      			})
      			// 导出
      		return totalPrice
        }
    }
</script>

vue中input的值双向绑定的数据必须在data中定义，但是由于使用了vuex，数据全部定义在vuex中，所以采用计算属性的get和set定义双向绑定的值。

<script>
	export default{
          computed: {
    		test:{
        		// get方法获取vuex的数据并return
      			get(){
        			return this.$store.state.shoppingCartCheckAll
      			},
        		//set方法接收一个参数，这个参数就是绑定的布尔值
        		//set会改变传过来的值
      			set(v){
        		//window.console.log(v)
          		//提交一个方法 在vuex中定义并处理
        		this.$store.commit("oncheckAll",v);
      			}
    		}
  		},
    }
</script>

总结：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods。

watch

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

商品的多重筛选可以用到这个属性。

<script>
    export default{
        watch: {
    filter: {
      handler: function(val, oldval) {
        window.console.log(oldval);
        // 声明一个数组
        let arr = [];
        // 每次点击价格筛选就会给对象的价格条件属性重新赋值
        // 如果不等于初始设置的值
        if (val.price !== -1) {
          // 如果重新赋值为0判断
          if (val.price === 0) {
            this.data.forEach(ele => {
              if (ele.price < 3999) {
                arr.push(ele);
              }
            });
          } else if (val.price === 1) {
            this.data.forEach(ele => {
              if (ele.price >= 4000 && ele.price <= 4499) {
                arr.push(ele);
              }
            });
          } else if (val.price === 2) {
            this.data.forEach(ele => {
              if (ele.price >= 4500 && ele.price <= 4999) {
                arr.push(ele);
              }
            });
          }
          // 判断完所有下标后把定义的数组赋值给页面显示的数组
          // return出来
          this.currentData = arr;
        } else {
          // 如果没有重新赋值则赋值为原数组
          this.currentData = this.data;
        }
        let newArr = [];
        // 如果类型筛选条件不为空,也就是重新赋值了
        if (val.type.length !== 0) {
          // 循环页面显示的数组
          this.currentData.forEach(ele => {
            // 如果提交的类型存在就添加到新数组
            if (val.type === ele.type) {
              newArr.push(ele);
            }
          });
          // 赋值
          this.currentData = newArr;
        } else {
          newArr = this.currentData;
        }
      },
      deep:true
    }
  },
    }
</script>