Vue is used to pre-load the image watch,

Source: Internet
Author: User

Vue is used to pre-load the image watch,

Watch application scenarios

I want to believe that image pre-loading has been touched by everyone. When there are a large number of images, we will display the homepage only to ensure that all the page images are loaded, perform some ajax requests or logical operations

Now, if you use computed to listen to a data and perform a series of logical operations and ajax requests, watch is no longer suitable. If you use computed, you cannot even implement it, only watch listeners

<Template> <div v-show = show>     </div> </template> <script> export default {mounted () {var _ this = this let imgs = document. querySelectorAll ('img ') console. log (imgs) Array. from (imgs ). forEach (item) => {let img = new Image () img. onload = () => {this. count ++} img. src = item. getAttribute ('src')}, data () {return {count: 0, show: false }}, watch: {count (val, oldval) {if (val = 4) {this. show = true alert ("loaded") // you can then send some ajax operations to the background }}</script>

We can find that the page is displayed only when all four images are uploaded.

According to the end, there is a very important sentence.

Although computing attributes are more suitable in most cases, a custom watcher is also required. This is why Vue provides a more general method to respond to data changes using the watch option. This is useful when you want to perform asynchronous operations or overhead operations when data changes.

Based on this official understanding, I will summarize my overall understanding. Give a summary of computed and watch, remember the summary of these points, and think about these summary during the project, and select your application method.

Computed:

Listening to multiple data or one data for maintenance returns a status value. If one or more data changes, the whole function body is computed and the status value is returned.

Watch:

Only one listener is required. As long as the data changes, two parameters are returned. The first parameter is the current value, and the second parameter is the value before the change, it will trigger the logical behavior in the function body for subsequent logical operations.

The above vue pre-loaded watch usage examples are all the content shared by Alibaba Cloud. I hope you can give us a reference and support the help house.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.