watch 和 computed 区别和使用场景网站首页 技术交流

watch 和 computed 区别和使用场景

王新焱 2024-06-14 17:18:13

简介watch 和 computed 区别和使用场景

vue项目开发中，经常涉及对data的数据做处理，需要用到watch 和 computed 这2个属性对数据进行监听或计算，他们有什么区别呢？

一、监听属性 watch

data() {
   return {
      age: 22,
      user:{
        name:'wxy',
      },
      getAge: '',
      getName: ''
   }
},
watch: {
  getAge(newVal, oldVal){
      console.log(newVal, oldVal);
      this.age = newVal+ ' ' + 3
  },
  // 深度监听
  getName: {
      // 度监听对应的函数名必须为 handler,否则无效果
      handler(newValue, oldValue) {
          // 监视到数据变化时执行的逻辑
          this.user.name = newValue
      },
      deep: true, // 深度监听对象内部属性的变化
      immediate: true // 初始化时立即执行一次回调
  },
  // 监听对象单个属性name
  'user.name':{
     handler (newVal, oldval) {
        console.log(newVal,oldval)
     },
     immediate: true, // 该属性会先执行一次handler
  },
  // 监听路由变化
  '$route.path':function(newVal, oldVal){
      if(newVal === '/login'){
          console.log('欢迎进入登录页面');
      } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
      }
   }
}

二、计算属性 computed

data() {
   return {
      province: '湖北省'
   }
},
computed: {
    getAddress() {
         return this.province + '黄冈市'
    },
    // type为传过来的值
    getType() {
        return ((type) => type == 1 ? '个人' : type == 2 ? '企业' : '未知')
    },
    getName: {
        // get在初始化时和依赖数据更新时才会被调用
        get: function () {
            return this.value[this.keyon]
        },
        // set在当前属性被修改时才会被调用
        set: function (newValue) {
            this.value[this.keyon] = newValue
        }
    }
}

注意：计算属性中的get和set不能写成箭头函数！因为箭头函数会改变this的上下文绑定。

三、watch 和 computed 区别

侦听属性 watch

①.不支持缓存，数据变化，直接会触发相应的操作;
②.watch 支持异步操作;
③.watch有两个参数;
immediate：组件加载立即触发回调函数执行;
deep：深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变;
④.watch中的函数名称必须要和data中的属性名一致，watch依赖于data中的属性，属性发生变化的时候，watch中的函数就会发生变化;
⑤.watch不支持缓存;
⑥.需要再data中声明;

计算属性 computed

①.支持缓存，computed是依赖data中的属性，data中属性发生改变的时候，会重新进行计算，没有改变的时候，当前函数不会执行;
②.不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化;
③.omputed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的;
④.computed中的函数必须用return返回;
⑤.如果 computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个 set 方法，当数据变化时，调用 set 方法;
⑥.不需要再data中声明;

需要注意的是，computed属性是基于依赖的数据进行缓存的，只有在依赖数据发生变化时，computed才会重新计算。这意味着多个computed属性依赖于同一个数据时，只有在该数据变化时它们才会被更新。这种缓存机制可以提高性能，避免不必要的计算。

四、总结

computed 计算属性适合根据 data 里的属性，来做一些简单的计算并返回结果，例如数组的排序、筛选等等，它的结果会缓存起来，只有 data 中的属性发生变化时才会重新计算，其它情况会直接返回计算结果，以提高效率。计算属性可以像 data 属性一样直接在 html 模板中使用。
watch 适合在 javascript 中监听 data 属性的变化，并根据变化做一些耗时的操作或者发送远程 API 请求。watch 中的方法一般没有返回值，而是直接修改 data 中的属性。