Vue.js學習使用心得（三）
阿新 • • 發佈：2018-12-07
一、計算屬性
計算屬性關鍵詞: computed
<body> <div id="app"> <p>原始字串: {{ message }}</p> <p>計算後反轉字串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: '糖果波!' }, computed: { // 計算屬性的 getter reversedMessage:function () { // `this` 指向 vm 例項 return this.message.split('').reverse().join('') } } }) </script>
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴快取，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行。
computed 屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：
下面例子通過getter獲取資料，通過setter設定資料。
<div id="app">
<p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'AAA',
description: 'BBBBBBBB'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.description
},
當setter生效時，原data屬性也會發生改變。
二、監聽屬性
Vue.js 監聽屬性 watch，可以通過 watch 來響應資料的變化。
下面例子通過點選事件監測點選次數。
<div id = "app"> <p style = "font-size:25px;">計數器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">點我</button> </div> <div id= "aa"></div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { document.getElementById("aa").innerHTML="<h3>計數器值的變化 :" + oval + " 變為 " + nval + "!</h3>"; }); </script>
由此可以監聽資料的變化，進行事件響應，並得到變化前的值和變化後的值。