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

This article mainly introduces the relevant knowledge of "how to use the optional chain call operator in Vue2". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use the optional chain call operator in Vue2" can help you solve the problem.

First, what is it?. (optional chain call operator)

Optional chain operator (?. Allows you to read the values of properties deep in the chain of connected objects without explicitly verifying that each reference in the chain is valid ?. The function of the operator is similar to. Chain operator, the difference is that it does not cause an error if the reference is nullish (null or undefined), and the expression short circuit returns a value of undefined. When used with a function call, returns undefined if the given function does not exist.

To put it simply, we usually use the "." operator to get an upgraded version of a value of an object. Prevent undefined when the previous value does not exist. Something is wrong.

Don't talk too much nonsense, just go to the code.

Let obj = {a: {b: {c: ['ice pier' Winter Olympic Games]} / / when we want to acquire "ice pier" / / if any of a, b, c does not exist, we will report an error / / the right thing to do is obj & & obj.a & obj.a.b & & obj.a.b.c & obj.a.b.c [0] / / ice pier / and adopt?. Operator obj?.a?.b?.c?. [0] / / Ice Pier

When we encounter deeply nested data structures in our work, we use & & to verify the existence of attributes. The code becomes very bloated. Readability and maintenance make the scalp numb. But use?. It is a lot more concise, and the readability is greatly improved.

2. Use problems in Vue2 template

When we learn a new skill and want to excel in the world of code, we find that it can be used in js in Vue2 environment. But an error was reported in template.

Cannot be properly identified in Vue2 template?. The operator may be because?. The optional chain syntax is relatively new and there is no handling of this aspect in template

Presumably none of you are ordinary people, since we can use it in js, let's solve this problem along the way.

III. Solutions

The _ get method in the third-party library lodash

Upgrade to vue3, currently vue3 becomes the default version Ecology tends to mature and template supports optional chain operators

Use?. In computed calculation properties.

Intercept and change the template source code. The code is too intrusive.

Write a hook and hang it on global/mixins to call it at any time.

After thinking about it for a while, only the last plan is the most reliable. Let's write our own first. Function

Let obj = {a: {b: {c: ['Ice Pier', 'Winter Olympic Games']} function variableJudge (obj, keyName, tag ='?.') {if (! obj) return undefined let keys = keyName.split (tag) return keys.reduce ((objNew, keyItem) = > {if (keyItem = =') return objNew if (keyItem.indexOf ('.)! =-1) return variableJudge1 (objNew, keyItem,'.') Return objNew?. [keyItem]}, obj)} / /-- Proxy version-function variableJudgeProxy (obj, tag ='?.') {if (! obj) return undefined return new Proxy (obj, {get: (obj) Key) = > {const keys = key.split (tag) return keys.reduce ((objNew, keyItem) = > {if (keyItem =') return objNew if (keyItem.indexOf ('.')! =-1) return variableJudgeProxy (objNew,'.) [keyItem] return objNew?. [keyItem]}, obj)}} console.log (variableJudge (obj) '? .a? .b? .c? .0') / / Ice Pier console.log (variableJudgeProxy (obj) ['? .a? .b? .c? .0']) / / Ice Pier

Wait wait wait since we are going to write our own?. Why does the function define that the keyName passed in contains?. Where is it?

Why not let keyName just be. Grammar and also have?. The function is not only in line with our development habits, but also meet our expectations, isn't it beautiful?

And we should reutrn directly if the previous value is undefined, but we can't interrupt it in advance with the reduce method.

So another version of the code was optimized.

Let obj = {a: {b: {c: ['Ice Pier', 'Winter Olympic Games']} const variableJudge = (obj, keyName) = > {if (! obj) return null let keys = (keyName +'). Split ('.) Let tempObj = obj for (let I = 0; I < keys.length; iTunes +) {if (! tempObj) return if (keys [I]! ='') tempObj = tempObj?. [Keys [I]]} return tempObj} console.log (variableJudge (obj, '.a.b.c.0')) / / Ice Pier

Then we hang it on the Vue prototype and we can use it at any time.

Vue.prototype.$vj = variableJudge

Let's look at how to use it in template

/ / omitting the bloated code is empty to judge whether it is a feast for the eyes {{$vj (ugc, '.itemList.item.picList.picList.1.picUrl')}} about "how to use the optional chain call operator in Vue2". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.