computed

computed 是計(jì)算屬性，它會(huì)根據(jù)你所依賴的數(shù)據(jù)動(dòng)態(tài)顯示新的計(jì)算結(jié)果

計(jì)算屬性將被加入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue 實(shí)例

通過計(jì)算出來的屬性不需要調(diào)用直接可以在 DOM 里使用

基礎(chǔ)例子

var vm = new Vue({el: '#app',data: {message: 'hello'},template: `<div><p>我是原始值: "{{ message }}"</p><p>我是計(jì)算屬性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要調(diào)用</div>`,computed: {// 計(jì)算屬性的 gettercomputedMessage: function () {// `this` 指向 vm 實(shí)例return this.message.split('').reverse().join('')}} })

結(jié)果：

我是原始值: "Hello"
我是計(jì)算屬性的值: "olleH"

如果不使用計(jì)算屬性，那么 message.split('').reverse().join('') 就會(huì)直接寫到 template 里，那么在模版中放入太多聲明式的邏輯會(huì)讓模板本身過重，尤其當(dāng)在頁面中使用大量復(fù)雜的邏輯表達(dá)式處理數(shù)據(jù)時(shí)，會(huì)對頁面的可維護(hù)性造成很大的影響

而且計(jì)算屬性如果依賴不變的話，它就會(huì)變成緩存，computed 的值就不會(huì)重新計(jì)算

所以，如果數(shù)據(jù)要通過復(fù)雜邏輯來得出結(jié)果，那么就推薦使用計(jì)算屬性

watch

一個(gè)對象，鍵是 data 對應(yīng)的數(shù)據(jù)，值是對應(yīng)的回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對象，當(dāng) data 的數(shù)據(jù)發(fā)生變化時(shí)，就會(huì)發(fā)生一個(gè)回調(diào)，他有兩個(gè)參數(shù)，一個(gè) val （修改后的 data 數(shù)據(jù)），一個(gè) oldVal（原來的 data 數(shù)據(jù)）
Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用$watch()，遍歷 watch 對象的每一個(gè)屬性

基礎(chǔ)例子

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:{handler: function (val, oldVal) { console.log("obj 變了")},deep: true // 該屬性設(shè)定在任何被偵聽的對象的 property 改變時(shí)都要執(zhí)行 handler 的回調(diào)，不論其被嵌套多深},"obj.a":{handler: function (val, oldVal) { console.log("obj.a 變了")},immediate: true // 該屬性設(shè)定該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用}} }).$mount("#app");

注意：不應(yīng)該使用箭頭函數(shù)來定義 watcher 函數(shù)，因?yàn)榧^函數(shù)沒有 this，它的 this 會(huì)繼承它的父級函數(shù)，但是它的父級函數(shù)是 window，導(dǎo)致箭頭函數(shù)的 this 指向 window，而不是 Vue 實(shí)例

• deep 控制是否要看這個(gè)對象里面的屬性變化
• immediate 控制是否在第一次渲染是執(zhí)行這個(gè)函數(shù)

vm.$watch() 的用法和 watch 回調(diào)類似

• vm.$watch('data屬性名', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){console.log("n 變了"); },{deep: true, immediate: true})

總結(jié)

• 如果一個(gè)數(shù)據(jù)需要經(jīng)過復(fù)雜計(jì)算就用 computed
• 如果一個(gè)數(shù)據(jù)需要被監(jiān)聽并且對數(shù)據(jù)做一些操作就用 watch

總結(jié)

以上是生活随笔為你收集整理的vue watch 修改滚动条_Vue 里的 computed 和 watch 的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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