watch和computed

最新推荐文章于 2024-11-03 13:56:33 发布

不会切图的前端仔

最新推荐文章于 2024-11-03 13:56:33 发布

阅读量615

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46176363/article/details/108478235

版权

本文深入探讨Vue.js中计算属性(computed)与监听(watch)的区别与应用场景。计算属性提供缓存效果，依赖属性变化时才更新，适用于复杂逻辑处理；监听则用于实时响应数据与路由变化，影响多个数据变动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两者的区别
computed初衷用于计算数字，但是复杂的逻辑都可以使用其进行操作。相比于方法其数据具有缓存效果，并且每当触发重新渲染时，不需要总是去调用函数。特点依赖属性发生改变的时候，其才会改变，一个属性受多个属性影响。

watch可以用来监听数据和路由变化，特点一个数据可以影响多个数据。

1.计算属性

//css
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
//vue
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

特别注意
reversedMessage不要在vue的data里面再次定义，直接可以使用。

2.watch监听
监听路由

 watch: {
    //监听路由 to是去哪 from是从哪来 this.$route是当前的路由
    $route(to, from) {
      console.log(to.name, "to");
      console.log(from.name, "from");
      console.log(this.$route.name, 1111);
    },
  },

监听数据

watch: {
    //监听DATA里面的数据
    watchName: function (newNum, oldNum) {
      //newNum是watchName的新数据
      //oldNum是watchName的之前的数据
      this.changData()//watchName的数据改变就会执行这个函数
    },