# computed响应式数据变化实现

# 目标

实现如下的功能：定义变量count，和计算属性size，当count变化时，size属性也自动变化。

<div id="app">
    <p>count: </p>
    <p>size: </p>
</div>

new Vue({
    data: {
        count: 1,
    },
    computed: {
        size() {
            return this.count + 1;
        }
    }
});

DEMO首页完整源码

<button id="plus">+</button>
<button id="minus">-</button>

<script type="module">
  import Vue from './index.js';

  var render = (data) => {
    var $app = document.querySelector('#app');
    $app.innerHTML = Object.keys(data)
      .map(key => {
        return `<p>${key}: ${data[key]}</p>`;
      })
      .join('');
  };
  plus.onclick = () => vm.count++;
  minus.onclick = () => vm.count--;

  var vm = window.vm = new Vue({
    data: {
      count: 1,
    },
    computed: {
      size() {
        const val =  this.count + 1;
        console.log('size evaluate', val);

        render({
          count: this.count,
          size: val,
        });

        return val;
      }
    }
  });

  console.log(vm);

</script>

# 目录

包括以下几部分

← instance setup →