<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # watch 和 watchEffect 的使用和差異性 我們講一下在 **composition API** 中如何來使用 **watch** 和 **watchEffect** >[success] ## watch 使用方法 1. **監聽基本數據** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 const app = Vue.createApp({ setup(){ const { ref, watch } = Vue // 定義name屬性 const name = ref('dell') // 監聽name屬性 // 具備一定的惰性 lazy // 參數可以拿到原始和當前值 watch(name, (currentValue, prevValue) => { console.log(currentValue, prevValue) }) return { name } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **監聽對象或數組** 1. **錯誤寫法示范** 如果 **監聽** 的是一個 **reactive** 這樣的數據, **watch** 的 **第 1 個參數** 就 **不可以** 像下面這樣寫: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 const app = Vue.createApp({ setup(){ const { reactive, watch, toRefs } = Vue const nameObj = reactive({ name: 'dell' }) // 具備一定的惰性 lazy // 參數可以拿到原始和當前值 watch(nameObj.name, (currentValue, prevValue) => { console.log(currentValue, prevValue) }) const { name } = toRefs(nameObj) return { name } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 2. **正確寫法示范** 監聽 **reactive** 這樣的數據,**watch** 的第一個參數,要用 **箭頭函數** 的形式 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 const app = Vue.createApp({ setup(){ const { reactive, watch, toRefs } = Vue const nameObj = reactive({ name: 'dell' }) // 具備一定的惰性 lazy // 參數可以拿到原始和當前值 watch(() => nameObj.name, (currentValue, prevValue) => { console.log(currentValue, prevValue) }) const { name } = toRefs(nameObj) return { name } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 3. **監聽多個數據** 像下面這個代碼中,想要 **同時監聽 2 個數據** 就要寫 **2 次 watch** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 const app = Vue.createApp({ setup(){ const { reactive, watch, toRefs } = Vue // 定義變量 const nameObj = reactive({ name: 'dell', englishName: 'lee' }) // 監聽 nameObj.name watch(() => nameObj.name, (currentValue, prevValue) => { console.log(currentValue, prevValue) }) // 監聽 nameObj.englishName watch(() => nameObj.englishName, (currentValue, prevValue) => { console.log(currentValue, prevValue) }) // 解構取值 const { name, englishName } = toRefs(nameObj) return { name, englishName } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> <div> EnglishName: <input v-model="englishName"> </div> <div> EnglishName is {{ englishName }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 上面的代碼就會 **顯得特別麻煩,重復性的代碼寫了多次** ,那我們可以這樣寫,把 **它們倆寫在一起監聽** ,在 **watch 里可以接收一個數組** ,它的意思就是 **這個數組中不管哪個值發生變化,我都會執行后面的函數,同樣后面函數的參數也必須是數組的形式** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 const app = Vue.createApp({ setup(){ const { reactive, watch, toRefs } = Vue // 定義變量 const nameObj = reactive({ name: 'dell', englishName: 'lee' }) // 監聽 nameObj.name watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng],[preName, preEng]) => { console.log(curName, preName, '---', curEng, preEng) }) // 解構取值 const { name, englishName } = toRefs(nameObj) return { name, englishName } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> <div> EnglishName: <input v-model="englishName"> </div> <div> EnglishName is {{ englishName }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 4. **初始化執行一次監聽** **watch** 也可以 **默認執行一次監聽** , **watch** 的 **第 2 個參數** 是個 **對象** ,可以在里面進行 **配置 immediate: true** 即可,代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 const app = Vue.createApp({ setup(){ const { reactive, watch, watchEffect, toRefs } = Vue // 定義變量 const nameObj = reactive({ name: 'dell', englishName: 'lee' }) // 監聽 nameObj.name watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng],[preName, preEng]) => { console.log('watch', curName, preName, '---', curEng, preEng) }, { immediate: true }) // 解構取值 const { name, englishName } = toRefs(nameObj) return { name, englishName } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> <div> EnglishName: <input v-model="englishName"> </div> <div> EnglishName is {{ englishName }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## watchEffect 使用方法 傳統的 **vue2.x 版本 watch** 想實現 **默認執行一次監聽** ,就要寫 **immediate: true** ,如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 const app = Vue.createApp({ data(){ return { nameObj: { name: 'dell', englishName: 'lee' } } }, watch: { 'nameObj.name' : { immediate: true, handler: function (oldValue, newValue) { console.log(oldValue,) } } }, template: ` <div> <div> Name: <input v-model="nameObj.name"> </div> <div> Name is {{ nameObj.name }} </div> <div> EnglishName: <input v-model="nameObj.englishName"> </div> <div> EnglishName is {{ nameObj.englishName }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 而新版 **composition API** 的 **watchEffect 方法,初始化就會執行一次** , 它會 **自動檢測方法內部使用的代碼是否有變化** ,而且 **不需要傳遞你要偵聽的內容,它會自動感知內容變化,缺點:無法獲取之前或當前的數據** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 // watchEffect 偵聽器,偏向于 effect const app = Vue.createApp({ setup(){ const { reactive, watch, watchEffect, toRefs } = Vue // 定義變量 const nameObj = reactive({ name: 'dell', englishName: 'lee' }) // 監聽 nameObj.name // watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng],[preName, preEng]) => { // console.log('watch', curName, preName, '---', curEng, preEng) // }) // 立即執行,沒有惰性 immediate // 不需要傳遞你要偵聽的內容,自動會感知代碼依賴,不需要傳遞很多參數,只要傳遞一個回調函數 // 不能獲取之前數據的值 watchEffect(() => { console.log(nameObj.name) }) // 解構取值 const { name, englishName } = toRefs(nameObj) return { name, englishName } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> <div> EnglishName: <input v-model="englishName"> </div> <div> EnglishName is {{ englishName }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## 結束 watch 或 watchEffect 監聽 假如我有這樣一個需求想 **2s** 后 **結束監聽** ,可以用 **變量或者常量** 把 **watch 或 watchEffect** 儲存起來,然后 **2s 后執行一下這個變量的方法即可結束監聽**,具體代碼如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch 和 watchEffect 的使用和差異性</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // watch 偵聽器 // watchEffect 偵聽器,偏向于 effect const app = Vue.createApp({ setup(){ const { reactive, watch, watchEffect, toRefs } = Vue // 定義變量 const nameObj = reactive({ name: 'dell', englishName: 'lee' }) // 監聽 nameObj.name const stop1 = watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng],[preName, preEng]) => { console.log('watch', curName, preName, '---', curEng, preEng) setTimeout(() => { stop1() // 結束監聽 }, 2000) }) // 立即執行,沒有惰性 immediate // 不需要傳遞你要偵聽的內容,自動會感知代碼依賴,不需要傳遞很多參數,只要傳遞一個回調函數 // 不能獲取之前數據的值 const stop = watchEffect(() => { console.log(nameObj.name) setTimeout(() => { stop() // 結束監聽 }, 2000) }) // 解構取值 const { name, englishName } = toRefs(nameObj) return { name, englishName } }, template: ` <div> <div> Name: <input v-model="name"> </div> <div> Name is {{ name }} </div> <div> EnglishName: <input v-model="englishName"> </div> <div> EnglishName is {{ englishName }} </div> </div> ` }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看