motor de plantillas
vue cómo analizar plantilla, instrucciones de cómo hacer frente a
problema:
Qué plantilla
rendir función de
función y vdom render
¿Qué es la plantilla
<div id='app'>
<div>
<input v-model="title"/>
<button v-on:click="add">submit</button>
</div>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
</div>
Se trata de una plantilla
Entonces, ¿qué plantilla es?
- La naturaleza es una cadena, la cadena está presente, al igual que html
- Lógica, como los jueces, estos ciclos, como el v-si, v-para y así sucesivamente, cómo va a ser lógico, no hay lógica antes de escribir html
- Y como formato html, pero hay una gran diferencia. En primer html sintaxis no es reconocido en el v-si, v-para estos. El segundo es estática html, ninguna lógica, VUE es dinámica, lógica. Son como el formato
- Pero al final todavía tiene que convertir html plantilla que se mostrará.
Entonces, ¿cómo lo hace?
Primera plantilla final debe ser convertido en código JS, debido a que:
- lógica plantilla, tenemos v-si, v-para. Debe ser implementado (lenguaje Turing completo) para uso js
- Para hacer que la plantilla en la página html, deben ser implementadas con el fin de utilizar js
Por lo tanto, la plantilla con el tiempo se convierte en una función js (render función, es decir, la función de representación)
En primer lugar, comprender la siguiente con
var obj = {
name: 'zhangsan',
age: 20,
getAddress: function(){
alert('beijing');
}
}
// 不用with
function fn(){
alert(obj.name);
alert(obj.age);
obj.getAddress();
}
fn();
// 使用width
function fn1(){
with(obj){
alert(name);
alert(age);
getAddress();
}
}
fn1();
En el desarrollo real, no trate de usar con.
fn es nuestro uso normal.
na1 con el uso de.
Dos es el mismo efecto, con el interior con, que no lo hacen propiedad de escritura, que es uniforme, con un abrigo.
La lectura puede no ser tan fuerte.
función de render
plantilla plantilla de función obtenida por Compile compilación de procesamiento.
Compilador puede compilar en análisis sintáctico, optimizar y generar tres etapas, en última instancia, implica necesariamente que ha función.
compilar el proceso de compilación en esta etapa puede no ser necesario para comprender plenamente, sólo se necesita comprender el proceso general puede ser resuelto.
ejemplo sencillo
Nos fijamos en algunos simple plantilla
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
price:100
}
})
</script>
</body>
</html>
Escoja la plantilla
<div id="app">
<p>{{price}}</p>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue-2.5.13.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
</div>
<script>
/**
* _c : 创建dom标签
* _v : 创建文本节点
* _s : toString
*/
var vm = new Vue({
el: '#app',
data: {
price: 100
}
})
// 这个模板最终生成的函数是下面这个
// 以下是手写的 render 函数
function render() {
with(this) { // this 就是 vm
return _c(
'div',
{
attrs: {'id': 'app'}
},
[
_c('p', [_v(_s(price))])
]
)
}
}
// 把函数翻译一下，也就是不用 with
function render1() {
return vm._c(
'div',
{
attrs: {'id': 'app'}
},
[
vm._c('p', [vm._v(vm._s(vm.price))])
]
)
}
</script>
</body>
</html>
Este es vm este caso, este _c es vm._c, dom utilizado para crear etiquetas.
El primer parámetro es un div.
El segundo parámetro es el objeto, que los objetos tienen atributos.
El tercer parámetro es una matriz, la matriz no es sólo un elemento, este _c ciertamente vm._c.
El primer parámetro _c es p, el segundo parámetro es una matriz, que es una matriz, _v (_s (precio)), y hay precio es sin duda vm.price, es data.price.
Luego, en frente de las _s es vm._s, es la función toString.
_v también vm._v, utilizado para crear el nodo de texto.
resumen:
Toda la información de plantilla está contenida en la función de render.
este 即 vm
precio 即 this.price 即 vm.price 即 data.price.
_c Eso this._c saber vm._c
Todo-lista de demostración una función render
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 模板 -->
<div id="app">
<input v-model='title'/>
<button v-on:click='add'>submit</button>
<ul v-for='item in list'>
{{item}}
</ul>
</div>
<!-- 源码 -->
<script src="./vue-2.6.10.js"></script>
<script>
var data = {
title: '',
list: []
}
// 初始化 vue 实例
var vm = new Vue({
el: '#app',
data: data,
methods: {
add: function(){
this.list.push(this.title);
this.title = ''
}
}
})
</script>
</body>
</html>
A continuación, a través de este ejemplo, vistazo a vue función de lo que era render, buscar la fuente code.render, luego imprimirlo.
Esto está por encima de la plantilla correspondiente función de procesamiento.
with(this) {
return _c('div', {
attrs: {
"id": "app"
}
},
[
_c('input', {
directives: [{ // 当title发生变化，会赋值给value，从而响应到input
name: "model",
rawName: "v-model",
value: (title),
expression: "title"
}],
domProps: {
"value": (title)
},
on: { // v-model相关 input 里面的数据改变，事件监听到，会赋值给 title
"input": function($event) {
if ($event.target.composing) return;
title = $event.target.value
}
}
}),
_v(" "),
_c('button', {
on: {
// 绑定 click 事件
"click": add
}
},
[_v("submit")]
),
_v(" "),
_l(
// v-for相关
(list),
function(item) {
return _c('ul', [_v("\n " + _s(item) + "\n ")])
}
)
], 2)
}
Esta es la demostración correspondiente a la función de render.
Al crear la entrada del segundo argumento no directivas. Llamado el comando, el nombre del comando es el modelo. valor es el título, que es vm.title.
Detrás _v ( ''), _ v representa la creación de nodos de texto, sobre todo de entrada y el botón de tener una envoltura, envoltura de no ser así, no habría _v para crear una nodos de texto vacíos.
_l devuelve una matriz de cambio de la lista de etiquetas li.
Ahora bien, según la lista de tareas-demostración de la función de render, revise la función Mezclar:
- v-modelo es la forma de lograr?
- v-On es la forma de lograr?
- v-para es cómo lograr?
Cómo hacer que la plantilla -Vue se representa como HTML
Lo anterior ha resuelto el problema de la "lógica" de la plantilla (v-para v-if)
Generar HTML plantilla restante de cuestiones
Además, lo que vm._c? render función devuelve qué?
Poner al día los conocimientos vdom
Aquí vm._c con snabbdom dentro h () es muy similar.
vm._c volvió vnode. A continuación, procesar función devuelve también vnode.
Se puede entender:
- hecho vm._c, equivalente a la snabbdom función h
- Después de ejecutar la función de render, que devuelve el vnode
Cómo vue plantilla se representa como HTML
vm._update(vnode) {
const prevVnode = vm._vnode;
vm._vnode = vnode;
if(!prevVnode){
vm.$el = vm._patch_(vm.$el, vnode); // 第一次没有值
} else {
vm.$el = vm._patch_(prevVnode, vnode); // 有值的情况
}
}
function updateComponent(){
// vm._render即上面的render函数，返回vnode
vm._update(vm._render())
}
función y hacer que vdom
- updateComponent el parche se implementa en vdom
- Primera página updateComponent ejecución de renderizado
- En cada modificación atributos de datos realizan updateComponent
Preguntas
¿Qué son las plantillas?
Plantilla: cuerda, lógica, variables ...... JS incrustados
Las plantillas deben ser convertidos en código JS (lógico, de representación HTML, las variables JS)
render ejecución de la función se devuelve vnode
updateComponent
- updateComponent el parche se implementa en vdom
- Primera página updateComponent ejecución de renderizado
- En cada modificación atributos de datos realizan updateComponent
Complementario: vue A lo largo del proceso de implementación sencillas instrucciones
- El primer paso: para rendir función de análisis de plantilla
- Paso dos: Responsive escucha inicio
- El tercer paso: la primera representación, mostrar la página y las dependencias de enlace
- Paso cuatro: datos de cambio de atributo, reRender gatillo
1. determinación para hacer que la función de plantilla
- su uso con
- Toda la información función de plantilla rendir están incluidos
- Plantilla utilizada en los datos de atributos, se han convertido en una variable JS
- Plantilla v-v-modelo para v-a se han convertido en las lógicas JS
- hacer que devuelve la función del vnode
2. Responsive escucha inicio
- Object.defineProperty
- Los datos sobre las propiedades del agente a vm
3. El tiempo de la primera representación, muestre la página y las dependencias de enlace
- representación inicial, updateComponent ejecución, vm._render ejecución ()
- Render ejecución de la función, accede a los datos en los datos de
- Será sensible a escuchar el método get
- updateComponent ejecución, el parche método vdom llegado
- El parche vnode rendido DOM, por primera vez se ha completado la representación
4. Datos atribuyen el cambio, lo que provocó reRender
- Modificar las propiedades, siendo sensible al conjunto monitorizado
- establecer el updateComponent ejecución
- updateComponent repetición vm._render ()
- Y el prevVnode vnode resultante, mediante la comparación de parche
- Prestar a la html