老师，我想请教您一个关于计算属性的问题

来源：3-4 计算属性,方法与侦听器

目訫

2019-06-02

如果现在我想用两个计算属性拼成一个计算属性，并在修改拼成的这个计算属性的时候，其他两个计算属性也会跟着变化，应该怎么写？我写的哪里不对吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="vue_expansion.js"></script>
  <title>proModel</title>
</head>
<body>
  <div id="root">
    <div>{{ part0 }}</div>
    <div>{{ part1 }}</div>
    <div>{{ part2 }}</div>
    <button @click="hanleClick">Change</button>
  </div>

  <script>
    let vm = new Vue({
      el: '#root',
      computed: {
        part0: {
          get () {
            return 111111
          },
          set (value) {
            return value
          }
        },
        part1: {
          get () {
            return 99
          },
          set (value) {
            return value
          }
        },
        part2: {
          get () {
            let str = '' + this.part0
            return str.substr(-3) + this.part1
          },
          set (value) {
            console.log(1)
            let partvalue = value.split(' ');
            this.part0 = partvalue[0]
            this.part1 = partvalue[1]
          }
        }
      },
      methods: {
        hanleClick () {
          this.part2 = 'John Doe'
        }
      }
    })
  </script>
</body>
</html>

还请老师帮忙解答，谢谢老师。

写回答

1回答

六一888

2019-06-03

已采纳

你的代码主要问题是：

第一：part0 和 part1 的 getter 方法中没有监听任何数据的的变化，这不符合计算属性的用法，你应该写到 methods 里面；

第二：如果 getter 方法中没有监听的数据，那么你在 setter 中就没有可以操作的数据，你需要通过在 setter 中改变被监听的数据，因为被监听的数据改变了，所以计算属性才改变，你只是单一的给计算属性赋值，计算属性的值是不会改变的；

第三：这是一个提醒，计算属性最好不要相互监听，否则很容易导致“栈溢出”问题，即进行无限循环。

以下是我写的简单代码，建议你再听一遍课程相关内容：

<script>
var vm = new Vue({
el: '#root',
data: {
firstName: 'jingru',
lastName: 'wang'
},
computed: {
fullName0: {
get() {
return this.firstName + " " + this.lastName
},
set(value) {
var arr = value.split(' ')
this.firstName = arr[0],
this.lastName = arr[1]
}
},
fullName1: {
get() {
return this.fullName0
},
set(value) {
this.fullName0 = value
}
}
}
})
</script>