vue2.0第2讲--虚拟DOM树、挂载、指令

vlambda
2022-05-09

vue2.0第2讲--虚拟DOM树、挂载、指令

虚拟DOM树

直接操作真实的DOM会引发严重的效率问题，vue使用虚拟DOM树（vnode）的方式来描述要渲染的内容。

vnode是一个普通的JS对象，用于描述上面有什么

如：

 var vnode = { tag: "h1", children: [ {tag: 1, text:"第一个vue应用：helloworld"} ] }

该DOM描述了一个标签名为h1的节点，有一个子节点为文本，内容为第一个vue应用：helloworld

vue模板写的并不是真实的DOM，它会被编译成虚拟的DOM，虚拟DOM树最终会生成真实DOM；整个过程称为渲染

vue2.0第2讲--虚拟DOM树、挂载、指令

然后，当data中的数据发生变化后，将引发重新渲染，vue会比较新旧两颗DOM tree，找出差异，然后仅把差异部分应用到真实的DOM tree 中

无论如何，达到最终的界面的过程中一定会生成一个vnode tree.

实际上，虚拟DOM的本质是调用了render函数(方法)，把模板编译成了render方法，达到重新渲染的效果

下面用render函数写数据看下渲染效果：

vue2.0第2讲--虚拟DOM树、挂载、指令

找寻顺序：

有render先找render

无render找template 编译成render

无template找outerHTML(el:) 编译成render

vue2.0第2讲--虚拟DOM树、挂载、指令

树形结构只有一个根节点，即虚拟节点树必须是单根的

vue2.0第2讲--虚拟DOM树、挂载、指令

挂载

简单来说：

通过el把真实的DOM树挂载到页面的某个区域

vue自称为渐进式的js框架

本质：将生成的真实的DOM树，放置到某个元素位置，称之为挂载

挂载的方式：

1.通过el: "css选择器"，进行挂载

id="app" el: "#app",

2.通过vue实例 .$mount("css选择器")进行配置

vue2.0第2讲--虚拟DOM树、挂载、指令

一个vue执行的完整流程

实例被创建

注入

首次渲染：1.编译生成的DOM树 2.挂载

已挂载

（若数据发生改变）

重新渲染：1.重新生成DOM树 2.对比差异 3.将差异应用到真实DOM中

已挂载

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>虚拟DOM</title></head><body> <div id="app"> <!-- <h1>第一个vue应用：{{title}}</h1> <p>作者：{{author}}</p> --> </div> <script type="text/javascript" ></script> <script type="text/javascript"> // 创建一个vue实例 var vm = new Vue({ // el: "#app", data: ({ title: "hello world !!", author: "dm", }), // render(h){ // console.log("render"); // return h("div",[ // h("h1",`第一个vue应用: ${this.title}`), // h("p",`作者： ${this.author}`), // ]) // }, template: ` <div id="app"> <h1>第一个vue应用：{{title}}</h1> <p>作者：{{author}}</p> </div> ` })</script></body></html>

vue结构

vue2.0第2讲--虚拟DOM树、挂载、指令

指令

v-bind

绑定属性、绑定的是动态表达式、作用是可以动态获取数据

vue2.0第2讲--虚拟DOM树、挂载、指令

v-for

循环数组，注意绑定的key值，key唯一且稳定

vue2.0第2讲--虚拟DOM树、挂载、指令

v-on

绑定事件；指定参数事件名

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>v-bind</title></head><body> <script type="text/javascript" src="vue.js"></script> <div id="app"> <!-- <img v-bind:src="image"> --> <!-- 语法糖 v-bind 可以简写 --> <img :src="image"> </div> <script type="text/javascript"> var vm = new Vue({ data:{ image: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" }, }); vm.$mount("#app");</script></body></html>