Vue computed选项

梗概

• 一个优化过的get函数（如getName）
• 一个数据处理接口，可以获取处理后的数据
  • 如原有一些响应式变量，经过该computed可以将这个变量进行一定的处理后，再返回结果
• 自动[base::track]用到的的响应式变量
• 实际应用的时候，[child::拆分computed的颗粒度]

指向原始笔记的链接

实例:

Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    publishedBooksMessage:{
	    // 计算属性的 getter
	    get(){
		    // `this` 指向 vm 实例
	      return this.author.books.length > 0 ? 'Yes' : 'No'
	    }
	    // 计算属性的 setter
	    set(v){//当任意位置执行publishedBooksMessage='值',就会调用该函数
		    this.author.books.push(v);
	    }
    }
  }
}).mount('#computed-basics')

<div id="computed-basics">
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>