网站建设微信公众号小程序app,网站建设术语名词,有记事本做简易网站,网站首页制作采用Vue.js3组件的方法-CSDN博客
使用Vue3组件的计算属性-CSDN博客
Vue3组件计算属性的get和set方法-CSDN博客
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时#xff0c;才会重新求值。
计算属性的写法和方法很相似#xff0c;完全可以在method…Vue.js3组件的方法-CSDN博客
使用Vue3组件的计算属性-CSDN博客
Vue3组件计算属性的get和set方法-CSDN博客
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
计算属性的写法和方法很相似完全可以在methods中定义一个方法来实现相同的功能。
其实计算属性的本质就是一个方法只不过在使用计算属性的时候把计算属性的名称直接作为属性来使用并不会把计算属性作为一个方法来调用。
为什么还要使用计算属性而不是定义一个方法呢计算属性是基于它们的依赖进行缓存的即只有在相关依赖发生改变时它们才会重新求值。例如在【例3.1】中只要message没有发生改变多次访问reversedMessage计算属性会立即返回之前的计算结果而不必再次执行函数。
反之如果使用方法的形式实现当使用reversedMessage方法时无论message属性是否发生了改变方法都会重新执行一次这无形中增加了系统的开销。
在某些情况下计算属性和方法可以实现相同的功能但有一个重要的不同点。在调用methods中的一个方法时所有方法都会被调用。
例如下面的示例定义了两个方法add1和add2分别打印numbera、numberb当调用其中的add1时add2也将被调用。 【例3.7】 方法调用方式源代码\ch03\3.7.html。 div idappbutton v-on:clickaa1/buttonbutton v-on:clickbb1/buttonpnumbera{{add1()}}/ppnumberb{{add2()}}/p
/div
!--引入Vue文件--
script srchttps://unpkg.com/vue3/dist/vue.global.js/script
script//创建一个应用程序实例const vm Vue.createApp({//该函数返回数据对象data(){return{a:0,b:0,number:30}},methods: {add1:function(){console.log(add1);return this.athis.number},add2:function(){console.log(add2)return this.bthis.number}}//在指定的DOM元素上装载应用程序实例的根组件}).mount(#app);/script在Chrome浏览器中运行程序打开控制台单击a1按钮可以发现控制台调用了add1()和add2()方法如图3-9所示。 使用计算属性则不同计算属性相当于优化了的方法使用时只会使用对应的计算属性。例如修改上面的示例把methods换成computed并把HTML中调用add1和add2方法的括号 去掉。 注意计算属性的调用不能使用括号例如add1、add2。而调用方法需要加上括号例如add1()、add2()。 【例3.8】 计算属性的调用方式源代码\ch03\3.8.html。 div idappbutton v-on:clickaa1/buttonbutton v-on:clickbb1/buttonpnumbera{{add1}}/ppnumberb{{add2}}/p
/div
!--引入Vue文件--
script srchttps://unpkg.com/vue3/dist/vue.global.js/script
script//创建一个应用程序实例const vm Vue.createApp({//该函数返回数据对象data(){return{a:0,b:0,number:30}},computed: {add1:function(){console.log(numbera);return this.athis.number},add2:function(){console.log(numberb)return this.bthis.number}}//在指定的DOM元素上装载应用程序实例的根组件}).mount(#app);/script在Chrome浏览器中运行程序打开控制台在页面中单击a1按钮可以发现控制台只打印了numbera如图3-10所示。 计算属性相较于方法更加优化但并不是什么情况下都可以使用计算属性在触发事件时还是使用对应的方法。计算属性一般在数据量比较大、比较耗时的情况下使用例如搜索只有虚拟DOM与真实DOM不同的情况下才会执行computed。如果你的业务实现不需要有缓存计算属性可以使用方法来代替。 本文节选自《Vue.js 3.xElement Plus从入门到精通视频教学版》获出版社和作者授权发布。
