vue2.x版本中computed和watch的使用详解-computed

前言在基于vue框架的前端项目开发过程中，只要涉及到稍微复杂一点的业务，我们都会用到计算属性的钩子函数。可用于对某些状态进行联合处理和缓存。基本使用computed中，声明一个函数，需要提供一个返回值用于页面显示或者结合其他方法进行处理结合状态state，通过changeName返回一个依赖名字的字符串

computed基本使用

namevalue:{{name}}

{{changeName}}

data(){return{name:"zhangsan",};},computed:{changeName:function(){return`Apieceoftextthatdependsonname:${this.name}`;},}，使用其他组件状态主动触发计算方法，相比不依赖其他状态的区别，通过点击事件，主动触发一些操作

{{isCache}}

{{cacheTip}}

{{changeCache}}

修改文本

data(){return{cacheTip:"cacheTiporiginalvalue",};},computed:{isCache:function(){返回`一段不依赖于任何属性值的文本`;},changeCache:function(){return`dependsoncacheTip,${this.cacheTip}`;},},methods:{handleChange(){this.cacheTip="缓存提示状态已修改";},},当我们点击修改状态时，可以看到cacheTip只会被修改，依赖cacheTip的changeCache也会改变isCache，因为它没有关联其他状态，所以原值不变。getterVSsetter上面的cacheTip，或者说isCache，在computed的一般方法中，默认使用getter方法。获取处理后的值可以写成isCache:{setter:function(){return`一段不依赖于任何属性值的文本`;}}通过getters和setters可以对需要处理的state进行进一步处理

{{firstName}}

{{lastName}}

{{setterGetter}}

修改文本

data(){return{firstName:"lewyon001",lastName:"Buu001",};},computed:{setterGetter:{//getterget:function(newValue){console.log("newValue",newValue);返回this.firstName+""+this.lastName;},//setterset:function(newValue){console.log("newValue",newValue);this.firstName=`${newValue.firstName}`;this.lastName=`${newValue.lastName}`;},},}方法：{handleChangeFirst(){this.setterGetter={firstName:"lewyon",lastName:"Buu"};},},get属性可以获取到最原始的依赖值和process,set方法，可以获取修改后的依赖值，修改后显示在页面上或者进行其他业务需要的处理computed方法的基础，包括高级操作，setter和getter方法的使用是上面建议的一个经常使用的方法，computed可以作为依赖其他状态的缓存，包括一些不经常更新的内容，减少开销。简单的字符串模板在开发中结合其他状态和其他场景，我们都可以使用。结合watch等vue和watch的区别，以及watch的使用详解，在个人博客持续更新。以上例子源码已经开源，后续关于vue的笔记会持续更新码云https://gitee.com/lewyon/vue-notegithubhttps://github.com/akari16/vue-note文章个人博客地址：vue2.x版本中computed和watch的使用详解——computed的创建不易，转载请注明出处和作者。