var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } }， // 在組件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
computed 和 methods 的區別？
1、相同點
- 如果作為模板的數據顯示，二者能實現響應的功能，唯一不同的是methods定義的方法需要執行
2、不同點
- computed 會基於響應數據緩存，methods不會緩存
- diff之前先看data里的數據是否發生變化，如果沒有變化computed的方法不會執行，但methods里的方法會執行
我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味着只要 message 還沒有發生改變，多次訪問 reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。
這也同樣意味着下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：
computed: { now: function () { return Date.now() } }
watch
Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。當你有一些數據需要隨着其它數據變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回調。細想一下這個例子：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
偵聽器
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- 因為 AJAX 庫和通用工具的生態已經相當豐富，Vue 核心代碼沒有重復 --> <!-- 提供這些功能以保持精簡。這也可以讓你自由選擇自己更熟悉的工具。 --> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> <script> var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 `question` 發生改變，這個函數就會運行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.debouncedGetAnswer() } }, created: function () { // `_.debounce` 是一個通過 Lodash 限制操作頻率的函數。 // 在這個例子中，我們希望限制訪問 yesno.wtf/api 的頻率 // AJAX 請求直到用戶輸入完畢才會發出。想要了解更多關於 // `_.debounce` 函數 (及其近親 `_.throttle`) 的知識， // 請參考：https://lodash.com/docs#debounce this.debouncedGetAnswer = _.debounce(this.getAnswer, 500) }, methods: { getAnswer: function () { if (this.question.indexOf('?') === -1) { this.answer = 'Questions usually contain a question mark. ;-)' return } this.answer = 'Thinking...' var vm = this axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) } } }) </script>
watch和computed的區別
computed：計算屬性
1計算屬性是由data中的已知值，得到的一個新值。
2這個新值只會根據已知值的變化而變化，其他不相關的數據的變化不會影響該新值。
3計算屬性不在data中，計算屬性新值的相關已知值在data中。
4別人變化影響我自己。
watch：監聽數據的變化
1監聽data中數據的變化
2監聽的數據就是data中的已知值
3我的變化影響別人
little-demo：演示watch和computed的區別
<div id="app">
<input type="text" v-model="name" />
<span v-show="isShow">請輸入3-6個字符</span>
<br />
<input type="text" v-model="todoName" />
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "zs",
todoName: "ls"
},
computed: {
isShow() {
//當this.name的長度小於3或者大於6時顯示提示內容(我根據name的變化而變化)
if (this.name.length >= 3 && this.name.length <= 6) {
return false;
} else {
return true;
}
}
},
watch: {
//監聽data中的name,如果發生了變化,就把變化的值給data中的todoName(我影響了別人)
name(newVal) {
this.todoName = newVal;
}
}
});
</script>