Write a Todolist after learning it

createApp

Used to create a vUE instance, passing in a config object

setup

  1. CompositionAPI is an entry point to the compositionAPI that aggregates code that handles the same functionality and can be reused in any VUE component
  2. Setup is generated before the props data is parsed and the component is created.
  3. The component instance cannot be retrieved from inside Setup via this
  4. The first parameter is props, props, and the second parameter is context: attrs, emit, slots
  5. The Setup hook component instance was not created and does not have access to data, computed, or methods
  6. Setup this refers to undefined
  7. Setup returns an object {}

Use of the setup periodic function hook

Reactive method

Enter: common object

Output: responsive object

ToRefs method

Enter: proxy object (warning if not)

Output: Convert all properties of the proxy object to a reactive object

  • Realize the principle of
    • It is required that the object passed in must be a proxy object, with a warning if it is not
    • ToRefs then creates a new proxy object, iterates through all the properties of the incoming proxy object, converts all of its properties into responsive objects, mounts it to the newly created object, and returns the newly created object
    • An object with a value property is created for each property of the proxy object, which is reactive
    • The value property has a getter and a setter, and the getter returns the value of the property in the proxy object, and the setter assigns a value to the proxy object, so every property that we return is reactive

ref

Input: Primitive type value

Output: responsive object

Computed

Vue3 uses computed functions to create computed properties. There are two ways or uses

  • The first usage
    • computed(() => count.value + 1)
  • Second usage
    const count = ref(1)
    const plusOne = computed({
        get: () = > count.value + 1.set: val= > {
            count.value = val - 1}})Copy the code

Watch

  • The three parameters of Watch
    • The first parameter: the data to listen on
    • Second argument: the function to be executed after listening for data changes. This function takes two arguments, the new value and the old value
    • Third argument: option objects, deep and immediate
  • The return value of Watch
    • Unlisten the function

watchEffct

  • Is a simplified version of the Watch function, also used to monitor changes in data
  • Takes a function as an argument and listens for changes in reactive data within the function
  • Returns a function that cancels listening

The demo went

Github.com/zelixag/vue…

Can you write a Todolist with these now? (Github link in the comments section) Todolist is here