Vue中的监听（watch（属性、路由）、computed计算属性[get、set、缓存]、事件$emit）

最新推荐文章于 2024-04-11 09:31:47 发布

Program W

最新推荐文章于 2024-04-11 09:31:47 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.csdn.net/weixin_46037781/article/details/118340817

版权

大前端同时被 2 个专栏收录

89 篇文章 1 订阅

订阅专栏

Vue

64 篇文章 3 订阅

订阅专栏

文章目录

一、`$emit`监听事件
二、使用watch
三、computed计算属性的使用
四、`watch、computed和methods`之间的对比

一、`$emit`监听事件

vue中的组件，一层一层的执行着$emit方法，再通过组件上的@方法监听方法的调用（父组件中执行$emit方法，子组件中再通过调用组件，在组件上配上被监听的子组件方法），从父组件一路到子孙组件

二、使用watch

watch和methods平级

1.watch监听数据变化

使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数该方法可以不用绑定事件

注意：watch函数有两个变量，只是在该函数中有一个没有用上，写上也没有关系

2.watch监听路由变化

watch: {
          //$route.path == this.$route.path
          '$route.path': function(newVal,oldVal){
              if(newVal === '/login'){
                  console.log('欢迎进入login')
              }else if(newVal === '/register'){
                console.log('欢迎进入register')
              }
          }
      }

3.`watch`的属性`immediate`与`deep`、`handler`方法

watch监听的特点是：最初绑定的时候并不会执行

而如果想要在最初绑定的时候就执行，就需要用到immediate: true，之后就会在最初绑定的时候立即运行handler方法

watch: {
      items: {
        deep: true,
        handler (val) {
          this.score = 0
          for (let i = 0; i < val.length; i++) {
            this.score += val[i].value;
          }
        }
      }
    }

deep的使用

watch: {
    peo: {
      handler(newName, oldName) {
         console.log('peo.name changed');
      },
      immediate: true,
      deep: true
    }
  }

优化监听字符串

watch: {
    'peo.name': {
      handler(newName, oldName) {
         console.log('peo.name changed');
      },
      immediate: true
    }
  }

手动去掉监听

this.$watch('peo') // 这样，它依然会继续监听peo.name

this.$watch('peo.name') // 这样，才清掉

三、computed计算属性的使用

计算属性的本质，就是一个方法，只不过我们在使用这些计算属性的时候，是把它们的名称直接当作属性来使用的；并不会把计算属性当作方法去调用；

computed和methods平级
注意1：计算属性，在引用的时候，一定不要加()去调用，直接把它当作普通属性去使用就好了；
注意2：只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值

<body>
  <div id="app">
      <input type="text" v-model="firstname">+
      <input type="text" v-model="lastname">=
      <input type="text" v-model="fullname">
  </div>


  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          firstname: '',
          lastname: '',
      },
      methods: {},
      watch: {},
      computed: {
          'fullname': function(){
              return this.firstname + '-' + this.lastname
          }
      }
    });
  </script>
</body>

注意：
1.fullname没有在data中定义
2.在compute定义fullname后直接return出去就好
注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所有的任何数据，都没有发生过变化，则不会重新对计算属性求值；
(也就是说，不会因为页面中调用几次函数去执行几次，只会根据函数执行来调用函数)

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

之前默认只有getter，使我们在运行中操作vm.fullName=xxx并没有什么作用，但是用了setter后，会修改响应式的数据，然后在调用getter后fullName跟随

四、`watch、computed和methods`之间的对比

computed属性的结果会被缓存（所以在需要修改前后的值的时候可以通过computed+watch【oldVal】实现），除非依赖的响应式属性（比如new的当前时间不响应）变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

Program W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的监听（watch（属性、路由）、computed计算属性[get、set、缓存]、事件$emit）

一、$emit监听事件vue中的组件，一层一层的执行着$emit方法，再通过组件上的@方法监听方法的调用，从父组件一路到子孙组件二、使用watchwatch和methods平级1.watch监听数据变化使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数该方法可以不用绑定事件注意：watch函数有两个变量，只是在该函数中有一个没有用上，写上也没有关系2.watch监听路由变化watch: { //$
复制链接

扫一扫