Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "Vue3 responsiveness basic API case Analysis" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Vue3 responsiveness basic API case Analysis" article.

Responsiveness basic API

Reactive

Why does it have this attribute? in fact, I guess it is to satisfy the writing style of different teams, because some teams may like the following ways:

Const x = 10

Const y = 20

Some teams prefer this approach:

Const obj = {

X: 10

Y: 20

}

And reactive is to meet the second case of the team, return a responsive copy of the object, responsive conversion is deep, it will affect the properties of the object, the returned proxy is not equal to the original object, so we recommend using proxy to avoid relying on the original object.

X-{{obj.x}}

Y-{{obj.y}}

Import {

Reactive

} from 'vue'

Export default {

Setup () {

Const obj = reactive ({

X: 10

Y: 20

})

Return {

Obj

}

}

}

Readonly

According to the literal meaning of English words, we know that this method represents read-only. We can change an original object, either a responsive object, or a copy object returned by ref. We know that responsive transformation is deep and will affect deep properties, so any property of the object is read-only:

X-{{obj.x}}

Y-{{obj.y}}

Import {

Reactive

Readonly

WatchEffect

} from 'vue'

Export default {

Setup () {

Const obj = reactive ({

X: 10

Y: 20

})

Const readonlyObj = readonly (obj)

WatchEffect () = > {

Console.log ("for tracking obj", obj.x)

})

Obj.x++ / / can add

ReadonlyObj.x++ / / warning occurs

Return {

Obj

}

}

}

IsProxy

Proxy used to detect whether an object is created by reactive or readonly

X-{{obj.x}}

Y-{{obj.y}}

Import {

Reactive

Readonly

WatchEffect

IsProxy

IsReactive

IsReadonly

} from 'vue'

Export default {

Setup () {

Const obj = reactive ({

X: 10

Y: 20

})

Const readonlyObj = readonly (obj)

WatchEffect () = > {

Console.log ("for tracking obj", obj.x)

})

Console.log ("isReadonly (obj)", isReadonly (obj), isReadonly (readonlyObj))

Console.log ("isProxy (obj)", isProxy (obj), isProxy (readonlyObj))

Console.log ("isReactive (obj)", isReactive (obj), isReactive (readonlyObj))

Obj.x++ / / can add

ReadonlyObj.x++ / / warning occurs

Return {

Obj

}

}

}

IsReactive

Detect whether the object is a responsive object created by reactive:

X-{{obj.x}}

Y-{{obj.y}}

Import {

Reactive

Readonly

WatchEffect

IsProxy

IsReactive

IsReadonly

} from 'vue'

Export default {

Setup () {

Const obj = reactive ({

X: 10

Y: 20

})

Const readonlyObj = readonly (obj)

WatchEffect () = > {

Console.log ("for tracking obj", obj.x)

})

Console.log ("isReadonly (obj)", isReadonly (obj), isReadonly (readonlyObj))

Console.log ("isProxy (obj)", isProxy (obj), isProxy (readonlyObj))

Console.log ("isReactive (obj)", isReactive (obj), isReactive (readonlyObj))

Obj.x++ / / can add

ReadonlyObj.x++ / / warning occurs

Return {

Obj

}

}

}

IsReadonly

Test whether the object is a read-only object created by readonly:

Console.log ("isReadonly (obj)", isReadonly (obj), isReadonly (readonlyObj))

ToRaw

Returns the original object of reactive or readonly proxy

Const xt = {}

Const xy = reactive (xt)

Console.log ("toRaw=== >", toRaw (xy) = = xt) / / true

MarkRaw

Mark an object so that it is never converted to an proxy responsive object:

Const foo = markRaw ({})

Console.log (isReactive (reactive (foo) / / false

ShallowReactive

Create a responsive proxy that tracks the responsiveness of its own property, but does not perform a deep responsive transformation of nested objects (exposing the original values).

Const state = shallowReactive ({

Foo: 1

Nested: {

Bar: 2

}

})

/ / the nature of changing the state itself is responsive.

State.foo++

/ /... But do not convert nested objects

IsReactive (state.nested) / / false

State.nested.bar++ / / non-responsive

ShallowReadonly

Create a proxy that makes its own property read-only, but does not perform a deep read-only conversion of nested objects (exposing the original value).

Const state = shallowReadonly ({

Foo: 1

Nested: {

Bar: 2

}

})

/ / property that changes the state itself will fail

State.foo++

/ /... Can be applied to nested objects

IsReadonly (state.nested) / / false

State.nested.bar++ / / applicable

The above is about the content of the article "Vue3 responsiveness basic API case Analysis". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.