vue中render使用及extend和$mount_vue.extend render-优快云博客

本文链接：https://blog.youkuaiyun.com/monthover/article/details/105327443

vue全局组件
在vue中全局组件通常是一下方法：

import Vue from "vue"
Vue.component({
   template:'',
   data:{},
   props:{}，
   methods:{},
   computed(){}
})

extend和$mount组件挂载

如果组件需要挂载，比如全局弹框，就需要extend和$mount
在跟文件html中创建一个标签

<body>
  <noscript></noscript>
  <div id="app"></div>
  <div id="modal"></div>
</body>

创建一个挂载组件

const Demo=Vue.extend({
   template:"<h1>{{message}}</h1>",
   data(){
      return {
         message:'demo'
      }
   }
})

new Demo().$mount("#modal")

在vue.config.js中设置

module.exports={
  runtimeCompiler:true
}

在项目里面通过事件调用弹框的话，可以封装成函数方便调用，如下：

const Demo=Vue.extend({
   template:"<div id="show-modal">{{message}}</div>",
   data(){
      return {
         message:'demo'
      }
   }
})

export default function Notify(message){
   new Demo().$mount("#modal")
}

给组件设置一个定位到需要弹出位置、animate动画效果。
以上挂载组件进行打包压缩的时候会多个几kb，不利于优化，可以通过render进行优化，这样在vue.config.js中设置无论是true或者false都不会影响组件大小性能。

const Demo=Vue.extend({
   //template:"<div id="show-modal">{{message}}</div>",
   render(){
      return {
         <div id="show-modal">{{message}}</div>
      }
   },
   data(){
      return {
         message:'demo'
      }
   }
})

export default function Notify(message){
   new Demo().$mount("#modal")
}