一台云服务器可以做多个网站/网络营销价格策略有哪些
createApp
返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。
const app = createApp({})
你可以在 createApp 之后链式调用其它方法
参数
- 参数1：可以接收一个根组件对象，以vue项目为例
import App from "./App.vue";
const app = createApp(App);
- 参数2：接收根组件的
prop属性
const app = createApp(App,{name:'11'});//App.vueprops: {name: {type: String,},},created() {console.log("名称：", this.name);},
第二个参数基本用不到。
注： createApp除了在创建应用时使用（看自己项目的入口文件）接收第一个参数，更多的使用方式是下面这种：
//创建实例const app = createApp({render() {return h(MessageComponent, { messageType, title });},});
可以看一下我的另一篇文章：vue以API的方式加载组件
h
返回一个”虚拟节点“，通常缩写为 VNode：一个普通对象，其中包含向 Vue 描述它应在页面上渲染哪种节点的信息，包括所有子节点的描述。它的目的是用于手动编写的渲染函数
参数
接收三个参数：type，props 和 children
- type（String | Object | Function）：HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。
//html标签
render() {return h('h1', {}, 'Some title')
}//组件
render() {return h(MessageComponent, { messageType, title });
},//其他的没用过，不介绍
-
props（Object）：一个对象，与我们将在模板中使用的 attribute、prop 和事件相对应。可选。这个是单向的，只能往组件模板里传递
-
children（String | Array | Object）：子代 VNode，使用 h() 生成，或者使用字符串来获取“文本 VNode”，或带有插槽的对象。
h('div', {}, ['Some text comes first.',h('h1', 'A headline'),h(MyComponent, {someProp: 'foobar'})
])
渲染结果：
<div>Some text comes first.<h1>A headline</h1><my-component></my-component>
</div>
defineComponent
defineComponent 只返回传递给它的对象。但是，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持。
//组件选项的对象
import { defineComponent } from 'vue'const MyComponent = defineComponent({data() {return { count: 1 }},methods: {increment() {this.count++}}
})//setup 函数，函数名称将作为组件名称来使用
import { defineComponent, ref } from 'vue'const HelloWorld = defineComponent(function HelloWorld() {const count = ref(0)return { count }
})
defineAsyncComponent
创建一个只有在需要时才会加载的异步组件。
参数
对于基本用法，defineAsyncComponent 可以接受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调用。你也可以调用 reject(reason) 来表示加载失败。
import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() =>import('./components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)
当使用局部注册时，你也可以直接提供一个返回 Promise 的函数：
import { createApp, defineAsyncComponent } from 'vue'createApp({// ...components: {AsyncComponent: defineAsyncComponent(() =>import('./components/AsyncComponent.vue'))}
})
高阶用法参考官方文档
nextTick
将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。
2.x中就经常使用，不介绍
mergeProps
属性合并
将包含 VNode prop 的多个对象合并为一个单独的对象。其返回的是一个新创建的对象，而作为参数传递的对象则不会被修改。
可以传递不限数量的对象，后面参数的 property 优先。事件监听器被特殊处理，class 和 style 也是如此，这些 property 的值是被合并的而不是覆盖的。
useCssModule
- useCssModule 只能在 render 或 setup 函数中使用。
- 允许在 setup 的单文件组件函数中访问 CSS 模块
<script>
import { h, useCssModule } from 'vue'
export default {setup() {const style = useCssModule()return () =>h('div',{class: style.success},'Task complete!')}
}
</script>
<style module>
.success {color: #090;
}
</style>