vue中methods,computed,watch方法的區別

来源:https://www.cnblogs.com/smfox/archive/2018/04/13/8820861.html
-Advertisement-
Play Games

vue中methods,computed,watch方法的區別 ...


vue中mothods,computed,watch方法的區別

對於一些需要變動的值,比如最初的時候有一個值,在之後我們要將他進行改變。
可選的思路:
1.通過change或者click等這類事件來觸發一個函數,在函數內部去修改一個變數。
2.通過watch的方法,監聽被改變的變數,然後在watch的那個變數命名的函數中去對我們要修改的值進行重新的賦值,或者是觸發一次更新。
3.使用computed的方法,監聽一個變數,通過return一個新的變數的方式來更新一個變數的數據。

執行的不同點

1.methods的方法是通過觸發一個事件或者函數的回調來實現數據的更新,他的執行,依賴於事件的觸發。
2.watch的類似於emit與on這種觸發的方式,通過vue的$watch實例監聽值得改變來自動的觸發一個函數的執行。
3.computed函數的執行最快也是執行最靠前的,在html渲染開始,就已經執行了。

應用場景

methods事件的觸發就不說了,直接回調或者是綁定的@這樣的事件來觸發
而watch的觸發消耗也大,每次數據的改變就要觸發一次函數的執行,要節省著點用啊。
computed用在改變一個變數的顯示,和data對象里的數據屬性是同一類的。返回的值直接就修改掉了原先的值,最大的優點在於簡潔速度快也可以作為一個過濾器用也可以起到data中聲明一個變數的作用,依賴別的變數來顯示新的變數。

<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{message.split('').reverse().join('')}}"</p> 
 var vm = new Vue({
  el: '#example',
  data: {
      message: 'Hello'
         },
  computed: {
  reversedMessage: function () {
        //代替上邊的模板的表達式
       return this.message.split('').reverse().join('')
  }}})

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.行內元素 (1)設置寬高無效 (2)對margin僅設置左右方向有效,上下無效;padding設置上下左右都有效,即會撐大空間 (3)不會自動進行換行 2.塊狀元素 (1)能夠識別寬高 (2)margin和padding的上下左右均對其有效 (3)可以自動換行 (4)多個塊狀元素標簽寫在一起,默 ...
  • 昨天遇到一個面試題,主要就是事件覆蓋問題和觸發問題 (不是打廣告,無視文本內容) 總之這樣的話,會輸出三次“做自己的網站”。 為什麼不是兩次,而是輸出三次呢? 1.首先onclick=function...是DOM0級事件處理程式,而addEventListener是DOM2級事件處理程式,這兩種屬 ...
  • 上一節講了express的入口文件,當執行主函數,會調用app.init方法,這個方法就來源於application模塊。 這個模塊有很多方法,目前僅僅過一下初始化方法: 這裡初始化了三個對象,作用在註釋有簡單介紹,實際用法在後面再做介紹。 隨後執行了預設配置方法,先不看那個,在這之前過一個工具方法 ...
  • clearTimeout() 方法可取消由 setTimeout() 方法設置的 timeout。 語法: ...
  • Element-UI 的 Table 組件很強大,但是我們的需求更強大... 簡單粗暴的來一發效果圖: 一、數據驅動 傳統的拖動效果,都是基於通過 mousedown、mousemove、mouseup 事件來修改刪減 dom 節點 但 Vue 是一個數據驅動的前端框架,開發時應儘量避免操作 dom ...
  • 使用的模塊 ws http http-proxy 主要通過htt-proxy實現中轉 啟動websocket服務 ws http http-proxy 啟動http-proxy代理伺服器 註意:客戶端發送的數據websocket已加密無法直接獲得,該演示通過ws模塊中的PerMessageDefla ...
  • 今天為什麼要給大家分享這篇文章呢,我發現最近來學前端的特別多,群裡面整天都有人問:前端好找工作嗎?前端要怎麼學啊?前端工資怎麼樣?前端XX,前端XXX,雖然我回答過無數次這種問題了,但是問這個的還是有很多,今天我就給大伙分享一下前端學習路線,當然不是我自己總結的,畢竟沒有那麼厲害,就借用騰訊大佬的給 ...
  • 之前用vue-cli腳手架在windows上開發的一個項目,現在有換mac的打算,但是換系統的話對代碼對環境依賴比較嚴重。 去年和別的FE並行開發兩個人用的都是windows,這樣還好,沒有什麼問題,但是兩個人電腦環境不一樣問題就比較多了。 所以準備將環境切換到Linux,但是遇見了重重困難,這裡記 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...