位置: 编程技术 - 正文

深入理解Vue官方文档梳理之全局API(vuex的理解)

编辑:rootadmin

推荐整理分享深入理解Vue官方文档梳理之全局API(vuex的理解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue理念,深入vue3+typescript技术栈,vuex的理解,vue深入浅出,深入理解vue.js实战,深入实战vue开发,vue深入浅出,深入实战vue开发,内容如对您有帮助,希望把文章链接给更多的朋友!

Vue.extend

配置项data必须为function,否则配置无效。data的合并规则(可以看《Vue官方文档梳理-全局配置》)源码如下:

传入非function类型的data(上图中data配置为{a:1}),在合并options时,如果data不是function类型,开发版会发出警告,然后直接返回了parentVal,这意味着extend传入的data选项被无视了。

我们知道实例化Vue的时候,data可以是对象,这里的合并规则不是通用的吗?注意上面有个if(!vm)的判断,实例化的时候vm是有值的,因此不同于Vue.extend,其实下面的注释也做了说明(in a Vue.extend merge, both should be function),这也是官方文档为何说data是个特例。

另外官方文档所说的“子类”,是因为Vue.extend返回的是一个“继承”Vue的函数,源码结构如下:

Vue.nextTick

既然使用vue,当然要沿着数据驱动的方式思考,所谓数据驱动,就是不要直接去操作dom,dom的所有操作完全可以利用vue的各种指令来完成,指令将数据和dom进行了“绑定”,操作数据不仅能实现dom的更新,而且更方便。

如果浏览器支持Promise,或者用了Promise库(但是对外暴露的必须叫Promise,因为源码中的判断为typeof Promise !== 'undefined'),nextTick返回的就是Promise对象。

Vue执行nextTick的回调采用call的方式cb.call(ctx);ctx就是当前Vue实例,因此在回调中可以直接使用this调用实例的配置。nextTick可以简单理解为将回调放到末尾执行,源码中如果当前不支持Promise和MutationObserver,那么会采用setTimeout的方式来执行回调,这不就是我们常用的延后执行代码的方式。

举个例子来实际看下:

你估计会有些纳闷,既然都是最后才执行,那为什么beforeChange输出的是1而不是2,这是因为this.a=2背后触发dom更新也是采用nextTick的方式,上面的代码实际执行的顺序是:beforeChange>更新dom>afterChange。

Vue.set

Vue.set( target, key, value ),target不能是 Vue 实例,或者 Vue 实例的根数据对象,因为源码中做了如下判断:

target._isVue阻止了给Vue实例添加属性,ob && ob.vmCount阻止了给Vue实例的根数据对象添加属性。

深入理解Vue官方文档梳理之全局API(vuex的理解)

Vue.delete

如果Vue能检测到delete操作,那么就不会出现这个api。如果一定要用delete来删除$data的属性,那就用Vue.delete,否则不会触发dom的更新。

同Vue.set,Vue.delete( target, key )的target不能是一个 Vue 示例或 Vue 示例的根数据对象。源码中的阻止方式和Vue.set相同。

在2.2.0+ 版本中target若为数组,key则是数组下标。因为Vue.delete删除数组实际是用splice来删除,delete虽然能用于删除数组,但位置还在,不能算真正的删除。

Vue.use

Vue.use 源码比较简单,可以全部贴出来。

安装的插件放到了 installedPlugins ,安装插件前通过installedPlugins.indexOf(plugin)来判断插件是否被安装过,进而阻止注册相同插件多次。

插件类型为 object,必须指定 install 属性来安装插件(typeof plugin.install === 'function'),另外插件执行采用plugin.install.apply(plugin, args);,因此 this 访问 object 的其他属性。此处的 args 是由 Vue(args.unshift(this);) 和 Vue.use 传入的除了 plugin 的其他参数(toArray(arguments, 1),1 表示从 arguments[1] 开始截取)。

插件类型为 function,安装调用plugin.apply(null, args);,因此在严格模式下插件运行时上下文 this 为 null,非严格模式为 Window。

Vue.compile

和众多 JS 模板引擎的原理一样,预先会把模板转化成一个 render 函数,Vue.compile 就是来完成这个工作的,目标是将模板(template 或 el)转化成 render 函数。Vue.compile 返回了{render:Function,staticRenderFns:Array},render 可直接应用于 Vue 的配置项 render,而 staticRenderFns 是怎么来的,而且按照官网的例子,Vue 还有个隐藏的配置项 staticRenderFns,先来个例子看看。

原来没有和数据绑定的 dom 会放到 staticRenderFns 中,然后在 render 中以_m(0)来调用。但是并不尽然,比如上述模板去掉<h1>,staticRenderFns 长度为 0,header 直接放到了 render 函数中。

Vue.compile 对应的源码比较复杂,上述渲染 <header> 没有放到 staticRenderFns 对应源码的核心判断如下:

<header> 不符判断条件 !(node.children.length === 1 && node.children[0].type === 3), <header> 有一个子节点 TextNode(nodeType=3)。 注释也说明了一个 node 符合静态根节点的条件。

另外官网说明了此方法只在独立构建时有效,什么是独立构建?这个官网做了详细的介绍,不再赘述。对应官网地址:对不同构建版本的解释。

仔细观察编译后的 render 方法,和我们自己写的 render 方法有很大区别。但是仍然可以直接配置到 render 配置选项上。那么里面的那些 _c()、_m() 、_v()、_s() 能调用?随便看一个 Vue 的实例的 __proto__ 就会发现:

正如注释所说,这些方法是为了减少生成的 render 函数的体积。

全局 API 还剩 directive、filter、component、mixin,这几个比较类似,而且都对应着配置项,会在「选项」中再详细介绍。

标签: vuex的理解

本文链接地址:https://www.jiuchutong.com/biancheng/378881.html 转载请保留说明!

上一篇:初识 Vue.js 中的 *.Vue文件(vue.js有什么用)

下一篇:浅谈Vue-cli 命令行工具分析(vue vue cli)

  • 销售货物的运费计入成本吗
  • 工程中常见的土方工程有哪些
  • 管理费用劳保费属于
  • 建筑行业增值税税负率计算公式
  • 汇款出国规定
  • 基建贷款贴息账户有哪些
  • 留存收益总额不变
  • 费用退回怎么做账
  • 收客户逾期利息账务处理怎么做?
  • 财务费用手续费有哪些
  • 财务人员最重要的三点
  • 如何少交点税
  • 增值税发票过期了税金怎么办
  • 纳税人在同一地级行政范围内跨县经营
  • 3月申报的是什么时候的个税
  • 物业公司收的电梯费如何做账
  • 印花税计税金额是含税还是不含税
  • 鸿蒙负一屏怎么设置
  • 税前利润的公式有哪些
  • 公司的固定资产是什么
  • 公司回购股份有什么好处
  • 苹果14pro max价格
  • UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
  • 出库单可以补吗
  • win10如何禁止
  • php中cookie和session的区别
  • 一般纳税人企业所得税税率多少
  • 代开发票的弊端?
  • 题管理录入新内容
  • 苹果手机最贵的软件是哪个
  • 无法偿还应付账款账务处理
  • vite怎么打包
  • php类的作用
  • 火车票可以直接去火车站买吗
  • php操作mysql数据库
  • 计算机视觉需要学什么
  • 真实世界人工智能
  • javascript表单验证和控制类
  • flex的作用及设置
  • php生成csv文件
  • dos命令怎么转到d盘
  • 贷款利息发票可以随便开吗
  • 物业管理费开票类目
  • 普通发票可以抵扣进项吗
  • python并发和并行
  • 无形资产摊销年限
  • 年报中的利润表本月数需要填吗
  • 软件使用权计入什么科目
  • 会计凭证的做账原则
  • 对以前年度的收入怎么算
  • 去年的增值税专用发票可以重开吗
  • 如何解绑企业微信绑定的邮箱
  • mysql中使用instr进行模糊查询方法介绍
  • sql常用语句大全 实例
  • win2000服务器
  • linux十大常用软件
  • FreeBSD架? FTP
  • win10周年更新版是什么意思
  • 自动登录xp系统怎么办
  • win8开机进不了桌面
  • win10一周年深色主题
  • win7删除文件
  • win8快速启动怎么开启
  • cocos creator开发文档
  • me分析方法
  • Node.js中的全局变量有哪些
  • js字符串函数
  • jquery .val
  • unity怎么创建空对象
  • python console不能用
  • 2、BluetoothChat之扫描设备DeviceListActivity.java
  • Python for Informatics 第11章 正则表达式(一)
  • 税务系统 网络发票
  • 国税局征收管理办法
  • 出口退税收入怎么做账
  • 安康市税务局党玲玲
  • 广西税务局热线电话
  • 江苏国税电子税务局官网
  • 征管基础平台app
  • 红星新闻河南郑州
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设