网络编程
位置:首页>> 网络编程>> JavaScript>> Vue Render函数原理及代码实例解析

Vue Render函数原理及代码实例解析

作者:viewts  发布时间:2023-07-02 16:34:38 

标签:Vue,Render,函数

简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM

因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。

当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h

虽然在render里使用createElement函数创建DOM节点不是很直观,但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下:


<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id="app">
   <my-component :list="list"></my-component>
 </div>
 <script src="vue.js"></script>
 <script>
   Vue.component('my-component', {
     props: {
       list: {
         type: Array,
         default: () => []
       }
     },
     render(createElement) {
       if (this.list.length) {
         return createElement('ul', this.list.map(item => createElement('li', item)))
       } else {
         return createElement('p', 'Empty list')
       }
     }
   })
   new Vue({
     el: '#app',
     data: {
       list: ['html', 'css', 'javascript']
     }
   })
 </script>
</body>
</html>

另外,由于v-if,v-else,v-show等指令都无法在render里使用,需要自己手动实现,拿常用的v-model举个栗子:


Vue.component('my-component', {
 data() {
   return {
     message: ''
   }
 },
 render(createElement) {
   return createElement(
     'div',
     [
       createElement(
         'input',
         {
           on: {
             input: e => this.message = e.target.value
           }
         }
       ),
       createElement('p', this.message)
     ]
   )
 }
})

来源:https://www.cnblogs.com/viewts/p/11208452.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com