Introduction to the common API usage of Vue3

Vue3.x has been released for so long, and the related ecology has gradually emerged, including the new packaging tool vite. In the process of learning vue3.0, there are some practical API comparisons. I hope to give you a demonstration in development and accurately use the corresponding API to complete our project development.

Changes in the life cycle

It should be noted that the setup function replaces the two life cycle functions beforeCreate and created, so we can assume that its execution time is between beforeCreate and create.

Friends who have learned about Vue3 know that the setup function is used now. It would be better to use examples to illustrate the operation of data in the setup function.

reactive

The reactive method is used to create a responsive data object. This API also solves the problem of Vue2 implementing data responsiveness through defineProperty.

The usage is very simple, just pass the data in as a parameter

<template>
 <div id="app">
 <!-- 4. Access count in responsive data object -->
 {{ state.count }}
 </div>
</template>

<script>
// 1. Import reactive from vue 
import {reactive} from 'vue'
export default {
 name: 'App',
 setup() {
 // 2. Create a responsive data object const state = reactive({count: 3})

 // 3. Return the responsive data object state for template use return {state}
 }
}
</script>

ref

When introducing the setup function, we used the ref function to wrap a responsive data object. On the surface, it seems to have the same function as reactive. It is indeed similar, because ref wraps an object through reactive and then passes the value to the value attribute in the object. This also explains why we need to add .value every time we access it.

We can simply understand ref(obj) as reactive({value: obj})

<script>
import {ref, reactive} from 'vue'
export default {
 name: 'App',
 setup() {
 const obj = {count: 3}
 const state1 = ref(obj)
 const state2 = reactive(obj)

 console.log(state1)
 console.log(state2)
 }
 
}
</script> 

Note: The .value here is only needed when accessing the object wrapped by ref in the setup function. It is not needed when accessing it in the template template, because it will automatically identify whether it is wrapped by ref during compilation.

So how do we choose ref and reactive?
suggestion:

1. Use ref for primitive values ​​(String, Number, Boolean, etc.) or single-value objects (like {count: 3}, which has only one property value).
2. Reference type values ​​(Object, Array) use reactive
   

We use ref to get element tags in vue2.x. What should we do if we want to get element tags in vue3.x?

<template>
 <div>
 <div ref="el">div element</div>
 </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
 setup() {
 // Create a DOM reference. The name must be the same as the element's ref attribute name const el = ref(null)

 // The target element can be obtained through el only after mounting onMounted(() => {
  el.value.innerHTML = 'The content has been modified'
 })

 // Return the created reference return {el}
 }
}
</script>

The operation of getting elements is divided into the following steps:

1. First set a value for the ref attribute of the target element, assuming it is el
2. Then call the ref function in the setup function with a value of null and assign it to the variable el. Note that the variable name must be the same as the ref attribute name we set for the element.
3. Return the reference variable el to the element

Supplement: The set element reference variable can only be accessed after the component is mounted, so operations on the element before mounting are invalid. Of course, if we reference a component element, we will get the instance object of the component.

toRef

toRef converts a value in an object into responsive data. It receives two parameters. The first parameter is the obj object; the second parameter is the property name in the object.

<script>
// 1. Import toRef
import { toRef } from 'vue'
export default {
 setup() {
  const obj = {count: 3}
  // 2. Convert the value of the attribute count in the obj object into responsive data const state = toRef(obj, 'count')
 
  // 3. Return the data object wrapped by toRef for template to use return {state}
 }
}
</script>

There is a ref and a toRef above, isn't that a conflict? The two have different effects:

<template>
 <p>{{ state1 }}</p>
 <button @click="add1">Add</button>

 <p>{{ state2 }}</p>
 <button @click="add2">Add</button>
</template>

<script>
import {ref, toRef} from 'vue'
export default {
 setup() {
  const obj = {count: 3}
  const state1 = ref(obj.count)
  const state2 = toRef(obj, 'count')

  function add1() {
   state1.value++
   console.log('Original value:', obj);
   console.log('Responsive data object:', state1);
  }

  function add2() {
   state2.value++
   console.log('Original value:', obj);
   console.log('Responsive data object:', state2);
  }

  return {state1, state2, add1, add2}
 }
}
</script>

ref is a copy of the original data and will not affect the original value. At the same time, the view will be updated synchronously when the value of the responsive data object changes.
toRef is a reference to the original data, which will affect the original value, but will the view be updated after the responsive data object value changes?

toRefs

Converts the values ​​of all attributes in the passed object into a responsive data object. This function supports one parameter, the obj object.

<script>
// 1. Import toRefs
import { toRefs } from 'vue'
export default {
 setup() {
  const obj = {
   name: 'Front-end impression',
   age: 22,
   gender: 0
  }
  // 2. Convert the value of the attribute count in the obj object into responsive data const state = toRefs(obj)
 
  // 3. Print and check console.log(state)
 }
}
</script>

What is returned is an object, which contains each packaged responsive data object

shallowReactive

As the name of this API suggests, this is a shallow reactive API. Does it mean that the original reactive API is deep? Yes, this is an API for performance optimization.

<script>
<template>
 <p>{{ state.a }}</p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change1">Change 1</button>
 <button @click="change2">Change 2</button>
