Vue3.0 计算属性computed

computed

vue3.0的计算属性和vue2.x的计算属性功能是一样的，只不过用法不同； vue3.0 的有两种用法:

用法
第一种用法	给computed传入一个函数，该函数内部依赖响应式数据，当依赖的数据发生变化会重新执行该函数获取数据		返回不可变的响应式对象
第二种用法	给computed 传入一个对象，对象含有get和set方法，获取值触发get，设置值触发set		返回不可变的对象

demo

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">
  未完成：{{count}}
  <button @click="push">添加未完成</button>
</div>

<script type="module">
  import { createApp, reactive, computed } from 'vue'

  const datalist = [
    { name: '看书', state: false },
    { name: '学习', state: false },
    { name: '睡觉', state: true }
  ]

  const app = createApp({
    setup(props, context) {
      const data = reactive(datalist)
      const count = computed(() => {
        return data.filter(item => !item.state).length
      })
      return {
        count,
        push: () => {
          data.push({
            name: '发呆', state: false
          })
        }
      }
    },
  })
  app.mount('#app')
</script>