import SomeComponent from './SomeComponent'
const zero = {}

export default {
  props: {
    title: String,
    likes: Number,
    callback: Function,
  },

  components: {
    SomeComponent,
  },

  data() {
    return {
      one: true,
      two: 2,
      three: 'three',
    }
  },

  watch: {
    one(val) {
      console.log(val)
    },
    two: (val) => {
      console.log(val)
    },
    three: function (a, b) {
      console.log(a, b)
    },
  },

  computed: {
    oneComputed() {
      return !this.one
    },
    twoComputed: () => {
      return !this.one
    },
    threeComputed: function () {
      return !this.one
    },
  },

  created() {
    console.log('created')
  },

  mounted() {
    console.log('mounted')
  },

  methods: {
    ...[
      function fourMethod() {
        console.log('fourMethod')
      },
      function fiveMethod() {
        console.log('fiveMethod')
      },
    ],

    oneMethod() {
      const html = this.$refs.templateRef.innerHTML
      console.log('oneMethod')
      console.log(this.oneComputed)
    },

    twoMethod: function () {
      this.$refs.templateRef.innerHTML = 'html'
      console.log('twoMethod')
      console.log(this.twoComputed)
      this.oneMethod()
      console.log(this.$router)
    },

    threeMethod: () => {
      console.log('threeMethod')
      console.log(this.threeComputed)
      this.twoMethod()

      console.log(this.$store)
    },
  },
}

import {
  ref,
  reacted,
  toRefs,
  watch,
  computed,
  onCreated,
  onMounted,
} from 'vue'

import SomeComponent from './SomeComponent'
const zero = {}

export default {
  components: {
    SomeComponent,
  },
  props: {
    title: String,
    likes: Number,
    callback: Function,
  },

  setup(props, context) {
    const data = reactive({
      one: true,
      two: 2,
      three: 'three',
    })
    const templateRef = ref(null)
    watch(three, (a, b) => {
      console.log(a, b)
    })
    watch(two, (val) => {
      console.log(val)
    })
    watch(one, (val) => {
      console.log(val)
    })
    const oneComputed = computed(() => {
      return !data.one
    })
    const twoComputed = computed(() => {
      return data.two + 5
    })
    const threeComputed = computed(() => {
      return data.three.toUpperCase()
    })

    ;(() => {
      console.log('created')
    })()

    onMounted(() => {
      console.log('mounted')
    })

    function fourMethod() {
      console.log('fourMethod')
    }

    function fiveMethod() {
      console.log('fiveMethod')
    }

    function oneMethod() {
      const html = templateRef.innerHTML
      console.log('oneMethod')
      console.log(oneComputed)
      console.log(context.$data)
    }

    function twoMethod() {
      templateRef.innerHTML = 'html'
      console.log('twoMethod')
      console.log(twoComputed)
      oneMethod()
      console.log(context.$router)
    }

    function threeMethod() {
      console.log('threeMethod')
      console.log(threeComputed)
      twoMethod()
      console.log(fourMethod)
      console.log(context.$store)
    }

    return {
      ...ref(data),
      oneComputed,
      twoComputed,
      threeComputed,
      fourMethod,
      fiveMethod,
      oneMethod,
      twoMethod,
      threeMethod,
      templateRef,
    }
  },
}