2020.10.13 vue中watch和computed属性的区别

既能用computed 实现又可以用 watch 监听来实现的功能，推荐用 computed，重点在于 computed 的缓存功能

computed计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；

watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法；

1. computed 根据一个现有数据去生成一个新数据，并且这两个数据会永久的建立关系，还会建立缓存，当无关数据改变的时候，不会重新计算而是直接使用缓存中的值

fullName 不需要在 data 中声明

<div id="app">
  <p>{{fullName}}</p>
</div>
 
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'yao',
      lastName: 'lei'
    },
    computed: {
      fullName() {
        return this.firstName + this.lastName
      }
    }
  })
</script>

2.watch 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

watch监听的是data中定义的变量

<template>
  <div class="hello">
      {{fullName}}
      <button @click="setNameFun">click</button>
  </div>
</template>
 
<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    methods: {
        setNameFun() {
            this.firstName = "大";
            this.lastName = "熊"
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    },
    watch: {
        firstName(newval,oldval) {
          console.log(newval)
          console.log(oldval)
        }
    }
}
</script>

总结：

1.如果一个数据依赖于其他数据，那么把这个数据设计为computed的

2.如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

2020.10.13 vue中watch和computed属性的区别

总结：

相关推荐