Vue计算属性computed和监视属性watch

2021-12-23 10:32:24 阅读：140 来源： 互联网

标签：Vue computed get watch value 监视属性

计算属性computed和监视属性watch

1 计算属性computed基本应用

1.1 完整写法

  computed: {
    chekedTotle: {
      get() {
        return  //值
      },
      set(value) {
        //逻辑
      },
    },
  }

chekedTotle为计算属性的名字,不能与data中的值重名
get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值,get中必须要有return
set回调函数:监视当前属性值发生改变时调用,更新相关的属性值,也可以添加新的逻辑

1.2 简写

sum1() {
      //  计算规则     
        }
      });
      return  //  返回值
    },

配置成函数形式，只有用到get时才可以简写

2 监视属性watch的基本应用

2.1 完整写法

watch: {
    todos: {
    //开启深度监视
      deep: true,
      //初始化就执行一次
      immediate:true,
      handler(value) {
      	//具体逻辑代码
        localStorage.setItem("todos", JSON.stringify(value));
      },
    },
  },

2.2 简单写法

watch: {
    todos（value）{         
      	//具体逻辑代码
        localStorage.setItem("todos", JSON.stringify(value));
    },
  },

2.3 第三种写法

vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})

2.4 总结

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！
配置deep:true可以监测对象内部值改变（多层），默认不监测对象内部值的改变。

3. watch和computed用法区别

watch支持异步操作，computed不支持

watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
			}

如上代码，watch可以延时加载，而computed不可以。采用哪种方式，看具体业务需求，大部分是可以通用的。

标签：Vue,computed,get,watch,value,监视,属性
来源： https://blog.csdn.net/yyclassmvp/article/details/122089916

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9