Write a Todolist after learning it
createApp
Used to create a vUE instance, passing in a config object
setup
- CompositionAPI is an entry point to the compositionAPI that aggregates code that handles the same functionality and can be reused in any VUE component
- Setup is generated before the props data is parsed and the component is created.
- The component instance cannot be retrieved from inside Setup via this
- The first parameter is props, props, and the second parameter is context: attrs, emit, slots
- The Setup hook component instance was not created and does not have access to data, computed, or methods
- Setup this refers to undefined
- 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