精华内容
下载资源
问答
  • Vue 小 Case 』- Vue Prop null vs undefined 前言:本文将引入两个 Vue 比较特殊的使用场景,带领大家熟悉一下null和undefined的区别,然后再分析一下 Vue 是怎么对 Props 做校验的,最后给出大佬是...

    37a7c972b1c96707dfa4f433584d72fd.png
    本文会同步发布在微信公众号歪码行空,欢迎关注交流~!

    『 Vue 小 Case 』- Vue Prop 中的 null vs undefined

    前言:本文将引入两个 Vue 中比较特殊的使用场景,带领大家熟悉一下nullundefined的区别,然后再分析一下 Vue 中是怎么对 Props 做校验的,最后给出大佬是怎么解释的。

    一直以来,笔者在使用 Vue 时,习惯于在需要表示 prop 属性未定义时,使用undefined,而不是null。因为“undefined才是没有值,null是有值,但是值为空的对象(注意不是空对象{}”。

    基于这一习惯,笔者规避掉了很多问题,对此也没有深究。

    直到最近,参与项目的一些同学习惯于指定null为初始值,我也没有强制性统一。根本原因是,我自己也觉得没什么,每个人都有自己的习惯,只要大的风格不出偏差就可以接受,毕竟项目紧嘛。

    直到今天遇到了下面的场景,我才发现,原来这么做会有一些奇怪的小问题。

    一、场景再现

    1.1 场景一:prop 的值是null,会使用 default 的值吗?

    阅读以下代码,你觉得有问题吗?

    HTML:

    <div id="app">
      <list :items="null"></list>
    </div>

    JS:

    Vue.component('list', {
      template: '<div>{{ typeof items }} {{ items.join(',') }}</div>',
      props: {
        items: {
          type: Array,
          default() {
            return [1, 2, 3]
          },
        }
      }
    })
    
    new Vue({
      el: '#app',
    });

    上述的代码执行之后有问题吗?停顿 5s 思考一下,1、2、3、4、5。

    好,我们来看下示例代码,这段代码执行之后会报错(记得开启控制台查看错误,因为是 JS 执行错误)。因为items最终的值是null,而所以没法对null执行join()拼接。那为什么 prop 值为null时,default中指定的值没有生效呢?

    如果你愿意,可以把null换成undefined,你会发现正如你期望的那样,default生效了。

    1.2 场景二:prop 设置了required,传null可以吗?

    既然 prop 的值为null时,default不会生效,那我们能否通过required强制 prop 必填呢?

    HTML 保持场景一不变。JS 做如下改动:

    Vue.component('list', {
      template: '<div>{{ typeof items }} {{ items.join(',') }}</div>',
      props: {
        items: {
          type: Array,
          required: true,
        }
      }
    })
    
    new Vue({
      el: '#app',
    });

    同样停顿 5s 思考一下,1、2、3、4、5,好。我们看下 示例代码,这段代码执行时依然会报错。

    Vue 会给出警告,信息如下:

    [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Null.
    (found in component <list>)
    

    从警告内容可以看出null通过了required: true的验证,但是没有通过类型校验,最后浏览器执行报错。如果这时候,你再次尝试将null改成undefined,你会发现依然行不通,会有类似的错误。

    好了,至此,我们已经看完了我所想展示的示例。可以总结为以下两个疑问:

    1. 当值为null的时候,为什么default中定义的值没有生效?(显然,当值为 undefined 的时候,默认值是会生效的)
    2. 当值为null/undefined的时候,为什么required: ture的校验似乎通过了,但是类型校验反倒没有通过?(显然,required: false的时候,nullundefined是都能通过类型校验的。这点文档中有提到。)

    在详细解释为什么之前,我们先来熟悉下一个历史悠久的问题:“nullundefined的区别是什么?”

    二、null 和 undefined 的区别

    在设计之初,JavaScript 是这样区分的:null是一个表示"无"的对象,转为数值时为0undefined是一个表示"无"的原始值,转为数值时为NaN

    Number(null) // 0
    5 + null // 5
    
    Number(undefined) // NaN
    5 + undefined // NaN
    不得不吐槽,真是坑呀

    但后来被证明这并不可行。目前,nullundefined基本是同义的,只有一些细微的差别。

    null表示没有对象,即此处不应该有值。虽然其表示不应该有值,但它是有值的,值是一个空的对象(注意不是{})。用法如下:

    1. 作为函数的参数,表示该函数的参数不是对象。
    2. 作为对象原型链的终点。
    Object.getPrototypeOf(Object.prototype)
    // null

    undefined表示缺少值,就是此处应该有一个值,但是还没有定义

    1. 变量被声明了,但没有赋值时,就等于undefined
    2. 调用函数时,应该提供的参数没有提供,该参数等于undefined
    3. 对象没有赋值的属性,该属性的值为undefined
    4. 函数没有返回值时,默认返回undefined
    var i;
    i // undefined
    
    function f(x){console.log(x)}
    f() // undefined
    
    var  obj = new Object();
    obj.p // undefined
    
    var ret = f();
    ret // undefined

    三、Vue 中的 Prop 校验

    好了,我们已经再次熟悉了一下nullundefined的区别。下面就让我们一起看下,Vue 中是如何进行 Prop 校验以及如何对待nullundefined

    笔者阅读了 Vue 中关于Prop 校验的代码,总结出了如下图所示的校验流程:

    20057d244f7253096b1d661142b80fd1.png

    从图中第三步可以看出,只有 prop 的值为undefined时,才会去获取default中的值。这解释了第一部分两个奇怪现象的第一个。

    代码片段如下:

    // check default value
    if (value === undefined) {
      value = getPropDefaultValue(vm, prop, key)
      // since the default value is a fresh copy,
      // make sure to observe it.
      const prevShouldObserve = shouldObserve
      toggleObserving(true)
      observe(value)
      toggleObserving(prevShouldObserve)
    }

    从图中第四步可以看出,当required: true时,只有不传属性时,才会提示'Missing required prop。当required:false时,nullundefined都会通过校验。其他情况,则都会进行类型校验。这解释了第一部分两个奇怪现象的第二个。

    代码片段如下:

    // required为true,且不传属性
    if (prop.required && absent) {
      warn(
        'Missing required prop: "' + name + '"',
        vm
      )
      return
    }
    // required为false,null和undefined校验通过
    if (value == null && !prop.required) {
      return
    }
    // 其他情况校验type
    let type = prop.type
    // ...
    if (type) {
      // type校验逻辑...
    }

    好了,我们通过 Vue 源码中的逻辑解释了为什么会出现第一部分中的奇怪现象。但可能还是没有理解为什么。下面我们继续来看一下大佬们的解释。

    四、大佬们的解释

    引用一下尤雨溪在issue#6768 中的回答,部分内容及翻译如下:

    null indicates the value is explicitly marked as not present and it should remain null.null表示显式地标记值为未指定(是个空值),所以我们保留null。(这里解释了为什么不对null应用defaultundefined indicates the value is not present and a default value should be used if available.undefined表示值没有指定,如果有默认值,则使用默认值。required: true indicates neither null or undefined are allowed (unless a default is used)required: true表示在 default 没有应用的情况下,nullundefined都不允许。
    注意:还有一个小前提,就是给属性指定了类型
    (此外,这句话隐式包含了 required 和 default 是可以共存的,先应用 default,再判断required: true

    在这一评论中,尤雨溪还解释了为什么要这么设计。虽然这样存在歧义,但是这和nullundefined在语言本身中的含义是统一的,如果改变的会造成更多的混乱。

    五、总结

    比较赞同尤雨溪的解释,虽然 JavaScript 语言本身存在一定的设计缺陷,但我们对这些缺陷表示知道,并不轻易 hack,不然就会出现更多的混淆。与语言本身保持统一是一种更好的方式。

    最后,虽然本文标题是《Vue Prop 中的 null vs undefined》,但其中频繁涉及到了 required 和 default 这两个概念。所以想借此机会和大家一起明确一下 Vue 中这两个值的具体含义。

    1. required: true表示要求传入该属性,即 template 中要有该属性。只要有,不管值是什么,都可校验通过(没通过是类型校验的事情)。
    2. default 会在 value 值为undefined时生效,不管是因为没有传入属性还是属性的值就是undefined。所以当你希望触发默认值的时候,一定要使用undefined

    参考链接

    1. undefined 与 null 的区别
    2. 「Vue Issue #7720」- Vue warns about missing required prop that has a default value
    3. 「Vue Issue #6768」- No warning when string property value is null
    4. Vue Prop 校验源码
    展开全文
  • vue有两个方法可用1.JSON.stringify(evtValue)=='{}'2.Object.keys(xxx).length==0js判断对象是否为空对象的几种方法1.将json对象转化为json字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify...

    vue有两个方法可用

    1.

    JSON.stringify(evtValue)=='{}'

    2.

    Object.keys(xxx).length==0

    js判断对象是否为空对象的几种方法

    1.将json对象转化为json字符串,再判断该字符串是否为"{}"

    var data = {};

    var b = (JSON.stringify(data) == "{}");

    alert(b);//true

    2.for in 循环判断

    var obj = {};

    var b = function() {

    for(var key in obj) {

    return false;

    }

    return true;

    }

    alert(b());//true

    3.jquery的isEmptyObject方法

    此方法是jquery将2方法(for in)进行封装,使用时需要依赖jquery

    var data = {};

    var b = $.isEmptyObject(data);

    alert(b);//true

    4.Object.getOwnPropertyNames()方法

    此方法是使用Object对象的getOwnPropertyNames方法,获取到对象中的属性名,存到一个数组中,返回数组对象,我们可以通过判断数组的length来判断此对象是否为空

    注意:此方法不兼容ie8,其余浏览器没有测试

    var data = {};

    var arr = Object.getOwnPropertyNames(data);

    alert(arr.length == 0);//true

    5.使用ES6的Object.keys()方法

    与4方法类似,是ES6的新方法, 返回值也是对象中属性名组成的数组

    var data = {};

    var arr = Object.keys(data);

    alert(arr.length == 0);//true

    展开全文
  • 当时就想,为啥不能传null,你前端做下判断不就行了吗。 没想到现在自己既开发前端,又开发后台,就遇到了这个问题。 其实真的就是坐下 !=null就可以了。 例子:   &lt;span&gt;{{...

    说明:以前做服务器开发的时候,前端人员总是说,不要传null过来,不要传null过来,传“”空字符串过来都可以。当时就想,为啥不能传null,你前端做下判断不就行了吗。

    没想到现在自己既开发前端,又开发后台,就遇到了这个问题。

    其实真的就是坐下 !=null就可以了。

    例子

     

    <span>{{changeRemarkLength(scope.row.remark)}}</span>
    
    <script>
    computed:{
        changeRemarkLength(){
                    return function (text) {    
                        if(text.length > 14){ 
                            return text.slice(0,14)+"...";
                        }else{
                            return text;
                        }
                    }
                },
    }
    </script>

    在vue中用一个计算属性改变  remark:备注  文本的显示格式。如果字符长度大于14,之后的字符用。。。t代替。

    但是如果后台传的是  remark为null,那这里就会报 : v-if判断数组长度是,length报错

    [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null"

    解决:在判断之前在判断下 !=null就行了

    <script>
            changeRemarkLength(){
                    return function (text) {
                        if(text!=null && text.length > 14){ 
                            return text.slice(0,14)+"...";
                        }else{
                            return text;
                        }
                    }
            },
    </script>

     

     

     

    展开全文
  • vue中判断数组长度length报错

    万次阅读 2018-11-22 10:19:13
    {{pawnList.length&gt;0 ? pawnList.name : ''}} 报错:Error in render: "TypeError: Cannot read property 'length' of undefined"   解决办法: ...== null &amp;&amp; p...
    {{pawnList.length>0 ? pawnList.name : ''}}

    报错:Error in render: "TypeError: Cannot read property 'length' of undefined"

     

    解决办法:

    {{pawnList!== undefined && pawnList!== null && pawnList.length>0 
    ? pawnList.name 
    : ''}}

     

    展开全文
  • import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const stateKey = 'stateKey' const isLogin = 'isLogin' ... user: null, stateKey: false, isLogin: '0' }
  • 添加题目: 题目{{item.stem}} A、 {{item.choiceA}} {{item.choiceB==null}} B、{{item.choiceB}} ...
  • vue空值判断

    2021-03-17 20:10:06
    编辑器:HBuilderX data() { return { typeArr:[{name:'短信通知...之后的方法------------------------------------ console.log(this.typeArrIndex) console.log(this.typeArrIndex == null) console.log(this.
  • 直接判断不等于null就ok了 &lt;i class="sign" v-show="item.tmType == null ? item.tmType : item.tmType.split(',').indexOf('0') != -1"&gt;种&lt;/i&gt;
  • 1.代码 export const isNotNullORBlank = (...args)=> { for (var i = 0;... if (argument == null || argument == '' || argument == undefined) { return false; } } return true; } 2.用法 isNot
  • 关于在VUE中使用Echarts时出现getAttribute of null问题 记录一下我自己遇到这种情况是在使用v-if切换echarts图时 就会这样报错,查过问题之后是因为DOM树改变了,而echarts图数据来了却找不到容器,尽管自己v-if...
  • 比如:文件Old.txt和New.txt,第一行是列名,需要取出文件Name字段相同的内容。部分数据如下: 期望运算结果如下:Java不是集合性语言,需大量使用循环和判断,写起来会比较长,代码大概要写成这样:...while (...
  • 废话不多说,请直接看源码: ...== null } function isPromise(val){ return ( isDef(val) && typeof val.then === 'function' && typeof val.catch === 'function' ) }
  • 当前的业务逻辑是表格大概有四五个字段需要判断,如果是null或者0就返回暂无数据,有值的话就返回对应的值,如下图: 由于需要进行的操作是一样的,所以用一个formatter就可以了,所以要判断对应的字段,代码如下...
  • 改别人的代码,满屏报TypeError: Cannot read property 'length' of null,这种报错根本定位... 0",在js代码也加上了if判断,然后又找到所有的for循环,也加上了判断,先确定所要操作的数组元素是否存在,再去找它的l
  • vue中的makeMap函数

    2021-03-29 11:35:01
    vue源码的makeMap用在很多地方,主要是判断标签是原生标签还是用户自定义的组件 但是标签很多,如果每判断一次都执行一次循环,累计下来,性能损耗还是很大的 makeMap就是解决这个问题出现的 // 源码 function ...
  • vue中使用防抖函数

    2020-06-17 17:56:11
    vue中使用防抖函数 有时候我们不想频繁触发一个函数,比如在300ms内只能触发一次,就可以用防抖函数来处理 防抖函数的思想是: 设置定时器id为null 执行方法 判断id是否存在,如果不存在,则返回,如果存在则执行 ...
  • vue 使用LodopFuncs打印插件

    千次阅读 2019-05-23 14:28:21
    vue 使用LodopFuncs打印插件 创建一个LodopFuncs.js var CreatedOKLodop7766 = null, CLodopIsLocal; //====判断是否需要 Web打印服务CLodop:=== //===(不支持插件的浏览器版本需要用它)=== function ...
  • vue中锚点的实现

    2020-10-19 15:47:09
    那首先,我们先完成第一步,滚动条滚动到相应的锚点列表对象。 <div ref="scrollPanel" class="container" @scroll="onScroll"> </div> data(){ return{ isRun:false, //判断是否是锚点点击跳转还是...
  • Vue中diff原理学习

    2020-08-28 14:27:41
    再如二叉树翻转,命令式编程是需要判断节点是否为null,然后开始翻转左树,翻转幼树,最后在左右树互换,关注了解题步骤;而函数式编程考虑了二叉树翻转和原二叉树的关系,翻转二叉树和原二叉树每一个节点都递归的...
  • 在回顾Vue源码的时候,经常看到Vue中一些辅助函数,总结一些日常中会用到的,和一些js代码片段 Vue 源码中的一些辅助函数 是否定义 function isDef (v){ return v !== undefined && v !== null } 已经...
  • vue开发的报错

    2021-01-20 18:21:37
    在数据处理,添加判断数据是否为 null 来处理该问题。 onsuccess(res) { console.log(res.data.data, "贯标比对"); if (res.data.data != null) { self.comparemodellist = res.data.data; self.pagi
  • vue项目,表格渲染的时候报TypeError: Cannot read property 'processed' of null,processed是我需要渲染的属性。查出的数据是空的时候才会报这个错。 所以报错的原因可能就是数据为空,所以获取不到handler_...
  • vue 怎么监听路由的变化

    千次阅读 2019-01-24 11:27:49
    1、在一个组件里面 ... // 判断浏览器是否支持history if (window.history &amp;amp;amp;&amp;amp;amp; window.history.pushState) { console.log(document.URL) history.pushState(null, nul...
  • 1.在vue项目,创建一个js文件,引入以下代码 var CreatedOKLodop7766=null //====判断是否需要安装CLodop云打印服务器:==== export function needCLodop(){ try{ var ua=navigator.userAgent if (ua.match(/...
  • 1、先获取消息记录接口,展示到页面 data(){ return{ value:'',//发送的内容 list:[ // 数据结构如下图,只需要内容 和状态 判断是 客服消息 还是用户消息 // { // text:'请问有什么可以帮您?', ...
  • 判断是否为undefined或null const isDef = (v) => { return v !== undefined && v !== null } 判断是否为Promise 函数 const isPromise = (val) => { return ( val !== undefine && typeof val.then === '...
  • 1.VUE页面点击修改的时候,修改不了,F12报以下错误 2.起初以为是我新加的两个字段导致的,没注意...判断报错的值是不是nullnull赋值"" this.dataForm.specialProvince = data.logicUserHope.specialProvin.
  • 报错:VUE+TypeScript报错:Error in v-on handler: xxx "TypeError:this is null 描述:页面控件的v-model绑定了值a以及:maxlength绑定值b,然后在ts代码里进行了初始化赋值666与长度限制3,页面刷新正常显示666且...

空空如也

空空如也

1 2 3 4 5 6
收藏数 107
精华内容 42
关键字:

vue中判断null

vue 订阅