Responsive depth principle Talking about Vue

Responsive depth principle

One of the most unique properties Vue, which is non-invasive response systems. Data model is just plain JavaScript objects. And when you modify them, the view will be updated. This makes the state administration is very simple and straightforward.

How to track changes

When we turn ordinary JavaScript objects passed in Vue instance as dataoptions, Vue will go through all of the properties of this object, and use Object.definePropertythese attributes all into getter/setter. Object.definePropertyES5 is a feature not shim, which is Vue does not support IE8 and earlier browsers reasons.

These getter/setterusers are not visible, but inside they let Vue able to track dependencies notice the change in the property is accessed and modified. It should be noted that different browsers print data objects in console getter/setterformat and different, it is recommended that you install vue-devtools to get the inspection data more user-friendly interface. Each instance corresponds to a component watcher instance, it the "contacting" through the attribute data recording process in dependence on the component rendering. When the item after the dependence setteris triggered, it will inform watcher, so that it re-render the associated components.

Notes detect changes

Due to the limitations of modern JavaScript (and Object.observehas been abandoned), Vue unable to detect the object properties to add or delete . Because of the property Vue will perform at initialization instance getter/setterconversion, so the property must dataexist on an object to make it into Vue response style. E.g:

var vm = new Vue({
    data: {
        a: 1
    }
})
//vm.a  是响应式的
vm.b = 2
//vm.b  是非响应式的

For instance has been created, Vue allowed to dynamically add the root level of responsive property. However, it may be used Vue.set(object, propertyName, value) a method of adding attributes to the nested object responsive. For example, for:

Vue.set(vm.someObject, 'b', 2)

We can also use vm.$setan instance method, which is also a global Vue.setalias method:

this.$set(this.someObject,'b', 2)

Sometimes we may need to assign a number of new properties for existing objects, such as using Object.assign()or _.extend(). However, this new property is added to the object will not be updated. In this case, we should create a new object with the object property to be mixed in with the original object.

//代替Object.assign(this.someObject, { a: 1, b: 2 })
this.$someObject = Object.assign({}, this.someObject, {a: 1, b: 2})

Statement responsive property

Since the Vue is not allowed to dynamically add the root-level responsive property, so we must initialize an instance before the root level responsive to declare all property, even if only a null value:

var vm = new Vue({ 
    data: { 
    // 声明 message 为一个空值字符串 
        message: '' 
    }, 
    template: '<div>{{ message }}</div>' }) 
    // 之后设置 `message` 
    vm.message = 'Hello!'

If we are not in dataa statement options message,
Vue will warn us render function is attempting to access nonexistent property. Such limitations are behind technical reasons, it eliminates a case where the type of boundary dependency tracking system, also better with Example Vue type inspection system work. At the same time code maintainability also has one very important point to consider: data objects like structural component states (schema). All statements in advance of the responsive property, allowing the component code easier to understand in the future to other developers to modify or read.