vue配置的这几种写法有什么区别?

vue配置这几种写法有什么区别?有点懵:

第1种:vue-cli 3.0 的main.js里面是这样写的:

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

第2种:网上一篇博客是这样写的

new Vue({
    el: '#app',
    router,
    axios,
    store,
    apolloProvider,
    template: '<App/>',
    components: { App }
});

第3种:vue-apollo里面是这样写的:https://akryum.github.io/vue-…

new Vue({
  el: '#app',
  provide: apolloProvider.provide(),
  render: h => h(App),
})

第4种:百度lavas的app.js中没有new Vue(),但有下面一段: 文档 https://github.com/lavas-proj…

export function createApp() {
    let router = createRouter();
    let store = createStore();
    let App = Vue.extend({
        router,
        store,
        ...AppComponent
    });
    return {App, router, store};
}



问题:

1、第1种和第3种写法里面有一句render: h => h(App),这个语句是什么意思?h是什么东西?
2、第2种写法里面有下面两句,表示什么意思?

template: '<App/>',
components: { App }

3、第2种写法里面有一句apolloProvider,,第3种写法里面有一句provide: apolloProvider.provide(),两个有什么区别?

4、第4种百度lavas的写法看不懂,请大神帮解释一下。

谢谢各位大神先!

回答:

  • 第1种和第3种写法里面有一句render: h => h(App),这个语句是什么意思?h是什么东西?

这是 ES6 中的新语法 箭头函数 等同于


function(h){
    return h(App);
}
  • 第2种写法里面有下面两句,表示什么意思?

使用自定义组件

  • 第2种写法里面有一句apolloProvider,,第3种写法里面有一句provide: apolloProvider.provide(),两个有什么区别?

第2种写法里面有一句apolloProvider 也是Es6的新语法 等同于


apolloProvider: apolloProvider,
  • 第4种百度lavas的写法看不懂,请大神帮解释一下。

// exprot 暴露createApp方法 用于 import
export function createApp() {
    let router = createRouter();
    let store = createStore();
    // 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 摘自Vue官方
    // https://cn.vuejs.org/v2/api/index.html#Vue-extend
    let App = Vue.extend({
        router,
        store,
        ...AppComponent // 还是Es6的语法 展开变量内容 见 1,
    });
    return {App, router, store};// Return 一个对象 有问题吗?
}

1,扩展运算符

未答到的均表无法解答

回答:

关于问题1 ,如果引用的是runtime版vue ,没有模板编译功能,所以不能使用模板,要使用渲染函数。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注