vue h函数,虚拟dom和diff算法

vue h函数,虚拟dom和diff算法

import { h, ref } from "vue"; import Test from "./components/Test.vue" export default { setup() { return {} }, render() { return h(Test, null, { // default 对应的是一1、h() 参数2、简单的使用3、实现一个计数器案例4、函数组件和插槽的使用三、jsx的使用1、jsx的认识2、下载Babel插件支持vue(现在貌似脚手架直接支持) 3

可以是字符串、数组或者是一个对象他是VNodes,使用h函数来进行创建使用import { h } from 'vue' export default { setup() { return () => h("h2", null, "vue h函数的使用与普通的组件函数的使用没有什么不同，只是它的参数稍有不同。它的参数只有一个，即渲染函数。渲染函数的第一个参数是渲染时传入的属性，其余参数则是vue实例的

“虚拟DOM”是我们对由Vue 组件树建立起来的整个VNode 树的称呼。二、使用文档：https://v3.cn.vuejs/guide/render-function.html#h-%E5%8F%82%E6%95%B事实上，我们在vue中写的template,最终也是经过渲染函数生成对应的Vnode 而h函数就是用来生成VNode的一个函数，他的全名叫做createVNode 简单使用参数他一共跟三个参数第一个参数

vue2中render 函数将自动接收h 函数(它是createElement 的常规别名) 作为参数render(h){ returnh('div',{ //第二个参数class:{ 'is-red':true } }, //第三个参数[h('p','这是在2.x 中，render 函数会自动接收h 函数(它是createElement 的传统别名) 作为参数：// Vue 2 渲染函数示例exportdefault{render(h){returnh('div')}} 3.x 语

h函数同样支持插槽，我们把HelloWorld组件改成一个插槽组件HelloWorld.vue import { ref } from 'vue'; const param = ref("Hello World")