Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use setup, ref and reactive in vue3". In daily operation, I believe many people have doubts about how to use setup, ref and reactive in vue3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use setup, ref and reactive in vue3"! Next, please follow the editor to study!

1. Know the use of setUp for the first time

A brief introduction to the following code features:

Use the ref function to listen for changes in a variable and render it to the view.

The setUp function is the entry function of the combined API. This is very important.

SetUp can listen for changes in variables! We're going to use it.

Ref is built into vue and needs to be imported.

The {{countNum}} button import {ref} from 'vue'export default {name:' App', setup () {/ / indicates that a variable count is defined. The initial value of this variable is 100 let countNum=ref (100); / / in a composite API, if you want to define a method, you don't have to define it in methods. Just define function handerFunc () {/ / console.log (countNum); / / countNum is an object countNum.value + = 10;} / the method or variable defined in the combined api. If the outside world needs to use it, then return {aaa,func} must be exposed to return {countNum, handerFunc}} 2 to recognize the use of reactive.

The ref function can only listen for data changes of simple types.

Cannot listen for complex type changes (arrays, objects).

So our protagonist reactive appeared.

Functions in setup are automatically executed once.

{{item.name}} import {reactive} from 'vue'export default {name:' App', setup () {console.log ("setUp automatically executes") / / ref function Note: / / ref function can only listen for data changes of simple types, not listen In the complex type change (array, object) / / reactive method is an object let satte=reactive ({arr: [{name: "Sito", id:'0011'}, {name: "under the skin", id:'0011'}, {name: "centenarian", id:'0012'}, {name: "three generations", id:'0013'} ]}) return {satte}},} 3 use reactive

Delete the view

{{item.name}} import {reactive} from 'vue'export default {name:' App', setup () {let satte=reactive ({arr: [{name: "Sito", id:'0011'}, {name: "under the skin", id:'0011'}, {name: "Centenary", id:'0012'}, {name: "three generations" Id:'0013'},]}) / / Delete the clicked element function del (index) {for (let iTun0) I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.