vue中的watch和computed属性使用详解

閉丄眼聆厛倖輻

于 2021-07-31 08:35:10 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/119219640

vue 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了Vue.js中watch监听器和computed计算属性的使用。watch用于监听数据变化并响应更新视图，例如监听firstName并改变fullName2。而computed则提供了getter和setter，用于自动计算依赖属性的值，如fullName1和fullName3，当fullName3的值改变时，会更新firstName和lastName。这两个特性在处理复杂数据交互时非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

watch是一个监听器,监听数据的变化改变数据,进而改变view层,通常父传子的时候数据比较复杂,可以监听数据

watch: {
  // 配置监视firstName
  firstName: function (value) { // 相当于属性的set
    console.log('watch', value)
    // 更新fullName2
    this.fullName2 = value + '-' + this.lastName
  }
}

computed:是一个计算属性,里面可以有set()和get()

    // 计算属性配置: 值为对象
    computed: {
      fullName1 () { // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },

      fullName3: {
        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
        get () {
          console.log('fullName3 get()')
          return this.firstName + '-' + this.lastName
        },
        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
        set (value) {// fullName3的最新value值  A-B23
          console.log('fullName3 set()', value)
          // 更新firstName和lastName
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },