VUE的进阶理解之render函数

由于我是学的VUE，因此进行项目开发的时候肯定是组件化的，所以在理解render函数和组件之间的关系时，常常会表示不理解，我一开始也一样。以下是我对于render函数的一个学习过程。
1.render函数的参数请参照文档，不多说
createElement(
参数1：(string | object | function) 一个标签或组件选项或函数
参数2：(object) 一个对应属性的数据对象
参数3：(string | array) 子节点vnodes
)
2.子组件使用render函数后vue模板需要删除template部分内容，否则不会进行渲染。这就意味着，如果想要进行父子组件的挂载使用，那么子组件的.vue文件需要将template删除。
3.规定：所有的组件树中，如果VNnode是组件或含有组件的slot，那么VNode必须唯一
4.关于重复渲染子节点问题（解决上述问题）

• 定义一个子组件tem6，使用render渲染方法
• 导入父组件
• 在父组件的render函数中使用数组方法Array.applay(null,{length:5}).map(()=> retrun createElement(tem6))
• 如果只是重复一次：Array.apply(null,{length:1}).map(() => createElement(tem6))
• 但是值得注意的是，如果不是重复渲染的方式，那么就需要在外部先创建子节点，然后将子节点作为createElement的第三个参数，也能实现子组件的挂在

*以下三个问题可以统称为在render函数中书写JS代码
5.如何理解render函数中的v-if
给定一个判断条件，一般为父组件传递过来的值，在render函数中，使用if-elseif-else来判断返回的createElement的模板

if (this.show) {
          return createElement('p','the value of show is true')
    } else {
        return createElement('p','the value of show is false')
    }

6.如何理解render函数中的v-for
由父组件给定的数组或对象array，在render函数中创建一个节点数组nodes，循环遍历并对array的每一项返回一个createElement，最后将这个节点数组作为render函数的第三个参数即可

var nodes = []
    for (var i=0;i<this.list.length; i++) {
        nodes.push(createElement('p',this.list[i]))
    }
    retrun createElement('div',nodes)

7.如何理解render函数中的v-model
在返回的createElement中，给其子节点返回一个input节点，并给该节点添加domProps属性value，以及事件 input的on事件

var _this = this
    retrun createElement('div',[
        createElement('input',{
            domProps: {
                value: this.value
            },
            on: {
                input: function(event) {
                    _this.value = event.target.value
                })
            }
        }),
        createElement('p','value:' + this.value)
    ])

8.render函数和JSX的差异
JSX是一种看起来像HTML，但实际上是JS的语法扩展，他用更接近DOM结构的形式来描述了一个组件的UI和状态信息。render函数的每一个createElement层级对应一个标签，同时第二个参数给该标签添加样式、属性和事件 等，第三个参数确定其子节点。而JSX在在render函数中返回一个HTML，并将render需要设置属性、key、类、方法等添加至html的标签上，而子节点则防止标签内部，形成div中嵌套div的形式。
**以上代码块源自vue书中第9章，有兴趣的可以去复习下

第二次补充
1.组件的基本运行模式
一个组件分为数据和视图，数据更新的时候，视图也会自动更新。在视图中可以绑定一些事件，他们触发 methods里指定的方法，从而可以改变数据、更新视图。
2.什么是vuex
在组件开发的过程中，难免遭遇跨组件共享数据的需求，虽然有组件传值、中央事件bus，但是还是不够。因此vuex的设计就是用来统一管理组件的状态，它定义了一些列规范来使用和操作数据，使组件应用高效在数据的管理、维护和架构设计上显得更加高效优雅。
**三个注意点
*改变store中的数据的唯一途径就是显示的提交mutations
this.$store.commit{(}^{\prime }方法{名}^{\prime },数字/字符串/对象等)\ast 但是呢，mutation里尽量不要进行异步操作数据，因为commit后数据不会立即改变，因此会造成数据缺失，异步操作数据在actions中，action里提交mutation，并且可以异步操作业务逻辑\ast getters用于操作保存的数据的方法，相当于将所有需要对state数据进行加工的方法进行提取3.解释vuex如何通过状态管理对视图层的管理?vuex的state中保存数据count，视图层通过使用$store.state.count进行数据展示。而视图层通过按钮button，并绑定事件add，向actions发送dispatch方法，该方法在actions中定义，而该方法又通过commit方法最终向mutation发起请求，最后完成数据的修改。actions在其中充当中间层的作用，在异步加载数据的时候十分有用。