computer 計算屬性

通過計算得出的屬性就是計算屬性

計算屬性可以是一個函數或者是一個getter和setter組成的對象

看看一個展示名字的實例：

需求一：展示名字

// 引用完整版 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通過first.Name + lastName 計算得出，fullName使用時不需要加括號，可以直接作為屬性使用，展示再頁面中

需求二：可以改名字

// 引用完整版 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('名字已更改') // 重復點擊‘改名字’只打印一次？}} }).$mount("#app");

通過setter和getter使得計算屬性可修改，點擊‘改名字’時，計算結果發生變化，重新運行計算，進行頁面更新。計算屬性的結果會被緩存，計算屬性只有在它的相關依賴發生改變時才會重新計算。所以再次點擊‘改名字’由于計算結果不變，不會重新運行計算。

watch 監聽/偵察

當數據變化時執行一個函數

watch屬性可以是字符串、函數、對象、數組

擁有deep，immediate兩屬性

watch的監聽方式

請看下面的例子：

// 引用完整版 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 = 新對象</button></div>`,watch: {n() {console.log("n 變了");},obj() {console.log("obj 變了");},"obj.a": function() {console.log("obj.a 變了");}} }).$mount("#app");

點擊n+1 ： 打印出“n 變了”

點擊obj.a + 'hi' : 打印出“obj.a 變了”，不打印"obj 變了"

不點擊obj.a + 'hi' , 點擊obj = 新對象 : 打印出"obj 變了"，不打印"obj 變了"

說明watch的監聽方式是：簡單數據類型看值，復雜數據類型（對象）看地址

抬個杠，那我想通過監聽obj也能obj.a變化可以嗎？

答：可以，使用deep

deep屬性

watch: {n() {console.log("n 變了")},obj() {console.log("obj 變了")deep: ture // 可以監聽到obj對象的所有內部屬性},"obj.a": function() {console.log("obj.a 變了")}}

點擊obj.a + 'hi' : 打印出“obj.a 變了”和 "obj 變了"

當deep：true 會監聽到obj對象的所有內部屬性，默認值為false

immediate屬性

請看這個例子

// 引用完整版 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");

通過fullName屬性展示 firstName + lastName 的計算值

運行上面代碼，頁面啥也沒有

然后點擊“改名字”，頁面顯示 John Lee

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

答：因為watch不會監聽第一次變化

改造一下

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

初始頁面展示 Jacky Lee

當 immediate：true 時，回調函數會在監聽開始后立刻執行，可以監聽到到第一次變化。

---

總結：

• computed是用來計算一個值的，使用時不需要加括號，可以直接當屬性使用。computed擁有依賴緩存特性，如果依賴值不變，computed不會重新計算

• watch是用來監聽的，有兩個選項，immediate 和 deep，當immediate: true時，表示會在第一次運行是執行這個函數，當 deep：true時，如果監聽一個對象，會同時監聽其內部屬性。watch沒有依賴緩存特性。

總結

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

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