</template>
<script>
import { shallowReactive } from 'vue'
export default {
 setup() {
  const obj = {
   a: 1,
   first: {
   b: 2,
   second: {
    c: 3
   }
   }
  }
  
  const state = shallowReactive(obj)
 
  function change1() {
   state.a = 7
  }

  function change2() {
   state.first.b = 8
   state.first.second.c = 9
   console.log(state);
  }

  return {state}
 }
}
</script>

First, we clicked the second button and changed b on the second layer and c on the third layer. Although the values ​​changed, the view was not updated.

When we click the first button and change the a of the first layer, the entire view is updated;

This shows that shallowReactive monitors the value of the first layer of attributes and updates the view once it changes.

shallowRef

This is a shallow ref, which is used for performance optimization like shallowReactive. When called with triggerRef, the view can be updated immediately. It receives a parameter state, which is the ref object that needs to be updated.

shallowReactive monitors the data changes of the first layer of the object to drive the view update, while shallowRef monitors the changes of .value to update the view.

<template>
 <p>{{ state.a }}</p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <button @click="change">Change</button>
</template>

<script>
import {shallowRef, triggerRef} from 'vue'
export default {
 setup() {
  const obj = {
   a: 1,
   first: {
   b: 2,
   second: {
    c: 3
   }
   }
  }
  
  const state = shallowRef(obj)
  console.log(state);

  function change() {
   state.value.first.b = 8
   state.value.first.second.c = 9
   // After modifying the value, drive the view to update triggerRef(state) immediately
   console.log(state);
  }

  return {state, change}
 }
}
</script>

toRaw

The toRaw method is used to get the raw data of a ref or reactive object.

<script>
import {reactive, toRaw} from 'vue'
export default {
 setup() {
  const obj = {
   name: 'Front-end impression',
   age: 22
  }

  const state = reactive(obj) 
  const raw = toRaw(state)

  console.log(obj === raw) // true
 }
}
</script>

The above code proves that the toRaw method gets the original data from the reactive object, so we can easily make some performance optimizations by modifying the value of the original data without updating the view.

Note: In addition, when the parameter received by the toRaw method is a ref object, you need to add .value to get the original data object

markRaw

The markRaw method can mark the original data as non-responsive. Even if it is wrapped with ref or reactive, data responsiveness cannot be achieved. It receives one parameter, the original data, and returns the marked data. Even if we modify the value, the view will not be updated, that is, data responsiveness is not implemented

<template>
 <p>{{ state.name }}</p>
 <p>{{ state.age }}</p>
 <button @click="change">Change</button>
</template>

<script>
import {reactive, markRaw} from 'vue'
export default {
 setup() {
  const obj = {
   name: 'Front-end impression',
   age: 22
  }
  // Mark the original data obj through markRaw so that its data update is no longer tracked const raw = markRaw(obj) 
  // Try to wrap raw with reactive to make it responsive data const state = reactive(raw) 

  function change() {
   state.age = 90
   console.log(state);
  }

  return {state, change}
 }
}
</script>

watchEffect

The main differences between watchEffect and watch are as follows:

1. No need to manually pass in dependencies
2. A callback function is executed each time initialization to automatically obtain dependencies
3. The original value cannot be obtained, only the changed value can be obtained

<script>
import {reactive, watchEffect} from 'vue'
export default {
 setup() { 
   const state = reactive({ count: 0, name: 'zs' })

   watchEffect(() => {
   console.log(state.count)
   console.log(state.name)
   /* Print during initialization:
     0
     z

   After 1 second it prints:
     1
     ls
   */
   })

   setTimeout(() => {
   state.count++
   state.name = 'ls'
   }, 1000)
 }
}
</script>

Instead of passing a dependency to the watch method, a callback function is directly specified.

When the component is initialized, the callback function is executed once, and the data that needs to be detected are automatically obtained: state.count and state.name

Based on the above characteristics, we can choose which listener to use

getCurrentInstance

We all know that in any component of Vue2, if we want to get the instance of the current component, we can get it through this. In Vue3, a lot of our code runs in the setup function, and in this function, this points to undefined, so how do we get the instance of the current component? At this time, another method can be used, namely getCurrentInstance

<template>
 <p>{{ num }}</p>
</template>
<script>
import {ref, getCurrentInstance} from 'vue'
export default {
 setup() { 
  const num = ref(3)
  const instance = getCurrentInstance()
  console.log(instance)

  return {num}
 }
}
</script>

In instance, focus on the ctx and proxy properties, which are the this we want. It can be seen that the contents of ctx and proxy are very similar, except that the latter is wrapped with a layer of proxy outside the former, which shows that proxy is responsive

useStore

When using Vuex in Vue2, we all get the Vuex instance through this.$store, but the previous part said that the way to get this in Vue2 is different, and we didn’t find the $store attribute in Vue3’s getCurrentInstance().ctx, so how do we get the Vuex instance? This requires a method in vuex, namely useStore

// index.js in the store folder
import Vuex from 'vuex'

const store = Vuex.createStore({
 state: {
  name: 'Front-end impression',
  age: 22
 },
 mutations:
  …
 },
 …
})

// example.vue
<script>
// Import the useStore method from vuex import {useStore} from 'vuex'
export default {
 setup() { 
  // Get the vuex instance const store = useStore()

  console.log(store)
 }
}
</script>

Then you can use vuex as usual.

The above is the detailed content of the introduction to the commonly used API usage of vue3. For more information about the commonly used API usage of vue, please pay attention to other related articles on 123WORDPRESS.COM!