vue中如何初始化data数据 vue中如何初始化data数据

如何初始化data数据
vue程序初始化流程

初始化
改写的原因
流程实现
源码流程
初始化流程

如何初始化data数据后台管理系统中，新建和编辑使用同一个页面，常常需要初始化data数据。

form: {id: 0,name: '',place: '',number: '',admin_uid: '',is_audit: 2,contact: '',sort: '',is_network: 2,network_type: 1,is_projector: 2,is_board: 2,is_live: 2,others:''},

使用

this.$data.form = this.$options.data().form

可将form中的所有数据初始化。

vue程序初始化流程
初始化
在vue3中，程序的初始化不再沿用vue2的new Vue()方法，而是使用了createApp。在createApp中发生了什么呢？

改写的原因
createApp是一个Vue中的工厂函数，以函数的方式进行导入和调用。而函数式的好处是
1、消灭了原来挂载在Vue上的静态方法，变成实例方法，可以减少内存占用，便于tree-shaking，减小了打包体积；
2、因为函数式和class装饰器对ts的支持好，使用函数的方式调用，可以更好的支持ts，提高类型支持
3、根组件的api，如data要和子组件的api保持相同的格式，挂载从$mount改为mount，简化了api并统一了api的一致性
【vue中如何初始化data数据】4、new Vue中挂载的方法会造成全局污染，不能独立出来，createApp可以相互独立，并按需挂载。

流程实现
mount

const Vue = { createApp(options) {//返回app实例return {mount(selector){// 获取渲染函数，编译结果// 渲染dom，追加到宿主元素}compile(template){//返回renderreturn function render(){//描述视图}}} }}

在调用createApp时，如果options中无render，则初始化组件，调用compile产生一个render，若有render则直接挂载；
Vue2中追加元素使用比较替换的方式，diff元素间区别进行对比判断，Vue3中则是直接进行删除重加。
可以在setup或者是data中定义响应式变量， setup的优先级更高。
createApp
Vue暴露的两个初始化的函数，createApp和createRenderer，他们之间的调用关系

/*暴露给Vue的createApp*/function createApp(options){ const renderer =Vue.createRenderer({/*定义一些平台特有的api，一些实例*/aaa(){},bbb(){} }) /*用户调用的createApp，实际上是渲染器的createApp*/ return renderer.createApp()}function createRenderer({aaa,bbb}){ /*获得渲染器*/ /*这个createApp是函数内部的*/ return createApp(options){/*挂载逻辑*/return {/*返回App实例*/} }}

源码流程
1、用户调用createApp方法 =》通过ensureRenderer得到渲染器
2、渲染器调用createRender =》※调用工厂函数baseGreateRenderer，这个函数中定义了patch和diff等，最终会return一个render用来给spa页面进行渲染，一个hydrate用来给ssr页面进行注水，还有一个函数的createApp（不同于Vue的createApp）
3、在函数的createApp中会定义程序的实例方法，如mount，get，set，use，mixin等
4、mount实例方法会去查看是否有根组件挂载，使用什么方法进行挂载（spa/ssr）
5、render方法调用patch方法进行打补丁
6、patch方法根据传入的节点类型进行挂载方法的判断，如果首次挂载则为挂载component，之后是挂载element(patch方法会将vnode转化为node节点)
7、patch方法执行内部processComponent方法，最终执行mountComponent方法，也就是Vue2中$mount最终执行的方法

初始化流程
1、根组件的实例化：调用createComponentInstance
2、初始化根组件：调用setupComponent方法，也就是Vue2中的this.$_init方法，用来将选项进行合并，并设置钩子和响应式
3、安装render函数的副作用函数：setupRendererEffect
在Vue3中取消了watcher改为了副作用函数，副作用函数会在每次响应式数据发生变化的时候重新执行，内部的render函数的执行会触发依赖收集，这样当响应式数据变化时，响应式组件就会更新。
PS:与react中的useEffect不同的方面是，useEffect需要手动的收集依赖，而Vue中的effect()会自动的收集依赖。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。