Vue給對象添加屬性

一、Vue中添加數據屬性

//定義一個Vue實例
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

//通過this獲取到Vue實例上的data屬性
console.log(vm.msg)//'Hello Vue!'

//通過Vue.set方法添加屬性
Vue.set(vm, 'newMsg', 'Hi, this is new message!')

//訪問新添加的屬性
console.log(vm.newMsg)//'Hi, this is new message!'

在Vue中，我們可以通過聲明式的方式來定義數據屬性。但是，如果我們需要動態地添加屬性，這時候就必須要用到Vue.set方法。Vue.set方法可以向對象或者數組中添加新的屬性或者元素，並且在添加完成之後更新視圖。

使用Vue.set方法添加屬性時，必須指定對象、屬性名和屬性值三個參數。在添加屬性後，可以通過this關鍵字或者Vue實例訪問新添加的屬性。

二、Vue中添加計算屬性

//定義一個Vue實例
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  },
  computed: {
    reversedMsg: function(){
      return this.msg.split('').reverse().join('')
    }
  }
})

//通過this獲取到Vue實例上的computed屬性
console.log(vm.reversedMsg)//'!euV olleH'

//通過Vue.set方法添加屬性
Vue.set(vm, 'newMsg', 'Hi, this is new message!')

//訪問新添加的計算屬性
console.log(vm.reversedNewMsg)//'!egassem wen si siH'

在Vue中，計算屬性可以看作是已經存在了的屬性，但是它並不保存在data屬性中，而是一個通過函數計算得出的動態屬性。

我們可以使用computed選項來聲明一個計算屬性。在定義計算屬性時，我們需要提供一個函數。這個函數的返回值即為計算屬性的值。

添加計算屬性使用和添加數據屬性類似，同樣可以使用Vue.set方法來動態添加計算屬性。在添加計算屬性後，就可以像訪問普通屬性一樣訪問新添加的計算屬性。

三、Vue中添加方法

//定義一個Vue實例
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  },
  methods: {
    reverseMsg: function(){
      return this.msg.split('').reverse().join('')
    }
  }
})

//調用Vue實例上的方法
console.log(vm.reverseMsg())//'!euV olleH'

在Vue中，我們可以通過methods選項來添加方法。

添加方法時，我們需要提供一個函數，這個函數可以訪問Vue實例上的所有數據屬性和方法。添加方法後，我們就可以在Vue實例上調用新添加的方法了。

四、Vue中添加Watcher

//定義一個Vue實例
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  },
  watch: {
    msg: function(newVal, oldVal){
      console.log('msg變化了，新的值為：' + newVal)
    }
  }
})

//修改msg屬性的值
vm.msg = 'Hi, Vue!'

//'msg變化了，新的值為：Hi, Vue!'

在Vue中，watcher可以用來監聽數據屬性或計算屬性的變化，並且在變化後執行一些操作。

使用watch選項可以添加新的watcher。添加watcher時需要提供一個函數，這個函數會在watcher所監聽的數據發生變化時被調用。在函數中可以通過參數獲取到新值和舊值。

添加Watcher後，如果所監聽的數據屬性或計算屬性發生變化，就會觸發watcher的函數。

五、Vue中動態添加私有屬性

//定義一個Vue實例
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

//動態添加私有屬性
vm._privateMsg = 'This is a private message'

//訪問私有屬性
console.log(vm._privateMsg)//'This is a private message'

在Vue中，我們可以動態地向Vue實例添加私有屬性。這些屬性不會影響到視圖的渲染，並且其他組件無法訪問到這些屬性。

要添加私有屬性，需要在Vue實例上添加下劃線前綴，例如：_privateMsg。添加完後，就可以通過this關鍵字或者Vue實例訪問新添加的私有屬性。

總結

VUE是一個非常優秀的數據驅動的前端框架，Vue給對象添加屬性是非常靈活的，我們可以通過Vue.set方法、computed選項、methods選項、watch選項、動態添加私有屬性來動態地向Vue實例添加屬性和方法。

掌握這些技巧可以大大提高我們在使用Vue框架時的靈活性和開發效率。