An in-depth chat about operating data and methods in vue

Vue is one of the most popular JavaScript frameworks in modern web development. Its use can greatly improve development efficiency and maintenance, and can greatly simplify some complex tasks. The core of Vue is data-driven, and data is managed by Vue. In Vue, there are two types of data, namely properties and reactive properties. A property refers to one or more values ​​in an object, and a reactive property refers to a property that can react immediately when it changes. All properties bound to its view. At the same time, Vue also provides many methods for operating data. These methods can easily handle complex data structures such as objects and arrays, making data maintenance more flexible and efficient.

1. Properties

A property in Vue is one or more values ​​in an object, for example:

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

In the above code, we can pass Visit vm.message to get Hello Vue!. In Vue, we can also get all the attribute values ​​​​in the instance through the $data method, for example ：

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

You also need to pay attention to some details when setting the attribute values ​​​​in the object. Vue does not allow direct modification of the attribute values ​​​​in the object. Instead, you need to use the methods provided by Vue itself, such as:

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

2. Responsive properties

Reactive properties (reactive properties) are properties that can immediately reflect changes to all views bound to it when the data changes. For responsive properties in Vue, you need to use the Vue.observable() method provided by Vue to pass the data to be tracked as a parameter, for example:

// 定义一个简单的响应式对象
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>
    `
  }
}

In the above example, when When we modify the message or count attribute in reactiveData, the changes will be immediately synchronized to the App component without using methods such as setState.

3. Data Binding

Data binding is a core feature in Vue. It can connect views and data through data binding, providing a more efficient and convenient development method. In Vue, data binding can be divided into three methods, namely interpolation, binding expression and binding HTML.

1. Interpolation

Interpolation is a simple and convenient way to insert variables into the DOM. Interpolation can insert data to be displayed in the DOM. The interpolation expression is placed between two sets of interpolation symbols {{ }}, for example:

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

When the value of the message attribute changes time, it will be updated accordingly in the DOM.

2. Binding expression

Binding expression can insert variables into DOM attributes. Binding expressions are performed using the directive v-bind, for example:

<img v-bind:src="image" />

In the above example, we bind a data located in the image attribute In the src attribute. When image changes, src will also be updated simultaneously.

3. Binding HTML

Binding HTML can insert HTML code into the DOM through the v-html instruction. This is a very powerful feature, but not very secure, as it can lead to cross-site scripting (XSS) attacks if you are not careful. In Vue, we can use the following code to filter user input:

<div v-html="$sanitize(html)"></div>

4. Methods

In Vue, some methods are provided to conveniently manipulate data, which are listed below Some commonly used methods:

1, $set and $delete

In Vue, directly modifying the properties of the object will not trigger an update of the view, so we need to use the $set method. Manually add new properties and trigger view updates. We can also use the $delete method to delete a property, for example:

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

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

2, $nextTick

Modify data in the Vue life hook function Finally, you have to wait until Vue renders and updates the DOM before you can perform the corresponding DOM operation. If you need to obtain some DOM information after Vue renders the DOM, you need to use $nextTick, for example:

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

  })
}

3, watch

watch can monitor a data and perform corresponding operations when it changes. , For example:

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

The above code listens to the message attribute, which can perform some operations when it changes.

Summary

This article introduces the data and methods in Vue. Properties and reactivity are the core parts of Vue, and data binding is another important part of Vue. It also lists Some common methods for manipulating data. As the times change, Vue continues to be updated and iterated. More and more developers choose to use Vue. I believe that Vue’s future will be better and better.

The above is the detailed content of An in-depth chat about operating data and methods in vue. For more information, please follow other related articles on the PHP Chinese website!