【Vue3】2-6 : 计算属性与侦听器区别与原理（一）-优快云博客

<body>
  <div id="app">
    {{ message.split(' ').reverse().join(' ') }}<br>
    {{ reverseMessageMethod() }}<br>
    {{ reverseMessageMethod() }}<br>
    {{ reverseMessage1 }}<br>
    {{ reverseMessage1 }}<br>
    {{ reverseMessage2 }}<br>
    {{ reverseMessage2 }}<br>
  </div>
  <script>

    let vm = Vue.createApp({
      data(){
        return {
          message: 'hello world'
        }
      },
      methods: {
        reverseMessageMethod(){
          console.log(0);
          return this.message.split(' ').reverse().join(' ');
        }
      },
      computed: {
        //方式一：方法
        reverseMessage1(){
          console.log(1);
          return this.message.split(' ').reverse().join(' ');},
        //方式二：对象
        reverseMessage2: {
          set(value){
            this.message = value;
          },
          get(){
            console.log(2);
            return this.message.split(' ').reverse().join(' ');
          }
        },
      }
    }).mount('#app');

    setTimeout(()=>{
      // 报警告：[Vue warn]: 
      // Write operation failed: computed property "reverseMessage1" is readonly.
      vm.reverseMessage1 = 'hi vue3';   
   
      vm.reverseMessage2 = 'hi vue4';      // 正常
    }, 2000)

  </script>
</body>