深入聊聊vue中操作資料和方法

Vue是現代Web開發中最受歡迎的JavaScript框架之一，它的使用可以很大程度上提高開發效率及維護性，並且可以極大的簡化一些複雜的任務。 Vue的核心是資料驅動，而資料又是由Vue所管理。在Vue中，資料有兩種，分別是屬性（property）和響應式屬性（reactive property），屬性是指物件中的一個或多個值，而響應式屬性是指一個能夠在變化時立即反應到所有綁定於它的視圖上的屬性。同時，Vue也提供了許多操作資料的方法，這些方法可以方便的處理對象、數組等複雜資料結構，進而使得資料的維護更加靈活和有效率。

一、屬性

Vue中的屬性（property）是一個物件中的一個或多個值，例如：

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
})

上述的程式碼中，我們可以透過存取vm.message來取得到Hello Vue!，在Vue中我們也可以透過$data方法來取得該實例中所有的屬性值，例如：

console.log(vm.$data) // 输出 {message: "Hello Vue!"}

設定物件中的屬性值也需要注意一些細節，Vue不允許直接對物件中的屬性值進行修改，而是需要使用Vue自己提供的方法，例如：

vm.message = 'Hello World!' // 不会修改message的值
vm.$set(vm.obj, 'newProp', 123) // 增加一个名为newProp的属性并设置值为123
vm.$delete(vm.obj, 'propToDelete') // 删除一个名为propToDelete的属性

二、響應式屬性

響應式屬性（reactive property）是一種能夠在資料變更時立即將變化反應到所有綁定於它的視圖上的屬性。 Vue中的響應式屬性，需要使用Vue提供的Vue.observable()方法，將要追蹤的資料作為參數傳遞進去，例如：

// 定义一个简单的响应式对象
var reactiveData = Vue.observable({
  message: 'Hello Vue!',
  count: 0
})

// 修改响应式对象中的值
reactiveData.message = 'Hello World!'
reactiveData.count++

// 在函数组件中使用reactiveData
var App = {
  render() {
    return `
      <div>
        <p>${reactiveData.message}</p>
        <p>${reactiveData.count}</p>
      </div>
    `
  }
}

在上述的例子中，當當我們修改reactiveData中的message或count屬性時，變化會立刻同步到App元件中，不需要使用諸如setState之類的方法。

三、資料綁定

資料綁定是Vue中的一個核心特性，可以透過資料綁定將視圖與資料建立起聯繫，提供更有效率、方便的開發方式。在Vue中，資料綁定可以分為三種方式，分別是內插法、綁定表達式和綁定HTML。

1、插值

插值是一種簡單、方便的方式，它可以將變數插入DOM。插值可以在DOM中插入要顯示的數據，插值表達式放在兩組插值符號{{ }}之間，例如：

<div>{{ message }}</div>

當message屬性的值發生變化的時候，它在DOM中就會被對應的更新。

2、綁定表達式

綁定表達式可以在DOM的屬性中插入變數。綁定表達式使用指令v-bind來進行，例如：

<img  src="/static/imghwm/default1.png" data-src="image" class="lazy" alt="深入聊聊vue中操作資料和方法" >

在上述的例子中，我們綁定了一個位於image屬性中的數據在src屬性中。當image改變時，src也會同步更新。

3、綁定HTML

綁定HTML可以透過v-html指令將HTML程式碼插入DOM。這是一個很強大的特性，但不太安全，因為不小心也可能導致跨站腳本攻擊（XSS）。在Vue中，我們可以使用以下程式碼對使用者的輸入進行過濾：

<div></div>

四、方法

在Vue中，提供了一些方法可以便捷地操作數據，下面列出了一些常用的方法：

1、$set 和$delete

在Vue中，直接修改物件的屬性是不會觸發視圖的更新的，因此我們需要使用$set方法來手動地新增屬性並觸發視圖的更新，同樣我們可以使用$delete方法來刪除一個屬性，例如：

vm = new Vue({
  data: {
    a: 1
  }
})

// `vm.a` 是响应式的
vm.$set(vm, 'b', 2) // 该值是响应式的
vm.$delete(vm, 'a') // `vm.a` 不再是响应式的

2、$nextTick

#在Vue 生命鉤子函數中修改數據之後，要等到Vue渲染更新DOM後才能執行對應的DOM操作。如果需要在Vue渲染DOM後取得某些DOM訊息，就需要使用$nextTick，例如：

mounted() {
  this.$nextTick(() => {
    // DOM 渲染完之后执行的代码

  })
}

3、watch

watch可以監聽一個數據，在它改變時執行對應操作，例如：

data () {
  return {
    message: ''
  }
},
watch: {
  message (newVal, oldVal) {
    console.log(`new message is ${newVal}`)
    console.log(`old message is ${oldVal}`)
  }
}

以上程式碼監聽了message屬性，它在發生變化時可以執行一些操作。

總結

本文介紹了Vue中的資料和方法，其中屬性和回應式是Vue最核心的部分，而資料綁定則是Vue重要的另一部分，也列舉了一些操作資料的常用方法。隨著時代的變遷，Vue仍在繼續更新迭代，越來越多的開發者選擇使用Vue，相信Vue的未來會越來越美好。

以上是深入聊聊vue中操作資料和方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！