1.声明式地描述UI

好处:直接声明结果,无需关注过程 虚拟DOM比模板灵活,模板比虚拟DOM直观

1.前端页面涉及内容

1. DOM元素
2. 属性
3. 事件
4. 元素的层级机构

使用JavaScript对象描述UI更加灵活
使用JavaScript对象描述UI的方式,其实就是所谓的虚拟DOM
h函数就是一个辅助创建虚拟DOM的工具函数
vue会根据组件的render函数的返回值拿到虚拟DOM

2.初始渲染器

渲染器的作用就是把虚拟DOM渲染成真实DOM

渲染器的实现思路

1. 创建元素
2. 为元素添加属性和事件
3. 处理children

原理:使用我们熟悉的DOM操作API来完成渲染工作

3.组件的本质

组件就是一组DOM元素的封装,组件可以是函数也可以是对象

4.模板的工作原理

编译器的作用其实就是把模板编译为渲染函数,

<template>
  <div @click="handler">
  click me

</div>
</template>
  <script>
    export default{
      data() { },
      methods: {
        handler() {
        }
      },
    }
  </script>

export default {
  data() { },
  methods: {
    handler() {
    }
  },
  render() {
    return h('div',{onClick:handler},'click me')
  }
}

5.vue.js是各个模块组成的有机整体

组件的实现依赖于渲染器,模板的编译依赖于编译器,并且编译后生成的代码根据渲染器和虚拟DOM的设计决定的 编译器能识别出哪些是静态属性,哪些是动态属性,动态属性可以约定属性实现 编译器和渲染器存在信息交流,互相配合使得性能进一步提升,交流媒介就是虚拟DOM对象