Source Code Reading for Vue 3: How does `hasChanged` work?

2026年 5月 26日 Windows系统技术牛

Hey, guys! The next generation of Vue has released already. There are not only the brand new composition API, much more powerful and flexible reactivity system, first-class render function, but also the natural performance with building off the modern browsers.

There have been tens of hundreds of posts and tutorials which are about Vue 3 and source code analysis even. This series is about the source code reading, but includes the related technology explanations. If its your jam, please stay tune;)

As the first post of this series, it might be nice to nibble a small part of the great Vue 3 pie. hasChanged is used to compare whether a value has changed accounting for NaN, and is leveraged in trigger function to avoid unnecessary effect function re-running, which locates in vue/@shared. And the source code snippet is as below:

代码语言：javascript

AI代码解释

复制

export const hasChanged = (value: any, oldValue: any): boolean => { return !Object.is(value, oldValue) }

How simple it is. But what is Object.is?

What is Object.is for?

Object.is method came from ES6 and is capable of determining whether two values are the same. Two values are the same if the one of the following holds:

both undefinedboth nullboth strings of the same length with the same characters in the same orderboth true or both falseboth objects reference to the same memory address allocated in heapboth numbers and both -0 or both +0both NaNboth non-zero and both not NaN and both have the same value

As we know, loose equality operator(==) applies various coercions to both sides if they are not the same type, before testing for equality. But Object.is doesnt coerce either value.

And the difference between strict equality operator(===) and Object.is is in their treatment of signed zero and NaNs.

NaN a Special Value for Loose and Strict Equality

NaN stands for Not a Number, and the comparison between two NaN value by loose or strict equality will result in false always. We can determine whether a value is NaN by calling x !== x.

However window.isNaN came up from ES5 does us a favor for determining whether a value is type of NaN in some point. But there is a way important and subtle detail that we would ignore. That is doing type conversion before comparison as below

代码语言：javascript

AI代码解释

复制

isNaN(123) //false isNaN(–1.23) //false isNaN(5–2) //false isNaN(0) //false isNaN(123) //false isNaN(Hello) //true isNaN(2005/12/12) //true isNaN() //false isNaN(true) //false isNaN(undefined) //true isNaN(NaN) //true isNaN(NaN) //true isNaN(0 / 0) //true isNaN(null) //false

So when we want to compare whether a value has changed accounting for NaN as Vue 3, we should author as below

代码语言：javascript

AI代码解释

复制

function hasChanged(x, y) { x !== y && !(typeof x === number && isNaN(x) && typeof y === number && isNaN(y)) }

Since window.isNaN will coerce its argument to type of Number first before comparison, and we have to take some effect to build our own strict isNaN. Fortunately, the so-called strict isNaN Number.isNaN has came up in ES6, and with the help of it, the above code snippet could be simplified into hasChanged = (x, y) => x !== y && !(Number.isNaN(x) && Number.isNaN(y))

Actually we can get the same result without window.isNaN and Number.isNaN in a much leaner manner. Because there is only a possible for a value to not be strictly equal to itself when a value evaluates to NaN.

代码语言：javascript

AI代码解释

复制

function hasChanged(x, y) { x !== y && !(x !== x && y !== y) }

Strictly Speaking, +0 and -0 are different

As a common sense, +0 and -0 are the same value, but its not true in JavaScript. For example, the following integer division expression will raise an error in Java

代码语言：javascript

AI代码解释

复制

int i = 1; int positiveZero = +0; int result1 = i / positiveZero; // raise an ArithmeticException

However, JavaScript is a dynamic type programming language which acts as doing double division as Java for the above example.

代码语言：javascript

AI代码解释

复制

1/+0 === 1/0 === Infinity 1/–0 === –Infinity

But +0 and -0 are the same comparing with strict equality operator.

Build your own Object.is

For now, we have known all about the features of Object.is and the differences between it and the loose/strict equality operators. Lets rollup our sleeve to build an own one.

代码语言：javascript

AI代码解释

复制

Object.defineProperty(Object, is, { value(x, y) { return x === y ? 1 / x === 1 / y // +0 != -0 : x !== x && y !== y // NaN == NaN } })

作者：技术牛

链接：https://www.bzpu.cn/archives/130153.html

文章版权归作者所有，未经允许请勿转载。