vue2中的render函数

1.render函数是一个配置项，它的作用是指定渲染函数（组件的内容），这里采用箭头函数来简写，完整写法为

render:function(h){return h(App)}

上面的h是形参，在执行render时会自动传入实参

 // 上面的写法和下面的写法一致
  // App就是app.vue这个根组件 
  // h(App)等同于template 里面的App就是整个组件的内容
  render:function(h){return h(App)}
  // render: h => h(App),

 render:function(h){
    // h(App)返回一个虚拟dom
    const rs=h(App)
    console.dir(rs);
    return rs
  }

 结果

下面两种写法等价：new Vue({}).$mount("#app")<===>new Vue({el:"#app"}) 

2.$mount的作用是把前面产生的vue实例挂载到一个id名为#app的dom元素上，本项目里，这个dom就是public/index.html中的#app  

为什么是public/index.html中的#app  

我们打包的时候，有个插件html-webpack-plugin的功能就是：把我们自己写的HTML文件复制到指定的出口目录（public/index.html）下，并引入相关的资源代码

 渲染函数结合数据生成虚拟dom树

步骤：1.把template模板编译解析成ast（抽象语法树）

2.把抽象语法树编译成渲染函数render(function)

3.每当数据项变化，就把数据项代入渲染函数生成虚拟Dom

4.比较数据变化前后的虚拟dom来得到真实的Dom

 关键字

模板：vue模板基于纯HTML（template标签下的内容，el中指定的内容）

渲染函数：用来生成虚拟dom的。vue推荐使用模板构建页面，在底层中vue会将模板编译成渲染函数，当然也可以不写模板，直接写渲染函数

方法一：vue通过你提供的template来自动生成

方法二：直接指定render配置项

真实dom的创建和遍历 找出所有的属性

 

虚拟dom的好处1：就是使用js的object（对象）模拟真实的dom，当状态(data)发生变化,更新之前做diff（对比新旧虚拟dom），达到减少dom操作的效果

 

 有些dom和浏览器联系紧密相关，使用时要JavaScript和浏览器同时工作，会消耗更多性能，而操作js对象和浏览器无关，操作起来速度更快一些

虚拟dom和真实dom举例

古代打仗的沙盘，在沙盘上排兵布阵---虚拟dom，而真实的战场上的布阵方式就是真实的dom

虚拟dom的好处2：可以跨平台使用(vue是否可以在没有浏览器的环境中运行)比如node,安卓程序