Write at the beginning: write an article for the first time, oneself understand also not a lot, possibly some explanation and the word is not appropriate, hope everybody nuggets big guy gives suggestion or opinion more, I also will revise this article in time!

1. New Life Cycle (SETUP)

Vue3 deletes the create lifecycle and adds on to other methods, such as onMounted and onUpdated. In addition, the setup attribute (executed earlier than created and this does not point to an instance) is added, which is closer to HTML. This method is called before onBeforeMounted, and vue3 also removes the this reference in its lifecycle, all methods must be called in the vue instance themselves

<template> <div>123</div> </template> <script setup> All methods must be imported after using import {ref} from 'vue' let up =ref(123) </script>Copy the code

Equivalent to (system automatically renturn after using grammar sugar, more convenient)

<template> <div>123</div> </template> <script> import {ref} from 'vue' export default{setup() { Let up=ref(123) return{up}} </script>Copy the code

The lifecycle must be referenced in the VUE instance. The destroy instance becomes onUnmounted, which is the same as the destroy function of VUe2

<script setup> import {onMounted,onUnmounted} from 'vue' // All lifecycle usage is the callback function onMounted(()=>{console.log(' I created '); OnUnmounted (()=>{console.log(' I destroyed it '); }) </script>Copy the code

2. Data and method binding of VUE3

2.1 Use ref to define data

Ref in VUe3 is a way to convert data into a responsive data structure. Because there is no data(){} in VUe3, there is no way to hijack data into responsive data. A new method, REF, has emerged in VUe3 to turn data into responsive data

To distinguish the difference between using ref and not using ref, I wrote the following two demos for comparison

<template> <div>{{num}}</div> </template> <script setup>Copy the code

We define a data without ref, and you can see that the view is rendered in the desired state

But what if we add a button and make num+1 every time?

<template> <div> <div>{{ num }}</div> <button @click="addNum">num+1</button> </div> </template> <script setup> // let num = 1; let addNum = ()=>{ num+=1; Console. log(' I did it, num is now '+num); } </script>Copy the code

As you can see, num did change, but why wasn’t the view updated? Num is now a string. String changes cannot be hijacked by objectDefineProperty or proxy. Views cannot be modified at all. Just add a ref.

The code changes as follows. Let’s see what the view and num look like

<template> <div> <div>{{ num }}</div> <button @click="addNum">num+1</button> </div> </template> <script setup> import { ref } from "vue"; let num = ref(1); Num. Value = num. Value + 1; Console. log(" I did it, num is now "+ num.value); console.log(num); }; </script>Copy the code

As you can see, the data becomes responsive, and num becomes an object, so whenever the data changes, the data gets hijacked, the view changes, and you have to put a.value in the ref

2.2 Retrieving DOM elements using ref

In VUe2 everybody used ref to get the DOM element, right? Now how do you get the DOM element in VUe3?

<template> <div> <! Value is not needed in the template. <div ref="box">{{num}}</div> </div> </template> <script setup> import {ref,nextTick,onMounted} from "vue"; let num = ref(1); // Let box =ref(); // Let box =ref(); // It will be undefined until dom rendering is complete, because dom has not yet rendered console.log(box. Value); //undefined constant nextTick(()=>{console.log(' I am executing nextTick '); console.log(box.value); }) onMounted(()=>{console.log(' I am mouted to execute '); console.log(box.value); }) </script>Copy the code

2.3 Using Reactive to define data

If it’s a little cumbersome to use.value every time, reactve can turn an entire object into responsive data

<template> <div> <div ref="box">{{data.name}}</div> < button@click ="setName"> </button> </div> </template> <script setup> import { reactive } from "vue"; Let data = reactive({name: "zhang ", age: 13, sex:" male "}); Function setName() {// call data.name = "data.name "; data.age = 35; Data. sex = "female "; } </script>Copy the code

2.4 Method Binding

Template >< div> < button@click ="setFn"></button> </div> </template> <script setup> Let setFn = ()=>{console.log(" I am an anonymous function "); } function setFn(){console.log(' I'm a normal function '); } </script>Copy the code

2.5 the computed using

<template> <div class="box"> <! {{add}} </div> </template> <script setup> import {computed, ref} from "vue"; let num1 = ref(13); let num2 = ref(13); // Set a variable to receive let add = computed(() => {return num1.value * num2.value; });Copy the code

2.6 watch use

2.6.1 Single-attribute Listening

<template> <div class="box"> <input type="text" v-model="user" /> </div> </template> <script setup> import { watch, ref } from "vue"; // let user = ref(); // The watch listener receives two or three anonymous functions, the first is the listener value, the second is the listener function, (Optional) watch(() => user.value, (newVal, oldVal) => {console.log(" new value :" + newVal + "old value :" + oldVal); }, // Enable deep listening {deep: true}); </script>Copy the code

2.6.2 Multi-Attribute Listening (Method 1)

If you need to listen for multiple properties, write multiple Watch listeners

<template> <div class="box"> <input type="text" v-model="user" /> <input type="password" v-model="password" /> </div> </template> <script setup> import { watch, ref } from "vue"; // let user = ref(); let password = ref(); // Listen on user watch(() => user.value, newVal => {console.log(" username :" + newVal); }, // Enable deep listening {deep: true}); // Listen on password watch(() => password.value, newVal => {console.log(" password :" + newVal); }); </script>Copy the code

2.6.3 Multi-Attribute Listening (Method 2)

The second method is more straightforward than the first, listening for multiple values at once and firing the method whenever one of them changes.

<template> <div class="box"> <input type="text" v-model="user" /> <input type="password" v-model="password" /> </div> </template> <script setup> import { watch, ref } from "vue"; // let user = ref(); let password = ref(); // Listen on both user and password. If either user or password changes, Watch (()=>[user.value, password.value],([newUser, newPassword],[oldUser, OldPassword])=>{console.log(' I am a newUser value '+newUser); Console. log(' I'm oldUser value '+oldUser); Console. log(' I am a new pass value '+newPassword); Console. log(' I'm an old pass value '+oldPassword); }) </script>Copy the code

3. The routing

3.1 Route Forward

In vue2, this.$route. push is used to jump. In VUe3, this is not used in setup.

<template> <div> < button@click ="jumpNewPage" </button> </div> </template> <script setup> // UseRouter import {useRouter} from 'vue-router' const router = useRouter() let jumpNewPage = ()=>{// // const router = useRouter() router.push({path: '/'})} </script>Copy the code

3.2 Route Parameter Transmission

<script setup> // Remember that useRouter import {useRouter} from 'vue-router' const router = useRouter() let JumpNewPage = ()=>{// Query = ()=>{// Query = ()=>{// Query = ()=>{router.push({path: '/',query: {name:' home '}}) // Params route.push ({name: 'home '}}) // Params route.push ({name: 'Home',params: {name:' Home'}})} </script>Copy the code

Use query to pass the parameter

Use params to pass parameters

3.3 Route Connection Parameters

Element uses params to jump and params to receive

<script setup> // import useRoute from 'vue-router' import {onMounted} from 'vue' const route = useRoute() onMounted(()=>{ console.log(route.params); {name:' home '}}) </script>Copy the code

The element uses the Query jump and the query receive

<script setup> // import useRoute from 'vue-router' import {onMounted} from 'vue' const route = useRoute() onMounted(()=>{ console.log(route.query); {name:' home '}}) </script>Copy the code