1、watch鉤子函數監聽數據的變化

watch 的一個特點是，最初綁定的時候是不會執行的（firstName的值在data定義時賦予的值），要等到 firstName 改變時才執行監聽計算。

<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div>new Vue({el: '#root',data: {firstName: 'Dawei',lastName: 'Lou',fullName: '' }, watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}} })

handler方法和immediate屬性

這時候需要增加immediate屬性，設置為true，如果不需要就設置false，那就是初始化不會監聽變化，這時候需要將watch部分的代碼修改如何

watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ' ' + this.lastName;},// 代表在wacth里聲明了firstName這個方法之后立即先去執行handler方法immediate: true} }

應用場景：

可以只用watch來監聽數據的變化實時更新數據的變化

<template><input v-model="value" /> // 搜索框 </template> <script> export default {data(){return {value: '' // 值}},watch:{value(val){ // 實時監聽數據變化this.wat_fun(val)}}， methods:{wat_fun(val){ // 這里可以調用搜索api接口console.log(val)}} } </script

2、computed鉤子函數監聽數據的變化

讀取computed里面的值還是用this.changeVal

3、watch和computed各自處理的數據關系場景不同 （來源于）
知識點1：watch擅長處理的場景：一個數據影響多個數據
知識點2：computed擅長處理的場景：一個數據受多個數據影響

對于watch，我們先從一個場景說起
在《海賊王》里面，主角團隊的名稱叫做：“草帽海賊團”
所以我們把船員依次稱為：
草帽海賊團索隆,草帽海賊團娜美,以此類推。。。
我們希望：當船團名稱發生變更的時候，這艘船上所有船員的名字一起變更！！
例如：
有一天，船長路飛為了加強團隊建設，弘揚海賊文化，決定“草帽海賊團”改名為“橡膠海賊團”（路飛是橡膠惡魔果實能力者）
我們代碼如下：

var vm = new Vue({el: '#app',/*data選項中的數據：1.haiZeiTuan_Name --> 海賊團名稱2.船員的名稱 = 海賊團名稱（草帽海賊團） + 船員名稱（例如索隆）這些數據里存在這種關系：（多個）船員名稱數據 --> 依賴于 --> （1個)海賊團名稱數據一個數據變化 ---> 多個數據全部變化*/data: {haiZeiTuan_Name: '草帽海賊團',suoLong: '草帽海賊團索隆',naMei: '草帽海賊團娜美',xiangJiShi: '草帽海賊團香吉士'},/*在watch中，一旦haiZeiTuan_Name（海賊團名稱）發生改變data選項中的船員名稱全部會自動改變 （suoLong，naMei，xiangJiShi）并把它們打印出來*/watch: {haiZeiTuan_Name: function (newName) {this.suoLong = newName + '索隆'this.naMei = newName + '娜美'this.xiangJiShi = newName + '香吉士'console.log(this.suoLong)console.log(this.naMei)console.log(this.xiangJiShi)}} })// 更改watch選項中監控的主數據 vm.haiZeiTuan_Name = '橡膠海賊團'demo:于是船員們的稱號前綴都被統一修改了！(原本是“草帽海賊團”) 但是我們的路飛船長又突發奇想：我這么喜歡吃肉，干脆我們叫做“肉肉海賊團”好了吧！ 我們把最下面的代碼改為： // 更改watch選項中監控的主數據 vm.haiZeiTuan_Name = '肉肉海賊團' demo:computed擅長處理的場景：一個數據受多個數據影響我們再從一個場景說起 路飛的全名叫做：蒙奇-D-路飛，他想成為海賊王，但路飛的爺爺卡普（海軍英雄）因此感到非常惱怒，于是把“路飛”改成了叫“海軍王”，希望他能改變志向 代碼如下： var vm = new Vue({el: '#app',/*data選項中的數據：firstName，secName,thirdNamecomputed監控的數據：lufei_Name兩者關系： lufei_Name = firstName + secName + thirdName所以等式右邊三個數據任一改變，都會直接修改 lufei_Name*/data: {// 路飛的全名：蒙奇·D·路飛firstName: '蒙奇',secName: 'D',thirdName: '路飛'},computed: {luFei_Name: function () {return this.firstName + this.secName + this.thirdName}} })// 將“路飛”改為“海軍王” vm.thirdName = '海軍王' // 打印路飛的全名 console.log(vm.luFei_Name) demo:但是： 有一天，路飛的逗逼爺爺卡普，一不小心發現可能把族譜搞錯了，實際上，他們不是“D”之一族，而是“H”一族，也就是說，“蒙奇-D-路飛”可能要叫做“蒙奇-H-路飛”了 將最后一段代碼改為如下： // 將“D”改為“H” vm.secName = 'H' // 打印路飛的全名 console.log(vm.luFei_Name) demo：methods不處理數據邏輯關系，只提供可調用的函數 相比于watch/computed，methods不處理數據邏輯關系，只提供可調用的函數 new Vue({el: '#app',template: '<div id="app"><p>{{ say() }}</p></div>',methods: {say: function () {return '我要成為海賊王'}} })

總結：

computed 在數據未發生變化時，優先讀取緩存。computed 計算屬性只有在相關的數據發生變化時才會改變要計算的屬性，當相關數據沒有變化時，它會讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執行函數。

總結

以上是生活随笔為你收集整理的vue生命周期学习（watch跟computed）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。