计算属性computed、监听器watch、区别

最新推荐文章于 2023-01-01 16:42:45 发布

ꪤ、匿名

最新推荐文章于 2023-01-01 16:42:45 发布

阅读量186

点赞数

文章标签： javascript vue vue.js

本文链接：https://blog.csdn.net/jjjh968/article/details/120723903

版权

本文详细解析了Vue.js中的计算属性(computed)的定义、工作原理，包括get函数的执行时机、set函数的调用、与methods的区别，以及watch的监听功能和深度监听。讨论了何时使用computed和watch，以及它们在数据处理和性能优化中的应用。

摘要由CSDN通过智能技术生成

计算属性 computed

定义：可以理解为能够在里面写一些计算逻辑的属性。

原理：底层借助了Object.defineProperty⽅法提供的getter和setter

get函数什么时候执⾏？

1）初次读取时会执⾏⼀次

2）当依赖的数据发⽣改变的时候会被再次调⽤

set函数什么时候执行？

1）当修改时调用，之后再执行get函数

作用：

1）减少模板中的计算逻辑
2）数据缓存。当我们的数据没有变化时，不在执行计算的过程
3）依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据

<body>
  <div id="root">
    <!-- 组合姓名 -->
    <h2>计算属性的基本使用</h2>
    <hr>
    性：<input type="text" v-model="firstName" id=""><br>
    名：<input type="text" v-model="lastName"><br>
    全名是：{{fullName}}
  </div>
</body>
<script>
  const vm=new Vue({
    el:'#root',
    data:{
      firstName:'张',
      lastName:'三',
    },
    // 计算属性  读写操作  
    computed:{
      // 原始写法
      fullName:{
        // 当有人读取fullName时调用。
        get(){
          console.log("get()被调用了")
          return this.firstName+'-'+this.lastName;
        },
        set(value){//当修改时调用  返回的是value值  set()方法后再调用回get()
          console.log('set被调用了')
          console.log(value)
          let arr=value.split('-')
         console.log(arr);
         this.firstName=arr[0]
         this.lastName=arr[1]
        }
      },

      // 简写形式（只能进行读操作，不可修改）
      // fullName:function  get(){ 
      //     return this.firstName+'-'+this.lastName;
      // },
      fullName(){
        return this.firstName+'-'+this.lastName;
      },
    },
  })
</script>

优势：与methods实现相⽐，内部有缓存机制（复⽤），效率更⾼，调试⽅便

method ，只要发生重新渲染，method 调用总会执行该函数。

数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。

监听属性 watch

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

3.监听的两种写法：

1）new Vue是传⼊watch配置

2）通过vm.$watch配置

//第⼆种写法
 vm.$watch('isHot',{
 //当isHot发⽣变化的时候调⽤
 handler(newData,oldData){
 //newData是改变后的数据，oldData是改变前的数据
 console.log(newData,oldData);
 }
 })

deep

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<body>
  <div id="root">
    <h2>今天天气{{isHot?'炎热':'凉爽'}}</h2>
    <button @click="changeWeather">切换天气</button>
  </div>
</body>
<script>
  const vm=new Vue({
    el:'#root',
    data:{
      isHot:true,
    },
    methods: {
      changeWeather(){
        this.isHot=!this.isHot;
      }
    },
    // 监听属性  变化时调用
    watch:{
      deep:true,//深度监听  
      // 当isHot发⽣变化的时候调⽤  
      // 第一种方式监听器,原始写法
      isHot:{
        handler(newData,oldData){
          console.log(newData,oldData)
        }
      },

      // 第一种方式简写,演变 
      // isHot:function handler(){
      //   console.log(newData,oldData)
      // },
      // isHot:function(){
      //   console.log(newData,oldData)
      // },
      isHot(newData,oldData){
        console.log(newData,oldData)
      }
    },
  })
</script>

computed和watch的区别

computed主要用于对同步数据的处理，watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑

computed是计算属性

1.支持缓存，只有依赖数据发生改变，才会重新进行计算

2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的

4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch是侦听属性

1.不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4.当一个属性发生变化时，需要执行对应的操作；一对多；

ꪤ、匿名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算属性computed、监听器watch、区别

计算属性computed定义：可以理解为能够在里面写一些计算逻辑的属性。原理：底层借助了Object.defineProperty⽅法提供的getter和setterget函数什么时候执⾏？1）初次读取时会执⾏⼀次2）当依赖的数据发⽣改变的时候会被再次调⽤set函数什么时候执行？1）当修改时调用，之后再执行get函数作用：1）减少模板中的计算逻辑2）数据缓存。当我们的数据没有变化时，不在执行计算的过程3）依赖固定的数据类型（响应式数据），不能是普通的传...
复制链接

扫一扫