《Vue.js设计与实现》-框架设计概览-Vue.js3的设计思路

声明式地描述 UI

Vue.js采用模板的方式来描述UI,但它同样支持使用虚拟DOM来描述UI。虚拟DOM要比模板更加灵活,但模板要比虚拟DOM更加直观。
import { h } from "vue";
export default {
  render() {
    return h("h1", { onClick: handler }); //虚拟DOM
  },
};

h 函数的作用是让我们编写虚拟 DOM 变得更加轻松

初识渲染器

虚拟 DOM 是一个用来描述真实 DOM 的 javascript 对象,渲染器则是把虚拟 DOM 渲染为真实 DOM 的工具;

渲染器 renderer 有两个参数,一个是 vnode(虚拟 DOM 对象),一个是 container(真实 DOM 元素,作为挂载点)

renderer(vnode,document.body)

组件的本质

组件并不是真实的 DOM,而是一组 DOM 元素的封装,虚拟 DOM 也可以描述组件;

Vue.js中的有状态的组件就是使用对象结构来表达的。

模板的工作原理

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

.vue 文件中<template>就是将要编译的模板内容,在打包程序编译以后,会将模板内容编译成渲染函数并添加到<script>标签块的组件对象上;

.vue 文件最终在浏览器中运行的代码是下面这样的:

export default {
  data() {
    /**/
  },
  methods: {
    handles: () => {
      /**/
    },
  },
  render() {
    return h("div", { onClick: handler }, "click me");
  },
};

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

组件的实现依赖于渲染器,模板的编译依赖于编译器,并且编译后生成的代码时根据渲染器和虚拟DOM的设计决定的,因此Vue.js的各个模块之间是互相关联、互相制约的,共同构成一个有机整体。

渲染器需要去寻找更新变化的内容,而每次更新一点内容都需要在整个虚拟 DOM 对象中去寻找更新点,这样对渲染器的压力比较大,所以编译器在编译的阶段需要标记哪些字段是动态的,哪些是静态的,这样渲染的时候就能高效找到更新点;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值