佛山网站建设no.1,wordpress 剪切板,怎样创作一个网站,苏州专业网站建设开发公司计算属性 vs 方法 vs 侦听器
计算属性的出现是为了解决模板内表达式太过复杂而变得难以维护。
假设我们知道长和宽#xff0c;要计算一个矩形的面积#xff0c;如果没有计算属性#xff0c;我们可能像下面这样处理#xff1a;
div idappinput t…计算属性 vs 方法 vs 侦听器
计算属性的出现是为了解决模板内表达式太过复杂而变得难以维护。
假设我们知道长和宽要计算一个矩形的面积如果没有计算属性我们可能像下面这样处理
div idappinput typetext v-modelwidthinput typetext v-modelheightp面积是{{area()}}/p
/div
scriptvar app new Vue({el: #app,data: {width:0,height:0},methods: {area: function() {return this.width * this.height}},})
/script使用计算属性
div idappinput typetext v-modelwidthinput typetext v-modelheightp面积是{{area}}/p
/div
scriptvar app new Vue({el: #app,data: {width:0,height:0},computed:{area:function(){return this.width*this.height}}})
/script它们的区别是使用方法需要每次获取值都调用该方法使用计算属性会将值缓存只在它的响应式依赖变化时才会重新计算。
侦听器和计算属性一样都会监听数据的变化但是对于要监听的属性侦听器需要给它们每一个都单独设置响应函数计算属性则只需按需按需设置例如上面的例子使用侦听器的话
div idappinput typetext v-modelwidthinput typetext v-modelheightp面积是{{area}}/p
/div
scriptvar app new Vue({el: #app,data: {width:0,height:0,area:0},watch:{width:function(newVal){this.area newVal * this.height},height:function(newVal){this.area newVal * this.width}}})
/script这样会显得重复冗余。
所以计算属性适用于基于其他属性计算出派生值的情况例如计算面积、价格等也适用于需要进行一些复杂的数据处理和转换侦听器适用于监听属性的变化然后执行一些异步操作例如API调用、副作用例如更新其他属性或自定义逻辑例如数据变化时的动态效果。 计算属性的getter与setter
计算属性默认是getter我们也可以设置其setter。
div idapppBase Count: {{ baseCount }}/ppCurrent Count: {{ count }}/pbutton clickincrementCountIncrement Count/buttonbutton clickincrementBaseCountIncrement Base Count/button
/divscriptnew Vue({el: #app,data: {baseCount: 5},computed: {count: {// Getter functionget: function () {return this.baseCount * 2;},// Setter functionset: function (newCount) {this.baseCount newCount / 2;}}},methods: {incrementCount: function () {this.count;},incrementBaseCount: function () {this.baseCount;}}});
/script我们可以注意到getter导致的count改变不会触发setter同时setter导致的baseCount改变也不会触发getter。
