1. When we click the button, whether the member dynamically added to data is responsive data, if not, what is its internal principle if the new member is set as responsive data.
let vm = new Vue({
el: '#el'
data: {
o: 'object',
dog: {}
},
method: {
clickHandler () {
// 该 name 属性是否是响应式的
this.dog.name = 'Trump'
}
}
})
First of all, the name attribute is not responsive data.
1. Because vue2.x internally uses the getter and setter methods of Object.defineProperty() for data monitoring, but the new property name does not have getter and setter methods, so the data is not responsive.
If you want to set it to responsive, it is more easy
Method 1: Reserve a pit position similar to the following code:
let vm = new Vue({
el: '#el'
data: {
o: 'object',
dog: {
name:''
}
},
method: {
clickHandler () {
// 该 name 属性是否是响应式的
this.dog.name = 'Trump'
}
}
})
Reason: The property that already exists at the time of initialization will be monitored by the Object.defineProperty() method in Vue, so the property has getter and setter methods, so the data is responsive
Method 2:
Vue official website gives a solution to the idea. Calling Vue.set() can realize the data response.
Calling method: Vue.set( target, key, value)
- target: The data source to be changed (can be an object or an array)
- key: the specific data to be changed
- value: the re-assigned value
let vm = new Vue({
el: '#app',
data: {
msg: 'object',
dog: {}
},
method: {
clickHandler() {
// 该 name 属性是否是响应式的
this.$set(this.data.dog, name, 'Trump')
}
}
})
2. Please briefly describe the execution process of the Diff algorithm
-
The process of diff is to call a function named patch, compare the old and new nodes, and patch the real DOM while comparing.
-
When using the diff algorithm to compare new and old nodes, the comparison will only be performed at the same level, and will not be compared across levels.
-
When the data changes, the set method will call Dep.notify to notify all subscribers Watcher, and the subscribers will call patch to patch the real DOM
Description:
The patch function receives two parameters oldVnode and Vnode, which represent the new node and the previous old node respectively. This patch function compares whether oldVnode and vnode are the same, that is, the function sameVnode(oldVnode, vnode). According to the return result of this function, it is divided into the following two cases
- true: execute patchVnode
- false: replace oldVnode with vnode
What the patchVnode function does
1. Find the corresponding real dom, called el
2. Determine whether vnode and oldVnode point to the same object.
If it is, then directly return (end).
3. Determine that they have text nodes and are not equal, then set the text node of el to the text node of vnode.
4. Determine that oldVnode has child nodes but vnode does not, then delete the child nodes of el.
5. Judge that oldVnode has no child nodes but vnode has, then add the child nodes of vnode to el after realizing
6. Judge that both have child nodes, execute updateChildren function to compare child nodes.
Implementation principle of hash and history routing modes commonly used in vue-router
- hash: The hash (anchor) mode of routing actually makes use of the window to monitor the onhashchange event, which means that if the hash value in your url (the value behind #) changes, the front end can monitor and do it Some responses (do something), so that even if the front end does not initiate an http request, the code block of the corresponding page can be found and loaded on demand
- Hash can be read through window.location.hash
- History mode: It uses pushState||replaceState (+server) and popState events to monitor state changes
-
pushState: The browser does not request data from the server, and directly changes the url address, which can be similarly understood as a disguised version of the hash; but unlike the hash, the browser will record the history of pushState, and you can use the browser's forward and backward function
-
replaceState: Unlike pushState, replaceState only modifies the corresponding history