浅谈computed和watch的区别

最新推荐文章于 2021-11-04 18:57:40 发布

做个有准备的人

最新推荐文章于 2021-11-04 18:57:40 发布

阅读量201

点赞数

分类专栏：前端埋坑之路-前端技术

本文链接：https://blog.csdn.net/u011565547/article/details/104856621

版权

前端埋坑之路-前端技术专栏收录该内容

357 篇文章 15 订阅 ¥9.90 ¥99.90

订阅专栏

超级会员免费看

本文深入探讨了Vue.js中的computed和watch的区别。computed作为计算属性，具备缓存特性，仅在依赖数据变化时更新，适用于简化模板计算。而watch是一个观察者，无缓存，无论值是否变化都会执行，支持异步操作，适用于监听数据变化执行复杂操作。二者在应用场景、缓存策略和异步处理上有所不同。

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

解晰一：

3.1 computed特性

是一个计算属性,类似于过滤器,对绑定到view的数据进行处理

1.是计算值，
2.应用：就是简化tempalte里面{ {}}计算和处理props或$emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  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];
   }
   }
  }