Vue Composition API

composition_api_1.vue

<template>
  <h2>My Course Goal</h2>
  <p>
    {{ goal1 }}
  </p>
  <!-- Task 1: Output your main course goal with help of the composition API -->
  <!-- Don't hardcode it into the template, instead hardcode it into the JS code -->
  <h3 v-show="isCourseGoalVisible">OUTPUT COURSE GOAL</h3>
  <!-- Task 2: Toggle (show/ hide) the goal with help of the button  -->
  <button @click="handlers.handleToggleGoalBtn">Toggle Goal</button>
  <!-- Task 3: Manage data in three ways -->
  <!-- => Separate refs -->
  <!-- => Ref Object -->
  <!-- => Reactive Object -->
  <!-- Task 4: Also solve the assignment with the Options API -->
  <hr>
  <p>
    {{ myReactive.goal }}
  </p>
  <h3 v-show="myReactive.isVisible">OUTPUT COURSE GOAL</h3>

  <hr>
  <p>
    {{ myRef.goal }}
  </p>
  <h3 v-show="myRef.isVisible">OUTPUT COURSE GOAL</h3>
</template>

<script>
import { ref, reactive } from "vue"

export default {

  setup(props, context) {
    // context
    // context.emit('my-custom-event') instead of this.$emit('my-custom-event')
    // context.attr falltrhough attr
    // context. Slots
    const myGoal = ref("Learn Vue")
    const isCourseGoalVisible = ref(true)

    const myRef = ref({
      goal: "Learn Vue",
      isVisible: true
    })

    const myReactive = reactive({
      goal: "Learn Vue",
      isVisible: true
    })

    const delayInMs = 1000
    setTimeout(() => {
      myGoal.value = "Build cool applications with Vue"
      myReactive.goal = "Build cool applications with Vue"
      myRef.value.goal = "Build cool applications with Vue"
    }, delayInMs)

    function handleToggleGoalBtn(event) {
      console.log("event", event)
      isCourseGoalVisible.value = !isCourseGoalVisible.value
      myReactive.isVisible = !myReactive.isVisible
      myRef.value.isVisible = !myRef.value.isVisible
    }

    const eventHandlers = {
      handleToggleGoalBtn
    }
    
    // making props properties reactive (props are reactive, but the properties are non-reactive)
    // afaic toRefs is enough b/c props is already reactive
    // const propsWithRefs = toRefs(props);
    // const user = propsWithRefs.user;
    const { user } = toRefs(props);
    watch(user, function ( ) {
      enteredSearchTerm. value = ''
    })      

    return {
      goal1: myGoal, isCourseGoalVisible, handlers: eventHandlers, myReactive, myRef
    }
  }
}
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: 3rem;
  text-align: center;
}
</style>

computed_and_v-model_with_refs.md

<input @input="setLastName($event)" />
<input @input="setLastName">  <!-- passes default event object to callback function -->
<!-- v-model="someRef" -->

computed is basically a read-only ref

const firstName = ref(''); 
const lastName = ref(''),
const age = ref(31);

function setLastName(event) {
  lastName.value = event.target.value;
}

const fullName = computed(function() {
  return firstName.value + ' ' + lastName.value;
})

gistfile1.txt

```html

```

```js
// single dep ref uAge
watch(uAge, function (newValue, oldValue) {
  console.log('Old age: + oldValue);
  console.log('New age: + newValue);
})

// multiple dependencies
watch([uAge, uName], function (newValues, oldValues) {
  console.log('Old age: + oldValues[0]); // uAge
  console.log('New age: + newValue[0]); // uAge

  console.log('Old age: + oldValues[1]); // uName
  console.log('New age: + newValue[1]); // uName
})
```

provide_inject.md

provide / inject basically context api https://vuejs.org/api/composition-api-dependency-injection.html#has-injection-context

is writable, but not recommended to do so in a component where it is inject()-ed. Would be unexpected that it changes in child component.