一、computed：
模板內運算式非常便利，可用于簡單計算，當模板內放入太多的邏輯時，模板會過重且難以維護；可以使用computed替代
計算屬性是基于它們的回應式依賴進行快取的，當依賴的回應式資料發生改變時，計算屬性才會改變；
如果時非回應式（未在data中宣告）資料，計算屬性是不會發生改變的；
計算屬性將被混入到vue實體中，所有的getter和setter的this背景關系自動系結到vue實體中
// 計算屬性 VS 方法
// html <div>{{ msg }}</div> // 計算屬性 <div>{{ res() }}</div> // 方法 // js const vm = new Vue({ el: '#app', data: { name: 'zs' }， // 計算屬性 computed：{ msg: { get() : { return this.name }, set(val): { // val 是修改msg時觸發并賦值的最新值 } } }, // 方法 method: { res(): { return this.name
// 方法和計算屬性效果一樣，不同的是計算屬性有快取，方法是每次觸發都要進行一次呼叫，計算屬性是只有回應式依賴改變了才會觸發 } } })
二、watch 偵聽器
相對于偵聽器，大多數情況下使用computed，但有時也需要一個自定義的偵聽器watch，場景： 當資料在資料變化時，執行異步或者開銷比較大的操作時，使用偵聽器
const vm = new Vue({ el: '#app', data: { question: 'old-Q' }, watch: { // 如果question發生改變，則這個函式就會觸發 question: function(newQuestion, oldQuestion){ // newQuestion是question改變后的新值 // oldQuestion是question改變之前的值 } } }) // watch是偵聽一個引數，當這個引數發生變化時影響其他資料的變化，并且可以獲得該引數的新值和舊值進行相應的計算
官方檔案： https://cn.vuejs.org/v2/guide/computed.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/83654.html
標籤：JavaScript
上一篇：前端三大主流框架React、Vue、Angular的對比
下一篇：js實作函式防抖與節流