调用createApp(/packages/runtime-dom/src/index.ts),传入配置对象rootComponent = {setup: ...},通过调用renderer的createApp方法构建app实例的方法和属性,得到app实例,并对app实例的mount方法进行重写。此时界面还未做任何处理,也就是图3的样子。 app实例通过调用mount
import{ createAppAPI,CreateAppFunction}from'./apiCreateApp' 代码如下 exportfunctioncreateAppAPI<HostElement>(render:RootRenderFunction<HostElement>, hydrate?:RootHydrateFunction):CreateAppFunction<HostElement> {returnfunctioncreateApp(rootComponent, rootProps =null) {if(!isFunction(rootComponent)) { roo...
在Vue3 中,createApp()是一个全局函数,用于创建一个新的 Vue 应用实例。 createApp()是 Vue 应用的起点,所有组件、插件、路由等都需要通过这个实例进行注册和配置。 通过createApp(),你可以轻松地创建、配置和管理 Vue 应用,并将其挂载到页面的 DOM 元素上。 与Vue2 中的new Vue()不同,Vue3 引入了create...
{{name}}Vue.createApp({setup(){constname=Vue.ref('张三');return{name}}}).mount("#app") 从上面我们可以看出实例的type值就是一个包含setup函数、template的对象,从而获取到isStateful为4对应STATEFUL_COMPONENT。从而执行setupStatefulComponent函数中setup获取结果。setupStatefulComponent函数主要做四件事:`创建...
setup是Vue3.0后推出的语法糖,并且在Vue3.2版本进行了大更新,像写普通JS一样写vue组件,对于开发者更加友好了;按需引入computed、watch、directive等选项,一个业务逻辑可以集中编写在一起,让代码更加简洁便于浏览。 1. 1. 基本用法 只需在里添加一个setup属性,编译时会把里的代码编译成一个setup函数 console.log(...
import{h}from'vue'exportdefault{name:'App',// 此处只是测试setup暂时不考虑响应式的问题。setup(){// 数据letname='lqj';letage=20;// 方法functionsayhello(){alert(`我叫${name},我${age}岁了,你好啊`)}// 返回一个对象(常用)return{name,age,sayhello}}} 显示返回函数(渲染函数...
setup() { return () => h('div', [h('h2', '我是子组件')]) } } // 挂载 createApp(App).mount(document.getElementById('app')) 代码实现(结合流程图看代码注释) import { effect } from './reactive' let uid = 0 /** * 1. 创建 context,用来承载一些全局的配置、全局注册的指令、组件...
2.创建一个新的Vue app 以前我们会用new Vue()去创建应用,现在我们引入createApp方法去创建。 我们会调用createApp方法,然后把我们定义的Vue实例对象作为参数传入,之后createApp方法会返回一个app对象。 下一步,我们会调用app对象的mount方法,把我们css选择器的元素传进去,这个就像我们之前的vue2的$mount方法一样 ...
1.拉开序幕的setup 注意点1: 问题:setup函数返回值中若返回一个渲染函数,如何理解? 答案:举例说明,比如App.vue中定义h1标签,通过渲染函数就能直接把标签体的值修改为渲染函数设置的值。其中h函数就是渲染函数,这个在vue2中创建vue实例也有用到h渲染函数。 一个人的信息setup(){ //返回一个函数(渲染函数) retu...
然后,我们使用setup()函数来定义组件的逻辑代码,并将数据对象中的message属性和handleClick()方法作为模板数据返回。最后,我们使用createApp()函数创建Vue3实例,并将app对象作为参数传递给createApp()函数进行挂载。 总结 总的来说,Vue2和Vue3的底层原理都是基于响应式数据绑定和虚拟DOM技术实现的。Vue3相对于Vue2...