当前位置:首页 > http > 正文内容

vue实现的整体流程

自由小鸟4年前 (2019-11-18)http2143

vue实现分为4大步骤

第一步:解析模板成render函数

    with的用法,在javascrip精粹这本书中作者提出在开发中还是最好不要使用with,除非你对它存在的问题非常之了解,当前vue中使用了不会影响开发者使用

    模板中的所有信息都被render函数包含

    模板中用到的data中的属性,都变成了js变量

    模板中的v-model v-for v-on都变成了js逻辑

    render函数返回vnode

第二步:响应式开始监听

    Object.definePropery 

        通过Object.defineProperty来给对象设计上get和set函数当设计和获取都可以监听到了

        将data的属性代理到vm上

image.png

第三步:首次渲染,显示页面,且绑定依赖

    初次渲染,执行updateComponent,执行vm.render()

    执行render函数,会访问到vm实例的数据

    会被响应式的get方法监听到

    执行updateComponent,会走到vdom的patch方法

    patch将vnode渲染成dom,初次渲染完成

    patch函数,初始时把vnode直接添加到dom选择器里,

    如果oldVnode有值,然后对比oldVnode和newVnode把更新变化的修改


第四步:data属性变化 ,触发render函数

    修改属性,被响应式的set监听到

    set中执行updateComponent

    updateComponent重新执行vm._render()

    生成的vnode和prevVnode,通过patch进行对比

    渲染到html中


版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=76

返回列表

上一篇:数组api

下一篇:vue3的使用

“vue实现的整体流程” 的相关文章

数组api

数组api

1,forEachvar arr=[1,2,3];arr.forEach(function(item,index){  consoel.log(index,item)})2,every 判断所有元素都满足一个条件var arr=[1,2,3,4,5]var result=arr.every...

vue3的使用

从0开始搭建项目1,npm init @vitejs/appyarn create @vitejs/app2,npm install 安装依赖3,npm run dev 启动项目...

资料下载地址

macpnpm https://www.pnpm.cn/installation...

elementplus 限制数字最小最大

<el-form-item :label="transformI18n($t('register.注册数量'))" prop="num"> <el-input style="w...

docker 前端中使用

下载地址https://docs.docker.com/desktop/install/mac-install/ 学dockder的目的可以将vue项目打包为docker镜像运行使用docker可以方便将其他人的项目直接运行,而不需要配置1,将vue的项目进行构建,输出dist这个步骤就相当于是将...