1、watch鉤子函數(shù)監(jiān)聽(tīng)數(shù)據(jù)的變化

watch 的一個(gè)特點(diǎn)是，最初綁定的時(shí)候是不會(huì)執(zhí)行的（firstName的值在data定義時(shí)賦予的值），要等到 firstName 改變時(shí)才執(zhí)行監(jiān)聽(tīng)計(jì)算。

<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屬性

這時(shí)候需要增加immediate屬性，設(shè)置為true，如果不需要就設(shè)置false，那就是初始化不會(huì)監(jiān)聽(tīng)變化，這時(shí)候需要將watch部分的代碼修改如何

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

應(yīng)用場(chǎng)景：

可以只用watch來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化實(shí)時(shí)更新數(shù)據(jù)的變化

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

2、computed鉤子函數(shù)監(jiān)聽(tīng)數(shù)據(jù)的變化

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

3、watch和computed各自處理的數(shù)據(jù)關(guān)系場(chǎng)景不同 （來(lái)源于）
知識(shí)點(diǎn)1：watch擅長(zhǎng)處理的場(chǎng)景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
知識(shí)點(diǎn)2：computed擅長(zhǎng)處理的場(chǎng)景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響

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

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

總結(jié)：

computed 在數(shù)據(jù)未發(fā)生變化時(shí)，優(yōu)先讀取緩存。computed 計(jì)算屬性只有在相關(guān)的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)改變要計(jì)算的屬性，當(dāng)相關(guān)數(shù)據(jù)沒(méi)有變化時(shí)，它會(huì)讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執(zhí)行函數(shù)。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。