Let you quickly master the vue3 tutorial in 30 minutes

setup(props, context) {
  
  
  
  
  
  
  
  return {
    
  }
 }

<template>
 {{name}} // test
<template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
 setup(props, context) {
 
  let state = reactive({
   name: 'test'
  });
  
  return state
 }
});
</script>

<template>
  <div class="mine">
    {{count}} // 10
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
 setup() {
  const count = ref<number>(10)
  // Get the value defined in ref in js, and you need to pass the value attribute  ();
  return {
    count
  }
  }
});
</script>

<template>
  <div class="mine">
    {{count}} -{{t}} // 10 -100
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
 setup() {
  const count = ref<number>(10)
  const obj = reactive({
   t: 100,
   count
  })
  // When obtaining the value of ref through reactive, there is no need to use the .value attribute  ();
  return {
    ...toRefs(obj)
  }
  }
});
</script>

<script lang="ts">
import { defineComponent, isRef, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const name: string = 'vue'
  const age = ref<number>(18)
  (isRef(age)); // true
  (isRef(name)); // false

  return {
   age,
   name
  }
 }
});
</script>

<template>
 <div class="mine">
  {{name}} // test
  {{age}} // 18
 </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
 setup(props, context) {
  let state = reactive({
   name: 'test'
  });

  const age = ref(18)
  
  return {
   ...toRefs(state),
   age
  }
 }
});
</script>

import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const age = ref(18)

  // Create a responsive computed property readOnlyAge according to the value of age, which will automatically calculate based on the dependent ref and return a new ref  const readOnlyAge = computed(() => ++) // 19

  return {
   age,
   readOnlyAge
  }
 }
});
</script>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  const age = ref<number>(18)

  const computedAge = computed({
   get: () =>  + 1,
   set: value =>  + value
  })
  // The operation of assigning values ​​to the calculation attribute will trigger the set function. After the set function is triggered, the value of age will be updated.   = 100
  return {
   age,
   computedAge
  }
 }
});
</script>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const state = reactive<Person>({ name: 'vue', age: 10 })

  watch(
   () => ,
   (age, preAge) => {
    (age); // 100
    (preAge); // 10
   }
  )
  // When modifying the age, the callback of the watch will be triggered, and the values ​​before and after the change will be printed.   = 100
  return {
   ...toRefs(state)
  }
 }
});
</script>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const age = ref<number>(10);

  watch(age, () => ()); // 100
  
  // When modifying the age, the callback of the watch will be triggered, and the changed value will be printed.   = 100
  return {
   age
  }
 }
});
</script>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const state = reactive<Person>({ name: 'vue', age: 10 })

  watch(
   [() => , () => ],
   ([newName, newAge], [oldName, oldAge]) => {
    (newName);
    (newAge);

    (oldName);
    (oldAge);
   }
  )
  // When modifying the age, the callback of the watch will be triggered, and the values ​​before and after the change are printed. At this time, you need to pay attention to changing one of the values ​​and the callback of the watch will be executed.   = 100
   = 'vue3'
  return {
   ...toRefs(state)
  }
 }
});
</script>

<script lang="ts">
import { set } from 'lodash';
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
interface Person {
 name: string,
 age: number
}
export default defineComponent({
 setup(props, context) {
  const state = reactive<Person>({ name: 'vue', age: 10 })

  const stop = watch(
   [() => , () => ],
   ([newName, newAge], [oldName, oldAge]) => {
    (newName);
    (newAge);

    (oldName);
    (oldAge);
   }
  )
  // When modifying the age, the callback of the watch will be triggered, and the values ​​before and after the change are printed. At this time, you need to pay attention to changing one of the values ​​and the callback of the watch will be executed.   = 100
   = 'vue3'

  setTimeout(()=> { 
   stop()
   // When modifying at this time, the watch callback will not be triggered    = 1000
    = 'vue3-'
  }, 1000) // In 1 second, the watch will be canceled.  
  return {
   ...toRefs(state)
  }
 }
});
</script>

<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from 'vue';
export default defineComponent({
 setup(props, context) {
  onBeforeMount(()=> {
   ('beformounted!')
  })
  onMounted(() => {
   ('mounted!')
  })

  onBeforeUpdate(()=> {
   ('beforupdated!')
  })
  onUpdated(() => {
   ('updated!')
  })

  onBeforeUnmount(()=> {
   ('beforunmounted!')
  })
  onUnmounted(() => {
   ('unmounted!')
  })

  onErrorCaptured(()=> {
   ('errorCaptured!')
  })

  return {}
 }
});
</script>

<template>
 <!--first step：Still as usual，exist html Write in ref Name of-->
 <div class="mine" ref="elmRefs">
  <span>1111</span>
 </div>
</template>

<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
 setup(props, context) {
  // Get the real dom  const elmRefs = ref<null | HTMLElement>(null);
  onMounted (() => {
   (); // Get a RefImpl object, access the data through .value  })

  return {
   elmRefs
  }
 }
});
</script>

const app = ({})

 = {...}

 = (err, vm, info) => {}

const app = ({})

.$http = 'xxxxxxxxs'

setup( ) {
 const { ctx } = getCurrentInstance();
 ctx.$http  
}

import React, { Suspense } from 'react';
 
 
const myComponent = (() => import('./Component'));
 
 
function MyComponent() {
 return (
  <div>
   <Suspense fallback={<div>Loading...</div>}>
    <myComponent />
   </Suspense>
  </div>
 );
}

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
 import('./components/')
)

('async-component', AsyncComp)

<template>
 <Suspense>
  <template #default>
   <my-component />
  </template>
  <template #fallback>
   Loading ...
  </template>
 </Suspense>
</template>

<script lang='ts'>
 import { defineComponent, defineAsyncComponent } from "vue";
 const MyComponent = defineAsyncComponent(() => import('./Component'));

export default defineComponent({
  components: {
   MyComponent
  },
  setup() {
   return {}
  }
})

</script>

<template>
 <div class="mine" ref="elmRefs">
  <span>{{name}}</span>
  <br>
  <span>{{count}}</span>
  <div>
   <button @click="handleClick">Test button</button>
  </div>

  <ul>
   <li v-for="item in list" :key="">{{}}</li>
  </ul>
 </div>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue';

interface IState {
 count: 0,
 name: string,
 list: Array<object>
}

export default defineComponent({
 name: 'demo',
 // Parent component passes child component parameters props: {
  name: {
   type: String as PropType<null | ''>,
   default: ''
  },
  list: {
   type: Array as PropType<object[]>,
   default: () => []
  }
 },
 components: {
  /// TODO component registration },
 emits: ["emits-name"], // To prompt setup (props, context) {
  ()
  ()
  
  
  const state = reactive<IState>({
   name: 'vue 3.0 component',
   count: 0,
   list: [
    {
     name: 'vue',
     id: 1
    },
    {
     name: 'vuex',
     id: 2
    }
   ]
  })

  const a = computed(() => )

  onMounted(() => {

  })

  function handleClick () {
    ++
   // Call the parent component method   ('emits-name', )
  }
 
  return {
   ...toRefs(state),
   handleClick
  }
 }
});
</script>