Test in the project initialized by Vue-cli.
Use interpolation expressions
tester/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>tester</title>
</head>
<body>
<div id="app">
<div>{ {msg}}</div>
<div>{ {msgTestRender}}</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>
Page preview
main.js
import Vue from 'vue'
Vue.config.productionTip = false
new Vue ({
from: '#app',
data () {
return {
msg: 'hello world',
msgTestRender: 'hello world test render'
}
}
})
Do not use interpolation expressions, handwritten render
In our usual development work, render there are fewer scenes of handwritten methods, and more template templates are written , and the mounted method will be template compiled into a render method.
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue ({
from: '#app',
router,
components: { App },
template: '<App/>'
})
Page effect
main.js
import Vue from 'vue'
Vue.config.productionTip = false
new Vue ({
from: '#app',
render (createElement) {
return createElement('div', {
attrs: {
id: '#appTest'
}
}, this.msgTestRender)
},
data () {
return {
msg: 'hello world',
msgTestRender: 'hello world test render'
}
}
})
to sum up
Vue $mount is mounted through instance methods vm , and the $mount methods are defined in multiple files.
Because $mount the realization of this method is related to the platform and the construction method.
For example: The $mount method on the prototype is src/platform/web/runtime/index.js defined in. This design is for reuse, and it can be runtime only used directly by the version of Vue.
$mount To el have been restricted, Vue can not mount body, html such a root node, because the elements are mounted to replace the elements on the page, instead of inserting content, body, HTML these elements can not be replaced.
In Vue 2.0 version, the rendering of all Vue components ultimately requires render methods.
Whether we develop components in a single file .vue way, or write el or template attributes, they will eventually be converted into render methods.
This process is an "online compilation" process of Vue, which is compileToFunctions implemented by calling methods. Finally, call the $mount method on the prototype to mount.
If no render method is defined , the el or template string will be converted to a render method.
Vue's _render method is a private method of the instance, which createElement renders the instance into a virtual Node by executing the method.
The biggest upgrade of Vue 2.0 compared to Vue 1.0 is the use of Virtual DOM.
Render related definitions are in the source code src/core/instance/render.js.
reference:
https://ustbhuangyi.github.io/vue-analysis/v2/data-driven/render.html