Vue基礎(chǔ)之偵聽器詳解

第Vue基礎(chǔ)之偵聽器詳解目錄vue中什么是偵聽器偵聽器的用法vue偵聽器-watchvue偵聽器-深度偵聽和立即執(zhí)行總結(jié)

vue中什么是偵聽器

開發(fā)中我們?cè)赿ata返回的對(duì)象中定義了數(shù)據(jù)，這個(gè)數(shù)據(jù)可以通過插值語(yǔ)法等方式綁定到templat中。

當(dāng)數(shù)據(jù)變化的時(shí)候，template里綁定的數(shù)據(jù)會(huì)自動(dòng)進(jìn)行更新來(lái)顯示最新的數(shù)據(jù)。但是這種變化是在template中自動(dòng)偵聽data的值來(lái)進(jìn)行變換的

在某些情況下，我們希望在代碼邏輯中監(jiān)聽某個(gè)數(shù)據(jù)的變化，這個(gè)時(shí)候就需要用到偵聽器watch了

官方定義：Vue通過watch選項(xiàng)提供了一個(gè)更通用的方法，來(lái)響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。

一個(gè)對(duì)象，鍵是要偵聽的響應(yīng)式property——包含了data或computedproperty，而值是對(duì)應(yīng)的回調(diào)函數(shù)。值也可以是方法名，或者包含額外選項(xiàng)的對(duì)象。組件實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用$watch()，參閱$watch，以了解更多關(guān)于deep、immediate和flush選項(xiàng)的信息

偵聽器的用法

選項(xiàng)：watch

類型：{[key:string]:string|Function|Object|Array}

偵聽器watch的配置選項(xiàng)：

默認(rèn)情況下，watch只是在偵聽數(shù)據(jù)的引用變化，對(duì)于數(shù)據(jù)內(nèi)部屬性的變化是不會(huì)做出響應(yīng)的：

這個(gè)時(shí)候我們可以使用一個(gè)選項(xiàng)deep進(jìn)行更深層的偵聽；另外一個(gè)屬性，是希望一開始的就會(huì)立即執(zhí)行一次：這個(gè)時(shí)候我們使用immediate選項(xiàng)；這個(gè)時(shí)候無(wú)論后面數(shù)據(jù)是否有變化，偵聽的函數(shù)都會(huì)有限執(zhí)行一次；

data的內(nèi)容：

data(){

return{

info:{

name:'cgj'

watch:{

info:{

handler(newValue,oldValue){

console.log(newValue,oldValue)

deep:true,

immediate:true,

另外一個(gè)是Vue3文檔中沒有提到的，但是Vue2文檔中有提到的是偵聽對(duì)象的屬性：

'':function(newValue,oldValue){

console.log(newValue,oldValue)

還有另外一種方式就是使用$watch的API：

具體$watch可以查看官方的API查看（用的方式比較少）：實(shí)例方法|Vue.js

constapp=createApp({

data(){

return{

a:1,

b:2,

c:{

d:4

e:5,

f:6

watch:{

//偵聽頂級(jí)property

a(val,oldVal){

console.log(`new:${val},old:${oldVal}`)

//字符串方法名

b:'someMethod',

//該回調(diào)會(huì)在任何被偵聽的對(duì)象的property改變時(shí)被調(diào)用，不論其被嵌套多深

c:{

handler(val,oldVal){

console.log('cchanged')

deep:true

//偵聽單個(gè)嵌套property

'c.d':function(val,oldVal){

//dosomething

//該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用

e:{

handler(val,oldVal){

console.log('echanged')

immediate:true

//你可以傳入回調(diào)數(shù)組，它們會(huì)被逐一調(diào)用

f:[

'handle1',

functionhandle2(val,oldVal){

console.log('handle2triggered')

handler:functionhandle3(val,oldVal){

console.log('handle3triggered')

/*...*/

methods:{

someMethod(){

console.log('bchanged')

handle1(){

console.log('handle1triggered')

constvm=app.mount('#app')

vm.a=3//=new:3,old:1

vue偵聽器-watch

目標(biāo):可以偵聽data/computed屬性值改變

語(yǔ)法:

watch:{

"被偵聽的屬性名"(newVal,oldVal){

例子代碼：

template

div

inputtype="text"v-model="name"

/div

/template

script

exportdefault{

data(){

return{

name:""

//目標(biāo):偵聽到name值的改變

watch:{

變量名(newVal,oldVal){

//變量名對(duì)應(yīng)值改變這里自動(dòng)觸發(fā)

watch:{

//newVal:當(dāng)前最新值

//oldVal:上一刻值

name(newVal,oldVal){

console.log(newVal,oldVal);

/script

style

/style

小結(jié):想要偵聽一個(gè)屬性變化,可使用偵聽屬性watch

vue偵聽器-深度偵聽和立即執(zhí)行

目標(biāo):可以偵聽data/computed屬性值改變

語(yǔ)法:

watch:{

"被偵聽的屬性名"(newVal,oldVal){

例子代碼:

template

div

inputtype="text"v-model=""

inputtype="text"v-model="user.age"

/div

/template

script

exportdefault{

data(){

return{

user:{

name:"",

age:0

//目標(biāo):偵聽對(duì)象

watch:{

變量名(newVal,oldVal){

//變量名對(duì)應(yīng)值改變這里自動(dòng)觸發(fā)

變量名:{

handler(newVal,oldVal){

deep:true,//深度偵聽(對(duì)象里面層的值改變)

immediate:true//立即偵聽(網(wǎng)頁(yè)打開handler執(zhí)行一次)

watch:{

user:{

handler(newVal,oldVal){

//user里的對(duì)象

console.log(newVal,oldVal);