位置: 编程技术 - 正文

深入理解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)

  • 非税收入票据能否税前扣除
  • 两家公司原材料能否借用
  • 购买税控盘全额退税
  • 非正常损失进项税额转出会计分录
  • 企业所得税允许税前扣除的五险一金
  • 租赁的土地被征迁
  • 划拨土地使用权多少年
  • 什么凭证需要审计报告
  • 税务大厅申报社保需要资料
  • 积分兑换内容
  • 事业单位 会计
  • 红冲无票收入怎么报税
  • 采购医药费差价会计分录
  • 什么是汇兑损益,汇兑损益产生的原因有哪些?(10分)
  • 建筑公司支付的预付款担保保函费怎么做账?
  • 公寓收费标准
  • 分享下会画画是怎样的体验
  • 可作为税前扣除的项目有
  • 业务招待费税务筹划案例
  • 消耗性生物资产减值准备一经计提不得转回
  • 返点收入怎么会计分录
  • 增值税留抵退税账务处理
  • fatal error: opencv/cv.h: 没有那个文件或目录 错误;fatal error: opencv2/contrib/contrib.hpp: 没有那个文件或目录,opencv多版本
  • 非货币性资产投资个人所得税
  • 扣缴义务人需要办理税务登记吗
  • 使用二氧化碳灭火器时人应该站在什么位置
  • php close
  • 信托融资放在哪个科目
  • php网页编程
  • 小企业会计制度最新版
  • 现金清查的会计分录
  • 愚人挑战
  • 融资租赁租入固定资产是什么意思
  • 帝国cms移动端
  • 新建利润表
  • 企业印花税的申报
  • 帝国cms使用手册
  • 软件使用权计入什么科目
  • sql2008附加数据库
  • 商业折扣影响主营业务成本吗
  • 小规模纳税人补开发票如何申报
  • 电子承兑汇票兑现扣几个点
  • 一般纳税人销售旧货税率
  • 跨年度冲收入,冲成本分录如何做?
  • 工商年报认缴时间过期了怎么办
  • 文化事业建设费计入什么科目
  • 预付房租收到发票后如何做账
  • 房产契税什么时候退税
  • 固定资产累计折旧会计科目
  • 购销合同交的印花税税率
  • 信托保障基金会返还吗
  • 一般纳税人可抵扣的票证有哪些?
  • 管理费用是负数影响利润表吗
  • 没有工会的企业收到返还的工会经费派什么用场
  • 应收的货款
  • mysql 内存模型
  • winxp系统怎么投屏
  • 蓝屏service
  • Fedora 9.0 Apache+PHP+MYSQL 环境安装
  • mac怎么删除系统软件
  • 永恒之塔客户端是32位
  • win10总是锁定
  • win10系统电脑无法开机怎么办
  • ubuntu 上不了网
  • unity3d跑酷游戏推荐
  • jquery如何给div属性赋值
  • unity寻路系统
  • javascript运用
  • 移动move命令的操作步骤是
  • javascript语言介绍
  • sdk和安卓版本
  • 表单验证js
  • 浏览器工作机制
  • The method findViewById(int) is undefined for the type FragmentHome报错
  • python3 split()
  • 山西省地方税务局 先进 文明 李家庄税务所
  • 重庆电子税务局网页版登录
  • 国际货运代理业务范围
  • 财税专家刘杨简历
  • 下抓两级抓深一层的工作机制的要求包括什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设