“This is the sixth day of my participation in the Gwen Challenge.

1. Four methods of type judgment

IsRef: checks whether a value is a REF object. IsReactive: checks whether an object is a reactive proxy created by Reactive. IsReadonly: checks whether an object is a read-only proxy created by readOnly. Check whether an object is a proxy created by reactive or Readonly methodsCopy the code
< the template > < div > < div > < div > age: {{age}} < / div > < button @ click = "func1" > button < / button > < / div > < / div > < / template > < script > import {ref,isRef,reactive, isReactive,readonly, isReadonly, isProxy } from 'vue' export default { name: 'App', setup(){ let age=ref(10); Function func1(){// isRef: checks if a value is a ref object console.log(isRef(age)); //true // isReactive: checks whether an object is a reactive proxy created by reactive console.log(isReactive(reactive({age:10,name:' j_reactive '}))); //true // Checks if an object is a read-only proxy console.log(isReadonly(readonly({})) created by readOnly); Log (isProxy(reactive({}))); // check whether the object is a proxy created by reactive or readonly. //true console.log(isProxy(readonly({}))); //true } return {age,func1} }, } </script>Copy the code

2 ref listens for data changes

Use the ref function to listen for changes to a variable and render it to the view. View changesCopy the code
<template> <div> <div> <div>objState:{{objState}}</div> < button@click ="func1"> button </button> </div> </div> </template> <script> import {ref} from 'vue' export default {name:' App', setup(){let objState=ref({name:' zhang SAN ', age:10}); Function func1(){objstate.value.name =' function func1 '; objState.value.age=14 console.log(objState) } return {objState,func1} }, } </script>Copy the code

3. Ref retrieves the elements in the page

<template> <div> <h2>input box auto focus </h2> <input ref="htmlinput" type="text" /> </div> </template> <script> import { ref,onMounted } from "vue"; export default { name: "App", setup() { let htmlinput=ref(); OnMounted (() => {<! -- if(htmlinput.value){// Get the input element console.log(htmlinput.value) // Make the input automatically focus htmlinput.value.focus(); } --> htmlinput.value&& htmlinput.value.focus(); }) return {htmlinput} }, }; </script>Copy the code