Vue中computed和watch有什么区别

最新推荐文章于 2024-04-08 06:39:46 发布

实在不知道什么

最新推荐文章于 2024-04-08 06:39:46 发布

阅读量1k

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43813718/article/details/105955255

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

computed

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

上面是官网给出的例子，我们可以看到当我们某个属性受多个属性影响是我们用computed。computed计算属性的使用场景例如我们使用淘宝京东啥的，进行购物车结算的时候我们就可以使用计算属性computed。当我computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取。在这个例子中当firstName和lastName没有发生变化时，我们调用计算属性的时候，是直接从缓存中获取的。

watch

var 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
    }
  }
})

还是官网中的例子，fullName依赖于firstName和lastName，如果我们要用watch，那么就要监听两个数据。watch的使用场景：当一条数据影响多条数据的时候，使用watch，如搜索框。官网同时提到当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。简单来说就是涉及异步操作然后需要设定不同中间值等，这时候就使用watch。
再补上一个watch的使用例子，会更好的了解watch如何使用

<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: ''
        },
        watch: {
            num(newVal, oldVal) {
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })
</script>
</body>

实在不知道什么

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中computed和watch有什么区别

computedvar var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName ...
复制链接

扫一扫