vue页面初始化数据,vue data里面用data的数据
本文主要介绍了如何在vue中初始化数据data，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
如何初始化数据vue程序初始化过程初始化原因重写过程源代码过程实现初始化过程
如何初始化data数据
在后台管理系统中，在创建和编辑同一个页面时，经常需要初始化数据。
表单：{
id: 0，
名称： ，
地点： ，
号码： ，
admin_uid: ，
is_audit: 2，
联系人： ，
排序： ，
is_network: 2，
network_type: 1，
is _投影仪：2，
is_board: 2，
is_live: 2，
其他：“”
},
使用
这个。$data.form=this。$options.data()。形式
您可以初始化表单中的所有数据。
vue程序初始化流程
初始化
在vue3中，vue2的新vue()方法不再用于程序初始化，而是使用createApp。createApp中发生了什么？
改写的原因
CreateApp是Vue中的工厂函数，作为函数导入和调用。而函数式的优点是
1.取消了原本挂载在Vue上的静态方法，变成了实例方法，可以减少内存占用，方便摇树，减少封装体积；
2.因为函数和类装饰器很好的支持ts，所以通过函数调用可以更好的支持ts，提高类型支持。
3.根组件的api，比如数据，要保持与子组件相同的格式，挂载要从$mount改为mount，这样简化了api，统一了api的一致性。
4.安装在新Vue上的方法会造成全球污染，无法隔离。createApp可以相互独立，按需挂载。
流程实现
mount
const Vue={
createApp(选项){
//返回应用程序实例
返回{
安装(选择器){
//获取渲染函数并编译结果
//呈现dom并将其追加到宿主元素
}
编译(模板){
//返回渲染
返回函数render(){
//描述视图
}
}
}
}
}
调用createApp时，如果options中没有render，则初始化组件，调用compile生成一个render，如果有render，则直接挂载；
在Vue2中，比较替换附加元素，比较判断diff元素之间的差异，而在Vue3中，直接进行删除和重新添加。
您可以在设置或数据中定义响应变量，设置具有更高的优先级。
createApp
Vue公开的两个初始化函数createApp和createRenderer，以及它们之间的调用关系。
/* createApp*/暴露给Vue */
函数createApp(选项){
const renderer=vue . create renderer({
/*定义一些特定于平台的API，一些实例*/
aaa(){}，
bbb(){}
})
/*用户调用的createApp实际上是渲染器的create app */
返回renderer.createApp()
}
函数createRenderer({aaa，bbb}){
/*获取渲染器*/
/*此createApp在函数内部*/
返回createApp(选项){
/*安装逻辑*/
返回{
/*返回应用程序实例*/
}
}
}
源码流程
1.用户调用createApp method="通过ensureRenderer获取渲染器。
2.渲染器调用create render="调用工厂函数baseGreateRenderer，定义patch和diff等。最终会返回一个渲染spa页面的render，一个给ssr页面注水的hydrate，一个函数的createApp(不同于Vue的createApp)。
3.程序的实例方法，如mount、get、set、use、mix等。将在函数的createApp中定义。
4.装载实例方法将检查是否装载了根组件，以及使用什么方法装载它(spa/ssr)。
5.render方法调用patch方法进行修补。
6.patch方法根据传入节点的类型来判断挂载方法。如果是第一次挂载，会挂载组件，后面是元素(patch patch方法会把vnode转换成节点)。
7.patch方法执行内部processComponent方法，最后是mountComponent方法，也就是Vue2中最后执行的$mount的方法。
初始化流程
1.根组件的实例化：调用createComponentInstance。
2.初始化根组件：调用setupComponent方法，也就是这个。Vue2中的$_init方法，用于合并选项并设置钩子和响应。
3.安装渲染函数的副作用函数：setupRendererEffect。
在Vue3中，取消了观察器，改变了副作用功能。副作用函数会在每次响应数据发生变化时重新执行，内部呈现函数的执行会触发依赖关系收集，这样响应数据发生变化时响应组件也会更新。
PS:与react中的useEffect不同，useEffect需要手动收集依赖关系，而Vue中的Effect()会自动收集依赖关系。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。