Vue.js 的计算属性computed和侦听器watch

作者: Arvin Chen 分类: vue 来源: Break易站(www.breakyizhan.com)

Vue.js 的计算属性computed

Vue.js模板内的表达式在设计的初衷是要非常简洁的。但是有时候模板内会放入很多复杂的逻辑计算。我们可以看一下,不使用computed的例子:

     提示:可以修改代码后运行

Vue.js模板变的很复杂起来,也不容易看懂理解。那么,Vue.js 的计算属性computed就可以处理这部分复杂的逻辑计算。

Vue.js 的计算属性computed基础例子

     提示:可以修改代码后运行

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数。

Vue.js 的计算属性computed对比方法methods

我们可以将同一函数定义为一个方法而不是一个计算属性。我们可以通过在表达式中调用方法来达到同样的效果,这两种方式的最终结果确实是完全相同的。可以看一下下面这个例子:

     提示:可以修改代码后运行

然而,computed和methods不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。假设我们有一个性能开销比较大的计算属性 A,那么用缓存就减少性能消耗;如果不希望有缓存,请用方法来替代。

Vue.js 的计算属性computed对比侦听器watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。有时候侦听属性会被滥用,但是很多地方,用computed会比用watch更加简洁,对比下面两段代码就知道了,(代码可以复制之后,在线运行)

使用Vue.js侦听器watch:

     提示:可以修改代码后运行

使用Vue.js 的计算属性computed:

     提示:可以修改代码后运行

使用Vue.js 的计算属性computed会比用侦听器watch简洁多了,损耗也少多了,不是么?

Vue.js 的计算属性computed setter

Vue.js的计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter ,用来更新数据:

     提示:可以修改代码后运行

Vue.js 的侦听器watch

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。看几个例子:

Vue.js 的侦听器watch实现计算器

     提示:可以修改代码后运行

Vue.js 的侦听器watch实现米和千米的转换

     提示:可以修改代码后运行

Vue.js 的侦听器watch官网动态问题例子

     提示:可以修改代码后运行

TIPS:这篇文章主要讲的是Vue.js 的计算属性computed和侦听器watch,两个部分,可以点击文章右下角的图标,打开文章目录,按章节查看。
Vue.js 的计算属性computed和侦听器watch

  •   本文标题:Vue.js 的计算属性computed和侦听器watch - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/vue/6684.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注