Vue学习06--虚拟节点

Vue学习06–虚拟节点

虚拟节点（virtual dom）

在Vue中没有真实的Dom节点，在代码中写的dom都是虚拟dom(VDom)
​

基本原理：
虚拟dom是一个普通对象，它是描述真实dom的js对象，它至少会包含tag属性(描述当前节点是一个什么元素)，VNodeData属性(描述当前节点有哪些属性)，VNodeChildren属性(描述当前节点有哪些子节点，特殊子节点为innerTest)
虚拟dom可以使用render方法的形参createElement方法来创建得到
​

优点：
虚拟DOM的更新不是直接操作dom

• 直接操作真实dom -> 找到dom(因为dom是一个tree，需要递归去查找节点)，进行innerText操作，渲染；
• 虚拟dom -> 更新虚拟dom JS对象，然后渲染；

如果存在1000条数据遍历渲染，一次给1000的state数据进行修改

• 真实dom：查找1000个节点，1000次赋值，1000次渲染；
• 虚拟dom会合并赋值和查找动作一次性赋值，(1000js对象查找，1000js赋值)，1次渲染；

​

​

下面先看一段代码（是main.js）

在main.js里需要对Vue进行实例化

// 需要引入Vue框架模块
import Vue from 'vue'
new Vue({
}).$mount('#app')

写到这里浏览器会报一个错
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.
Either pre-compile the templates into render functions, or use the compiler-included build.
是说 new Vue 的时候需要一个render方法
​

我们就给它写一个render方法

// 需要引入Vue框架模块
import Vue from 'vue'
new Vue({
  render(){
  }
}).$mount('#app')

写到这里还是会报一个错：
Expected to return a value in render function
是说我们的方法没有返回值，但我们目前也不知道render方法需要一个什么样的返回值，所以，在vs code里将我
们的鼠标放到render方法上去，拿到它的提示来分析。
​

render方法解析：
(method) ComponentOptions.render?(createElement: CreateElement): VNode
​

由 (method) ComponentOptions.render? 可知render是一个方法，它是组件的一个属性，其中？表示这个属性是new Vue是的非必要属性
由 : VNode 可知 render方法必须返回一个VNode(虚拟节点)
createElement: CreateElement 它是render方法的一个形参，是Vue创建虚拟节点的方法，不是document.createElement(创建的是真实节点)
​

所以我们接下来还要看一下这个createElement方法是如何来创建虚拟节点的;
​

createElement方法解析：
createElement(tag?: string | Component<any, any, any, any> | AsyncComponent, data?: VNodeData, children?: VNodeChildren): VNode
​

由 : VNode 可知 createElement方法执行完成以后会方法会得到一个VNode，它可以创建VNode
由 tag?: string | Component | AsyncComponent 可知 createelement方法需要的第一个参数是tag–标签，这个标签的数据类型：字符串(标签的名字)，组件，异步组件
data?: VNodeData 是虚拟节点的数据对象
children?: VNodeChildren 是虚拟节点的子节点，就是一堆的子节点
​

简而言之：createElement方法有两个参数
参数一：标签名，字符串的形式
参数二：标签的属性
​

需要注意的是：createElement只能有一个顶层节点，因为render方法只接收一个createElemenet参数
​

// 需要引入Vue框架模块
import Vue from 'vue'
// 引入组件
import App from './App.vue'

new Vue({
  render(ce){
    const vNode = ce('div', {
      style:'color:red; font-size:18px'
    }, [
      'hello world!',  // 当前VNode的内容是一个非常特殊的子节点
      ce('a', {
        href:'#',
        style:'color:tomato'
      }, [
        '我是一个超链接',
        ce(App),
        ce('span', {}, ['span这是'])
      ])
    ])
    // debugger
    return vNode
  }
}).$mount('#app')

​

注意：通过$mount挂载的节点会在页面渲染的时候，会被VNode替换掉
​

组件：这里简单理解为有着 .vue 后缀的文件即可，详细的介绍可看下一节内容。