VUE computed、methods以及watch的异同

最新推荐文章于 2023-01-05 21:50:25 发布

老酒馆的喵

最新推荐文章于 2023-01-05 21:50:25 发布

阅读量221

点赞数

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

本文链接：https://blog.csdn.net/yx_xuan/article/details/109380175

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

VUE

5 篇文章 0 订阅

订阅专栏

在vue的项目中，我们时常会需要对data的改变做出处理，这时候就需要用到watch和computed这两个属性，既然都是数值改变触发改变的属性，他们之间又有什么异同呢？笔者将在接下来进行解析

computed:计算属性

通过属性计算而得来的属性

1. get用法

data: {
  firstName: 'Liu',
  lastName: 'lu'
},
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

fullName不可在data里面定义,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值

2.get和set用法

data: {
    firstName: 'Liu',
    lastName: 'lu'
  },
  computed: {
  fullName：{
   get(){//回调函数 当需要读取当前属性值时执行，根据相关数据计算并返回当前属性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
       //val就是fullName的最新属性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

注意：
1、computed内部的函数名称可以随意编写
2、computed内部的函数必须通过return的方式将结果进行返回，最好不要在内部进行赋值操作
3、虽然computed内部是以函数的方式进行编写，但是在调用的时候并不是一个函数，所以不需要加()
4、只要函数内部所依赖的属性发生了改变，那么这个函数就会自己调用
5、如果函数内部所依赖的属性没有发生改变的时候computed会从缓存中读取结果

总结：computed中的方法都是依赖于Vue中data里面的属性，如果属性发生了改变那么computed中所对应的函数就会去执行

watch:属性监听

作用：监听data中属性的变化当data中的属性发生了改变后，那么watch中相对应的函数就会执行

1.示例

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

2.监听简单数据类型

data(){
      return{
        'first':2
      }
    },
    watch:{
      first(){
        console.log(this.first)
      }
    }

3.监听对象（数组）需用深度监听

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    watch:{
      secondChange:{
        handler(oldVal,newVal){
          console.log(oldVal)
          console.log(newVal)
        },
        deep:true
      }
    }

console.log打印的结果,发现oldVal和newVal值是一样的,说明深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化（地址没有被改变，原先的数据被覆盖）

注意事项：
1、watch中的函数名称必须是所依赖data中的属性名称
2、watch中的函数是不需要调用的，只要函数所依赖的属性发生了改变那么相对应的函数就会执行
3、watch中的函数会有2个参数一个是新值，一个是旧值
4、watch默认情况下无法监听对象的改变，如果需要进行监听则需要进行深度监听深度监听需要配置handler函数以及deep为true。(因为它只会监听对象的地址是否发生了改变，而值是不会监听的)
5、watch默认情况下第一次的时候不会去做监听，如果需要在第一次加载的时候也需要去做监听的话需要设置immediate:true
6、watch在特殊情况下是无法监听到数组的变化
- 通过下标来更改数组中的数据
- 通过length来改变数组的长度

解决方案：

通过Vue实例方法set(object,key/index,value);

 this.$set(this.arr,0,100);

通过splice来数组清空 $delete(object,key/index)

this.$delete(this.arr,0)

7、深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

computed 与 methods

我们可以看下如下demo：

<!DOCTYPE html>
<html>
<head>
  <title>vue</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <div>第一次调用computed属性: {{ reversedMsg }}</div>
    <div>第二次调用computed属性: {{ reversedMsg }}</div>
    <div>第三次调用computed属性: {{ reversedMsg }}</div>
    <!-- 下面是methods调用 -->
    <div>第一次调用methods方法: {{ reversedMsg1() }}</div>
    <div>第二次调用methods方法: {{ reversedMsg1() }}</div>
    <div>第三次调用methods方法: {{ reversedMsg1() }}</div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      computed: {
        reversedMsg() {
          console.log(1111);
          // this 指向 vm 实例
          return this.msg.split('').reverse().join('')
        }
      },
      methods: {
        reversedMsg1() {
          console.log(2222);
          // this 指向 vm 实例
          return this.msg.split('').reverse().join('')
        }
      }
    });
    console.log(vm);
  </script>
</body>
</html>

执行后的结果如下所示:

总结：

computed常用于值的计算，如简化tempalte里面{{}}计算和处理props或$emit的传值，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch常用来观察动作，听props，$emit或本组件的值执行异步操作,页面重新渲染时值不变化也会执行。

computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的。

computed中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set变成可读写属性, 但是methods中的成员没有这样的。

参考于https://www.jianshu.com/p/172b0e013223
https://www.cnblogs.com/tugenhua0707/p/11760466.html#_labe1

老酒馆的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE computed、methods以及watch的异同

在vue的项目中，我们时常会需要对data的改变做出处理，这时候就需要用到watch和computed这两个属性，既然都是数值改变触发改变的属性，他们之间又有什么异同呢？笔者将在接下来进行解析computed:计算属性通过属性计算而得来的属性1. get用法data: { firstName: 'Liu', lastName: 'lu'},computed: { fullName: function () { return this.firstName + ' ' + thi
复制链接

扫一扫