Reason: I am not familiar with VUe3.0, so I need to deepen my impression

Responsive foundation

Declare reactive state

To create reactive state for JavaScript arrays or objects, use the reactive method:

<template> <div class="todo-list"> <p> Current count value :{{count}}</p> </div> </template> <script lang="ts"> // data in vue2 Use reactive in VUe3 instead of import {reactive, ref, computed} from "vue"; import { useRouter } from "vue-router"; Export default {// setup is equivalent to vue2.0 beforeCreate and created, which is a new property of VUe3. Setup (props, context) {const state = reactive({count: 0,}); console.log(state.count); return { state, }; }}; </script> <style scoped></style>Copy the code

Reactive is equivalent to the Vue.Observable () API in Vue 2.x, and this reactive transformation is a “deep transformation” — it affects all properties passed by nested objects.

  • Arguments can only be passed in arrays or objects
  • Value is obtained directly without addition.value

It is equivalent to converting a raw value into a responsive, object specific, multiple value

Independent responsive refs

We have a single raw value (for example, a string) that we want to make responsive. Of course, we can create an object with the same string property and pass it to Reactive. Vue gives us a way to do the same thing — ref:

Ref returns a mutable reactive object as its internal value — a reactive reference, which is where the name comes from. This object contains only one property named value:

<template> <div class="todo-list"> <p> Current count value :{{count}}</p> </div> </template> <script lang="ts"> // data in vue2 Use reactive in VUe3 instead of import {reactive, ref, computed} from "vue"; import { useRouter } from "vue-router"; Export default {// setup is equivalent to vue2.0 beforeCreate and created, which is a new property of VUe3. Setup (props, context) {const count = ref(1); const person = ref({ name: "wht", }); console.log(person.value.name); console.log(count.value); return { count, person, }; }}; </script> <style scoped></style>Copy the code
  • Ref is recommended
  • Parameters can be passed to any type, wide applicability
  • To get the value, add.value.

Personal understanding: Make data responsive, for a single

Reactive state deconstruction

Convert our reactive objects to a set of Refs. These Refs will retain reactive associations with source objects

import { reactive, toRefs } from 'vue' const book = reactive({ author: 'Vue Team', year: '2020', title: 'Vue 3 Guide', description: 'You are reading this book right now ;) ', price: 'free'}) // Need to convert the responsive object to ref let {author, Title} = toRefs(book) title. Value = 'Vue 3 Detailed Guide' // We need to use.value as the title, Ref console.log(book.title) // 'Vue 3 Detailed Guide'Copy the code

computed

<template> <div class="todo-list"> <p> Current count value :{{count}}</p> </div> </template> <script lang="ts"> // data in vue2 Use reactive in VUe3 instead of import {reactive, ref, computed} from "vue"; import { useRouter } from "vue-router"; Export default {// setup is equivalent to vue2.0 beforeCreate and created, which is a new property of VUe3. Setup (props, context) {const count = ref(1); const plusOne = computed({ get: () => { count.value++; }, set: (val) => { count.value = val - 1; }}); plusOne.value = 1; console.log(count.value); // 0 return { count, }; }}; </script> <style scoped></style>Copy the code

watch

Parameters:

  • A reactive reference or getter function that we want to listen for
  • A callback
  • Optional configuration options, for exampledeep:true, deep monitoring,immediate: true, execute immediately
<template> <div class="todo-list"> <p> Current count value :{{count}}</p> </div> </template> <script lang="ts"> // data in vue2 Use reactive in VUe3 instead of import {reactive, ref, computed} from "vue"; import { useRouter } from "vue-router"; Export default {// setup is equivalent to vue2.0 beforeCreate and created, which is a new property of VUe3. Setup (props, context) {const count = ref(1); const add = () => { count.value++; }; Watch (count, (newVal, oldval) => {console.log(" current oldval: "+ oldval); Console. log(" current newval value: "+ newval); }, { deep: true, immediate: true, } ); return { count, add }; }}; </script> <style scoped></style>Copy the code

The life cycle

Option type API Hook inside setup
beforeCreate Not needed*
created Not needed*
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered 
export default { setup() { // mounted onMounted(() => { console.log('Component is mounted! ')})}}Copy the code

Vue3.0 英 文官网教程 : vue3js.cn/docs/zh/gui…