1： 計算屬性： （內置緩存機制）

當更改age的時候， fullName 函數不執行；

當更改fristName的時候， fullName 函數才執行

<div id = "app"><span>{{fullName}}</span> <span>{{age}}</span> </div><script>var vm = new Vue({el : "#app",data: {fristName : "Christine",lastName : "Gao",age : "26"},// “計算屬性” 實現： 具有緩存機制， 即改變年齡的時候， 執行 fullName 函數computed : {fullName : function () {console.log("計算了一次");return this.fristName + " " + this.lastName;}}})</script>

「效果如下：」

get和set用法

計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter：

<div id="app"><span>{{fullName}}</span><span>{{age}}</span> </div><script>var vm = new Vue({el: "#app",data: {firstName: 'Foo',lastName: 'Bar',age:'26',},computed: {fullName:{get() {//回調函數 當需要讀取當前屬性值是執行，根據相關數據計算并返回當前屬性的值console.log(this.firstName + ' ' + this.lastName)return this.firstName + ' ' + this.lastName},set(val) {//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據//val就是fullName的最新屬性值console.log(val)const names = val.split(' ');console.log(names)this.firstName = names[0];this.lastName = names[1];}}}})

現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

「效果如下」

2、方法： （無內置緩存）

當更改age的時候， fullName 函數執行， 這樣就增加了代碼冗余，瀏覽器運行性能降低；

當更改fristName的時候， fullName 函數仍執行。

<div id = "app"><span>{{fullName()}}</span><span>{{age}}</span> </div><script>var vm = new Vue({el : "#app",data: {fristName : "Christine",lastName : "Gao",age : "26"},// “方法” 實現 ： 改變年齡的時候， 也會執行 fullName 函數methods : {fullName : function () {console.log("用方法，計算了一次")return this.fristName + " " + this.lastName;}}})</script>

「效果如下：」

3、偵聽器： （有內置緩存）

跟“計算屬性”相似， 但是代碼相較于“計算屬性”而言， 比較繁瑣且冗余。

<div id = "app"><span>{{fullName}}</span><span>{{age}}</span> </div> <script>var vm = new Vue({el : "#app",data: {fristName : "Christine",lastName : "Gao",fullName : "Christine Gao",age : "26"},// “偵聽” 實現 ：實現了緩存， 但是代碼冗余。watch : {firstName : function () {console.log("偵聽實現 ， 計算了一次");this.fullName = this.fristName + " " + this.lastName;},lastName : function () {console.log("偵聽實現 ， 計算了一次");this.fullName = this.fristName + " " + this.lastName;}}})</script>

「效果如下：」

監聽 基礎用法

放在 data 中的對象，一旦發生改變就會執行相應的操作,當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的

<div id="app"><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p> </div><script>var vm = new Vue({el: '#app',data: {firstName: 'Joy',lastName: 'lqy',fullName: ''},watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}}}) </script>

watch 中的對象在 data 中已經定義了,當我們輸入firstName后， watch監聽每次修改變化的新值，然后計算輸出fullName。也就是上面的代碼中，fullName 一開始被渲染出來的時候是空值,如下所示:

監聽 高級用法

handler方法和immediate屬性

如上所述，一開始被渲染出來的時候，fullName是空值,如果想要一開始就讓最初綁定的值執行該怎么辦尼？別急，我們只需要給firstName綁定一個handler方法，之前我們寫的watch方法其實默認寫的就是這個handler，Vue.js會去處理這個邏輯，最終編譯出來其實就只這個handler，設置immediate:true代表如果在 wacth 里聲明了 firstName 之后，就會立即先去執行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會在綁定的時候就執行

修改后的代碼如下:

<div id="app"><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p> </div><script>var vm = new Vue({el: '#app',data: {firstName: 'Joy',lastName: 'lqy',fullName: ''},watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ' ' + this.lastName;},// 代表在wacth里聲明了firstName這個方法之后立即先去執行handler方法immediate: true}}}) </script>

deep屬性

deep,默認值為false,代表是否深度監聽，

總的來說,計算屬性傾向于格式化/處理當前的數據，而 watch 傾向于執行數據變化需要進行的操作

參考資料

[1] https://segmentfault.com/a/1190000016593017

[2] https://www.jianshu.com/p/6f433b39fb8a

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue修改计算属性的值_「Vue学习记录五」计算属性和侦听器的全部內容，希望文章能夠幫你解決所遇到的問題。

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