The website need JavaScript

FiveWoods

生而为人 不必抱歉

平凡之路

原创

computed和watch

computed可以当作普通属性使用,默认情况只有get方法,当然你也可以添加一个set方法,当调用计算属性的get方法,给计算属性赋值时,则会调用计算属性的set方法

computed 计算属性的结果是响应式的同时也是会缓存的,前提是你的数据必须是响应式的,也就是说只有当依赖的响应式数据发生改变时,计算属性才会重新计算获取最新的值,当依赖的响应式数据没有发生变化,会缓存最后一次计算的值,当调用时会优先读取缓存。

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
<!-- 通过例子进行演示 --> <template> <div> <p>fullName: {{ fullName }}</p> <p>fullName: {{ getFullName() }}</p> <div> <input type="text" v-model="number"> </div> <div> <button type="primary" @click="changeFullName">changeFullName</button> </div> <div> <button @click="print">输出</button> </div> </div> </template> <script> export default { data() { return { firstName: "origin", lastName: "name", number:0 }; }, computed: { fullName: { // get get: function() { console.log("get"); return this.firstName + " " + this.lastName; }, // set 不推荐设置set方法 理由我在下面会进行说明 set: function(newValue) { console.log("set", newValue); var names = newValue.split(" "); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } }, methods: { getFullName() { console.log("getFullNamed method..."); return this.fullName; }, changeFullName() { this.fullName = "full name"; }, print() { console.log("fullName", this.fullName); } } }; </script> // 结果 // get 这个是因为当组件初始化时 字符串模板{{ fullName }}用到了这个计算属性 所以计算属性会调用get方法 // set full name 点击按钮改变了 fullname 这里有一个赋值语句this.fullName = 'full name' 当给计算属性 赋值时 会调用计算属性的set方法 // get // 这里会再调用一次是因为 在fullName set方法中,将firstName lastName改变了 fullName所依赖的数据发生改变 则会调用get方法计算最新的值 // 当你点击输出按钮时 ,它会打印出 fullName full name,也印证了那句当依赖的响应式数据没有发生变化,计算属性会缓存最后一次计算结果的值,从而避免重复计算,性能开销比较小。

computed什么时候使用它呢,它与method的区别是什么呢?,看上面的例子,当number发生变化的时候,页面会重新进行渲染,也就是说getFullName这个方法会重新调用计算,你可以看到getFullName会一直输出getFullNamed method...,反之computed只有在初始化的时候输出了,可以看出computed性能开销会比较小,这个例子因为只是一个字符串的简单运算所以效果不是很明显,如果新的值需要经过大量的计算才能得到,缓存的意义就很非常大了。什么时候使用它呢?当拿到的数据不是真正想要直接去显示的数据,想要显示的数据需要通过计算去处理得到新数据的时候就可以使用computed,为什么不建议设置set方法呢?因为computed是由多重数据组合而来的数据,组合容易,你要拆开来分别去设值就会变成很复杂,不小心弄错,会导致computed会重复计算变成一个循环,会理不清之间的关系从而会变得非常复杂!,以上就是这是我对comptued的一些理解。

watch用来监听值改变从而进行相对应的操作。观察对象有一个回调函数得到的参数为新值和旧值,这里有一个地方需要注意

注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

这是官网上的一段话,我直接复制过来,它已经讲的很清晰了,就是说数组,对象都是引用类型,它们(新值和旧值)的引用都指向同一个内存地址,所以当你的watch的引用数据变化之后,由于它们引用的同一个了地址,所以新值与旧值会相同,具体可以百度查看一下值类型和引用类型。

              
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
<template> <div> <button @click="count = 2">改变Count</button> <hr> <button @click="list.push(2)">改变List</button> <hr> <button @click="obj.name='changed name'">改变Obj</button> <hr> <button @click="obj.sex='女'">改变Obj.Sex</button> </div> </template> <script> export default { data() { return { count: 1, list: [1], obj: { name: "name", sex: "男" } }; }, watch: { // 基本用法 count(newVal, oldVal) { console.log("count-new", newVal); console.log("count-old", oldVal); }, list: { handler(newVal, oldVal) { console.log("immediate..."); console.log("list-immediate-new", newVal); console.log("list-immediate-old", oldVal); }, // 该回调将会在侦听开始之后被立即调用 immediate: true }, obj: { handler(newVal, oldVal) { console.log("obj-new", newVal); console.log("obj-old", oldVal); }, // 对象需要深度监听 deep: true }, // 当你只需要监听对象上的某一个属性时 "obj.sex": { handler(newVal, oldVal) { console.log("obj.sex-new", newVal); console.log("obj.sex-old", oldVal); } } } }; </script>

watchcomputed的区别是什么呢,watch并不适用于显示某一个数据,watch更多的用于监听到某一个数据的变化,然后去做某一个指定的操作,这个时候可以选择用watch

以上就是我对computedwatch的一些理解,更多的内容可以查看官方文档

  • 540 人围观
  • 2 人讨论
  • 分享
  • 2 人觉得很赞

文章作者:

世人i

发布时间:

2019-06-21

相关标签:

  • Vue
  • JavaScript
  • 学习

本文描述:

computed和watch的区别和使用场景

说点什么吧...

最新

最热

1
回复
@

test

  • 1
  • 123 天前
cc
回复
@

123

  • 0
  • 95 天前