Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use Object.freeze () in vue to optimize data". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to optimize data with Object.freeze () in vue".

The translation of freeze into Chinese means to freeze. Object.freeze () is a new feature of ES5 that can freeze an object, which prevents the modification of existing properties and means that the response system can no longer track changes.

Let's look at his definition.

The Object.freeze () method can freeze an object. Freezing means that you cannot add new properties to the object, modify the value of its existing properties, delete existing properties, and modify the enumerability, configurability, and writability of existing properties of the object. This method returns the frozen object.

Vue1.0.18+ provides support for it, and vue does not convert getter to setter for objects frozen with freeze in data or vuex.

Usually we need a property, but at first it is empty or does not exist, then you only need to set some initial values. For example:

Data: {newTodoText:', visitCount: 0, hideCompletedTodos: false, todos: [], error: null} Object.freeze () what is the meaning of the existence (application scenario)?

If you have a large array or Object and are sure that the data will not be modified, using Object.freeze () can greatly improve performance. In my actual development, this increase is about 5 to 10 times, and the multiple increases with the amount of data.

For the pure display of big data, you can use Object.freeze to improve performance.

Object.freeze () freezes values, and you can still replace references to variables.

For example, {{item.value}}

New Vue ({data: {/ vue will not getter the object in list, setter binding list: Object.freeze ([{value: 1}, {value: 2}])}, created () {/ / interface will not have a response this.list [0] .value = 100 / / in the following two ways, the interface will respond with this.list = [{value: 100}, {value: 200}]; this.list = Object.freeze ([{value: 100}, {value: 200}]) }}) after looking at some examples of others, freeze object var obj = {prop: function () {}, foo: 'bar'}; / / New attributes will be added, existing attributes may / / be modified or removed obj.foo =' baz';obj.lumpy = 'woof';delete obj.prop / / both the object passed as a parameter and the returned object are frozen / / so there is no need to save the returned object (because the two objects are congruent) var o = Object.freeze (obj); o = obj; / / trueObject.isFrozen (obj); / / = = true// any changes will now expire obj.foo = 'quux'; / / silently do nothing / / silently do not add this property obj.quaxxor =' the friendly duck' / / in strict mode, this behavior throws TypeErrorsfunction fail () {'use strict'; obj.foo =' sparky'; / / throws a TypeError delete obj.quaxxor; / / returns true, because the quaxxor attribute has never been added obj.sparky = 'arf'; / / throws a TypeError} fail () / / attempt to change the property through Object.defineProperty / / the following two statements throw TypeError.Object.defineProperty (obj, 'ohai', {value: 17}); Object.defineProperty (obj,' foo', {value: 'eit'}) / / you cannot change the prototype / / the following two statements throw TypeError.Object.setPrototypeOf (obj, {x: 20}) obj.__proto__ = {x: 20} / / the frozen object is immutable. But that's not always the case. The following example shows that the frozen object is not a constant object (shallow freeze). Obj1 = {internal: {}}; Object.freeze (obj1); obj1.internal.a = 'aValue';obj1.internal.a / /' aValue'// for a constant object, the entire reference graph (direct and indirect references to other objects) can only reference immutable frozen objects. Frozen objects are considered immutable because the entire object state (values and references to other objects) in the entire object is fixed. Note that strings, numbers, and Boolean are always immutable, while functions and arrays are objects. / / to make an object immutable, you need to recursively freeze the properties of each type of object (deep freeze). When you know that the object does not contain any rings (circular references) in the reference diagram, the pattern will be used one by one according to your design, otherwise an infinite loop will be triggered. The enhancement to deepFreeze () will be an internal function with a receive path (such as Array) parameter, so that deepFreeze () can be called recursively when the object enters the constant. You still have the risk of freezing objects that should not be frozen. / / Deep freeze function. Function deepFreeze (obj) {/ / retrieve the property name var propNames = Object.getOwnPropertyNames (obj) defined on obj; / / freeze the property propNames.forEach (function (name) {var prop = obj [name] before freezing itself / / if prop is an object, freeze it if (typeof prop = = 'object' & & prop! = = null) deepFreeze (prop); / / freeze itself (no-op if already frozen) return Object.freeze (obj);} obj2 = {internal: {}; deepFreeze (obj2); obj2.internal.a =' anotherValue';obj2.internal.a / / undefined persistent freezing method var constantize = (obj) = > {Object.freeze (obj); Object.keys (obj). ForEach ((key, I) = > {if (typeof obj [key] = 'object') {contantize (obj [key]);}); freezing array let a = [0]; Object.freeze (a) / / now the array cannot be modified. A [0] = 1; / / fails silentlya.push (2); / / fails silently// In strict mode such attempts will throw TypeErrorsfunction fail () {"use strict" a [0] = 1; a.push (2);} fail () Thank you for your reading, the above is the content of "how to use Object.freeze () in vue to optimize data". After the study of this article, I believe you have a deeper understanding of how to use Object.freeze () in vue to optimize data, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.