computer 計(jì)算屬性

通過(guò)計(jì)算得出的屬性就是計(jì)算屬性

計(jì)算屬性可以是一個(gè)函數(shù)或者是一個(gè)getter和setter組成的對(duì)象

看看一個(gè)展示名字的實(shí)例：

需求一：展示名字

// 引用完整版 Vue，方便講解 import Vue from "vue/dist/vue.js";new Vue({data: {firstName: 'Jacky',lastName: 'Lee'},computed: {fullName() {return this.firstName + ' ' + this.lastName }},template: `<div>{{fullName}}</div>`,methods: {} }).$mount("#app");

fullName通過(guò)first.Name + lastName 計(jì)算得出，fullName使用時(shí)不需要加括號(hào)，可以直接作為屬性使用，展示再頁(yè)面中

需求二：可以改名字

// 引用完整版 Vue，方便講解 import Vue from "vue/dist/vue.js";new Vue({data: {firstName: 'Jacky',lastName: 'Lee'},computed: {fullName: {get(){return this.firstName + ' ' + this.lastName},set(val){const names = val.split(' ');this.firstName = names[0];this.lastName = names[1];}}},template: `<div><div>{{fullName}}<button @click="change">改名字</button></div></div>`,methods: {change() {this.fullName = "Candy Wang"console.log('名字已更改') // 重復(fù)點(diǎn)擊‘改名字’只打印一次？}} }).$mount("#app");

通過(guò)setter和getter使得計(jì)算屬性可修改，點(diǎn)擊‘改名字’時(shí)，計(jì)算結(jié)果發(fā)生變化，重新運(yùn)行計(jì)算，進(jìn)行頁(yè)面更新。計(jì)算屬性的結(jié)果會(huì)被緩存，計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新計(jì)算。所以再次點(diǎn)擊‘改名字’由于計(jì)算結(jié)果不變，不會(huì)重新運(yùn)行計(jì)算。

watch 監(jiān)聽(tīng)/偵察

當(dāng)數(shù)據(jù)變化時(shí)執(zhí)行一個(gè)函數(shù)

watch屬性可以是字符串、函數(shù)、對(duì)象、數(shù)組

擁有deep，immediate兩屬性

watch的監(jiān)聽(tīng)方式

請(qǐng)看下面的例子：

// 引用完整版 Vue，方便講解 import Vue from "vue/dist/vue.js";new Vue({data: {n: 0,obj: {a: "a"}},template: `<div><button @click="n += 1">n+1</button><button @click="obj.a += 'hi'">obj.a + 'hi'</button><button @click="obj = {a:'a'}">obj = 新對(duì)象</button></div>`,watch: {n() {console.log("n 變了");},obj() {console.log("obj 變了");},"obj.a": function() {console.log("obj.a 變了");}} }).$mount("#app");

點(diǎn)擊n+1 ： 打印出“n 變了”

點(diǎn)擊obj.a + 'hi' : 打印出“obj.a 變了”，不打印"obj 變了"

不點(diǎn)擊obj.a + 'hi' , 點(diǎn)擊obj = 新對(duì)象 : 打印出"obj 變了"，不打印"obj 變了"

說(shuō)明watch的監(jiān)聽(tīng)方式是：簡(jiǎn)單數(shù)據(jù)類型看值，復(fù)雜數(shù)據(jù)類型（對(duì)象）看地址

抬個(gè)杠，那我想通過(guò)監(jiān)聽(tīng)obj也能obj.a變化可以嗎？

答：可以，使用deep

deep屬性

watch: {n() {console.log("n 變了")},obj() {console.log("obj 變了")deep: ture // 可以監(jiān)聽(tīng)到obj對(duì)象的所有內(nèi)部屬性},"obj.a": function() {console.log("obj.a 變了")}}

點(diǎn)擊obj.a + 'hi' : 打印出“obj.a 變了”和 "obj 變了"

當(dāng)deep：true 會(huì)監(jiān)聽(tīng)到obj對(duì)象的所有內(nèi)部屬性，默認(rèn)值為false

immediate屬性

請(qǐng)看這個(gè)例子

// 引用完整版 Vue，方便講解 import Vue from "vue/dist/vue.js";new Vue({data: {firstName: 'Jacky',lastName: 'Lee',fullName: ''},watch: {firstName: {handler: 'change'}},template: `<div>{{fullName}}<button @click="firstName='John'">改名字</button></div>`,methods: {change() {this.fullName = this.firstName + ' ' + this.lastName }} }).$mount("#app");

通過(guò)fullName屬性展示 firstName + lastName 的計(jì)算值

運(yùn)行上面代碼，頁(yè)面啥也沒(méi)有

然后點(diǎn)擊“改名字”，頁(yè)面顯示 John Lee

啊？怎么回事Jacky Lee怎么不顯示？

答：因?yàn)閣atch不會(huì)監(jiān)聽(tīng)第一次變化

改造一下

watch: {firstName: {handler: 'change',immediate： ture} }

初始頁(yè)面展示 Jacky Lee

當(dāng) immediate：true 時(shí)，回調(diào)函數(shù)會(huì)在監(jiān)聽(tīng)開(kāi)始后立刻執(zhí)行，可以監(jiān)聽(tīng)到到第一次變化。

---

總結(jié)：

• computed是用來(lái)計(jì)算一個(gè)值的，使用時(shí)不需要加括號(hào)，可以直接當(dāng)屬性使用。computed擁有依賴緩存特性，如果依賴值不變，computed不會(huì)重新計(jì)算

• watch是用來(lái)監(jiān)聽(tīng)的，有兩個(gè)選項(xiàng)，immediate 和 deep，當(dāng)immediate: true時(shí)，表示會(huì)在第一次運(yùn)行是執(zhí)行這個(gè)函數(shù)，當(dāng) deep：true時(shí)，如果監(jiān)聽(tīng)一個(gè)對(duì)象，會(huì)同時(shí)監(jiān)聽(tīng)其內(nèi)部屬性。watch沒(méi)有依賴緩存特性。

總結(jié)

以上是生活随笔為你收集整理的vue watch第一次监听不到_Vue 的 computed 和 watch 的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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