Vue.js 计算属性 原

计算属性与methods方法 模板内的表达式是非常便利的,但在模板中放太多的逻辑会让模板过重且难以维护,对于复杂的逻辑应该使用计算属性 <div id="example">   <p>Original message: "{{ message }}"</p>   <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({   el: '#example',   data: {     message: 'Hello'   },   computed: {     // a computed getter     reversedMessage: function () {       // `this` points to the vm instance       return this.message.split('').reverse().join('')     }   } }) 同样用methods可以达到与computed一样的效果 <p>Reversed message: "{{ reversedMessage() }}"</p> methods: {   reversedMessage: function () {     return this.message.split('').reverse().join('')   } } 使用computed与methods最终的结果是相同的,不同的是计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相互依赖改变时才会重新求值,意味着只要message不发生变化,多次访问reversedMessage 计算属性会立即返回之前的计算结果,而不必执行函数,相比之言,只要发生重新渲染,methods调用总会执行该函数,如果不希望有缓存,请使用methods

计算属性与Watched属性 Vue 确实提供了一种更通用的方式来观察与响应实例上的数据变化,你很容易滥用watch,特别是如果你之前使用过Angular JS,通常更好的方法是使用computed属性而不是命令式的watch回调 如下的例子是使用vatch来监听firstName与lastName的变化,如果变化则给fullName重新赋值,特别注意在data初始化时就要有fullName var vm = new Vue({   el: '#demo',   data: {     firstName: 'Foo',     lastName: 'Bar',     fullName: 'Foo Bar'   },   watch: {     firstName: function (val) {       this.fullName = val + ' ' + this.lastName     },     lastName: function (val) {       this.fullName = this.firstName + ' ' + val     }   } }) 上面的代码是命令式的和重复的,将它与计算属性的版本进行比较,计算属性代码非常简单清晰 var vm = new Vue({   el: '#demo',   data: {     firstName: 'Foo',     lastName: 'Bar'   },   computed: {     fullName: function () {       return this.firstName + ' ' + this.lastName     }   } })

计算属性可以设置 setter 计算属性默认只有getter,不过在需要时你也可以提供一个setter  <script>     var app = new Vue({         el: "#app",         data: { firstName: "wang", lastName: "lily2" },         computed: {             fullName: {                 get: function() {                     return this.firstName + " " + this.lastName;                 },                 set: function(newValue) {                     names = newValue.split(" ");                     this.firstName = names[0];                     this.lastName = names[1];                 }             }         }     })     app.fullName = 'John Doe'     </script> 现在再运行 ,setter 会被调用,vm.firstName 和 vm.lastName 也相应地会被更新。 

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏原创

个推前端微服务化:突破传统SPA瓶颈

目前的前端领域,单页面应用(SPA)大行其道。而随着时间的推移以及应用功能的丰富,这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。

25720
来自专栏Modeng的专栏

Vue案例引发的「嵌套组件」通信的简单方式

我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。

15620
来自专栏娱乐心理测试

navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found

在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:

23720
来自专栏娱乐心理测试

mpvue页面跳转及传值

vue中 使用 vue-router 来进行路由跳转的。mpvue中只能通过以下几种方式跳转: (1).a 标签

3.1K20
来自专栏前端儿

记一次vue长列表的内存性能分析和优化

这个长列表页面,其实是一个实时日志上报的页面,随着页面打开时间的增加,日志数量也会增多,常规的页面布局和渲染免不了会遇到性能问题。

54860
来自专栏一丘一壑

在WordPress中添加简书风格的连载目录和文章导航

自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。

18520
来自专栏原创

基于CMS的组件复用实践

目前前端项目大多基于Vue、React、Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维。所以,开发者在使用上述框架时,实际上...

8420
来自专栏前端大白专栏

vue与react哪种好?

vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就...

26420
来自专栏一丘一壑

WordPress 和 Vue.js 的学习资源推荐

Vue 是一个非常有吸引力的构建前端的框架,它已迅速成为 React 和 Angular 等其他流行框架的替代品。它很敏捷速度很快,编写的代码容易阅读和理解,很...

20520
来自专栏娱乐心理测试

解读mpvue官方文档的Class 与 Style 绑定及不支持语法

在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

15430

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励