溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
watch應用場景
我想信圖片預加載大家肯定都有接觸過，當圖片量大的時候，為了保證頁面圖片都加載出來的時候，我們才把主頁面給顯示出來，再進行一些ajax請求，或者邏輯操作
那此時你用computed對這種監聽一個數據然后進行一系列邏輯操作和ajax請求，那watch再適合不過了，如果用computed的話那你連實現都實現不了，只有用watch監聽
<template> <div v-show=show> <img src="https://cache.yisu.com/upload/information/20200622/114/51132.jpg" alt=""> <img src="http://img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""> <img src="https://cache.yisu.com/upload/information/20200622/114/51133.jpg" alt=""> <img src="http://img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""> </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("加載完畢") //然后可以對后臺發送一些ajax操作 } } } } </script>
我們可以發現發四張圖片都加載完畢的時候頁面才顯示出來
根據完方有一句話說的很重要的一句
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher 。這是為什么 Vue 提供一個更通用的方法通過 watch 選項，來響應數據的變化。當你想要在數據變化響應時，執行異步操作或開銷較大的操作，這是很有用的。
基于這個官方的理解再總結我個人的整體理解。給出computed和watch的總結，記住這幾點的總結，在做項目的時候想想這些總結，選擇你的應用方法
computed：
監聽多個數據或者一個數據來維護返回一個狀態值 ，只要其中一個或多個數據發生了變化，則會從新計算整個函數體，從新返回狀態值
watch：
只有一個一個監聽據，只要這個數據發生變化，就會在返回兩個參數，第一個是當前的值，第二個是變化前的值，每當變化的時候，則會觸發函數體的里的邏輯行為，來進邏輯后續操作
以上這篇vue進行圖片的預加載watch用法實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
