JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  {{ user.name }}
  <my-child :user="user"></my-child>
  <button @click="user.name += '!'">
    Change name
  </button>
  <button @click="user = { ...user, name: user.name + '?' }">
    Replace object
  </button>
</div>

JavaScript

const { createApp, computed } = Vue

const fetchFriends = id => {
  console.log('Performing expensive operation', id)
  return 'abc'
}

const MyChild = {
  template: `<div>{{ friends }} {{ friends2 }}</div>`,
  props: ['user'],
  
  setup (props) {
    const friends = computed(() => {
      console.log('First computed')
      return fetchFriends(props.user.id)
    })
    
    const userId = computed(() => props.user.id)
		const friends2 = computed(() => {
      console.log('Second computed')
      return fetchFriends(userId.value)
    })
    
    return {
      friends,
      friends2
    }
  }
}

createApp({
  components: {
    MyChild
  },
  
  data () {
    return {
      user: {
        name: 'A',
        id: 7
      }
    }
  }
}).mount('#app')