Shulou(Shulou.com)06/03 Report--

This article shows you how to use the watch listener in vue3.0, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

Preface

Although computed properties are more appropriate in most cases, a custom listener is sometimes required. This is why Vue provides a more general way to respond to changes in data through the watch option. This is most useful when you need to perform asynchronous or expensive operations when the data changes.

The difference between listeners and computed properties

Asynchronous operations cannot be done in computational properties, and listeners can do asynchronous operations, which is equivalent to an upgraded version of computational properties.

How does vue3 use watch? Basic use of watch listener pages

General listening data: {{num}}

Click

Script

Import {ref, watch} from 'vue'// remember to import new features of vue3 whenever you use them Call setup () {const num = ref (0) / / watch (data to be listened for, callback function) watch (num, (v1, v2) = > {/ / v1 is the new value after the change / / v2 is the value before the change console.log (v1, v2) / key point: you can get the value before and after modification by listening to the ordinary function The listening data must be responsive}) / / stand-alone event const butFn = () = > {num.value++} return {butFn, num}} listening for multiple responsive data const num = ref (0) const num2 = ref (20) watch ([num, num2], (v1, v2) = > {/ / the result is an array The result also returns a result in array format / / v1 is the latest result / / v2 is the array of old data console.log ('v1, v1,'v2, v2) / / summary: you can get the values before and after the update, and the listening result is also the array data in the same order}) listen for the responsive data defined by reactive

Const obj = reactive ({msg: 'strange but cute'}) watch (obj, () = > {/ / only the latest value console.log (obj.msg)})

Summary: if you listen to the object, then the two parameters of the callback function of the listener are the same, indicating the latest object data, and you can also read the listening object directly at this time, so the resulting value is also up-to-date.

One of the attributes of responsive data defined by listening reactive const obj = reactive ({msg: 'strange and cute'}) watch (() = > obj.msg, (v1, v2) = > {/ / v1 is the latest value of the monitored data / / v2 is the original value of the monitored data console.log (v1) V2) / / Summary: if the listening object acts as an attribute Configuration options const obj = reactive ({msg: {info: 'ooo'}}) watch (() = > obj.msg, (v1, v2) = > {console.log (v1, v2)}) {/ / the first rendering component triggers immediate: true, / / enables deep snooping. If the data in the object changes, it will also be heard / / if the listening data is a long expression. So you need to use a function way / / but after writing in the form of a function, the data in the inner layer will not change, so you need to add the deep option deep: true}) the above is how to use the watch listener in vue3.0. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.