Vue. Js data

Vue.js data synchronization

For the vue.js framework programming, when a new Vue instance object is created, it adds all property properties from the data object to the responsive system of the vue.js framework. The most immediate effect of this action is that the view “responds” when the property values change — that is, updates to the newly matched property values.

Vue.js data is frozen

The vue.js data “synchronous update” feature is useful and the page rendering is amazing. However, we don’t always need all the data to be updated synchronously. The vue.js framework defines a “freeze” method for data objects, which can prevent property properties from being updated synchronously. Object.freeze() prevents modifications to existing property properties, which means that the vue.js view response system cannot track property changes

Application scenario: If you have a large array or Object and you are sure that the data will not change, using object.freeze () can give you a big performance boost. In my actual development, the improvement is about 5 to 10 times, and the multiples increase with the amount of data,

You can use Object.Freeze to improve performance for all big data that is purely presentable.

Object.freeze() What’s the point of freezing an Object? The object.freeze () method can freeze an Object. A frozen Object can no longer be modified

  • New properties cannot be added
  • An existing attribute cannot be deleted
  • You cannot modify the enumerability, configurability, or writability of an existing attribute
  • You cannot modify the value of an existing attribute
  • You can’t modify the prototype

Example: juejin.cn/post/684490…

Vue. Js instance property property

In addition to the Vue data property attribute, the vue.js framework also defines the very useful concept of “Vue instance property attribute”. Note that the “$” sign must be added to use this function, mainly to distinguish it from user-defined data property attributes.

<script>
        var oNum = {
            n: 1
        };

        var vm = new Vue({
            el: '#id-div-number',
            data: {
                dNum: oNum
            }
        })
         
        // console.log(vm.$el);
        // console.log(vm.$data.dNum.n); 
    </script>
Copy the code

Vue. Js method

Observation attribute method

The vue.js framework designs a $watch method to “see” whether attributes on a Vue instance have changed. Here, the property change can be a change in the property expression, or a slightly more complex change in the result of a function calculation. If the $watch method sees a change, it takes a callback function to take two arguments, representing the new value after the change and the old value before the change.

$watch method basic syntax format

Grammar: vm. $watch (expOrFn, callback, [options]) parameter description: {string | Function} expOrFn {Function | Object} callback return values: {Function} unwatch // Returns an unwatch Function that stops firing callbacksCopy the code

Example:

<div id="id-div-counter"> Current counter is&nbsp; &nbsp; &nbsp; &nbsp; <b>{{ counter }}</b>. </div> <br> <div> Click "Start Watch" to start watch & add counter: <input type="button" id='id-btn-start-watch' value='Start Watch' onclick="onBtnStartWatch(this.id)" /><br><br> Click "Cancel Watch" to stop watch: <input type="button" id='id-btn-cancel-watch' value='Cancel Watch' onclick="onBtnCancelWatch(this.id)" /><br><br> </div>  <script> // define Vue entry var vm = new Vue({ el: '#id-div-counter', data: { counter: Var thewatch= vm.$watch('counter', function(newVal)) $watch('counter', function(newVal)) oldVal) { console.log("counter from " + oldVal + " turns to " + newVal + "."); }) // start watch function onBtnStartWatch(thisid) { vm.$data.counter += 1; console.log('counter = ' + vm.$data.counter); } function onBtnCancelWatch(thisid) {thewatch(); } </script>Copy the code

Event-triggered method

The vue.js framework designs a $EMIT event firing method for events defined on a Vue instance. $EMIT method basic syntax format

$emit(eventName, [...args]) parameter description: {string} eventName // eventName [...args] // additional parametersCopy the code

Custom event methods

The vue.js framework also designs a set of custom event firing methods ($on and $once) to trigger user-defined events on the Vue instance. The $once method can only fire once, while the $on method has no limit on the number of times it can fire.

$on basic syntax format

Syntax: vm. $on (event callback) parameter description: {string | Array < string >} event / / Array only support in the version 2.2.0 + {Function} callback / / callback FunctionCopy the code

A similar $once custom event is defined in the vue.js framework. The difference between the two is the number of times a $once event can be triggered only once. $once Basic syntax format

$once(event,callback) parameter description: {string} event {Function} callback // Callback FunctionCopy the code

Vue.js Life cycle

The vue.js lifecycle is the core foundation for creating vue.js applications

Vue.js Life cycle diagram

In the vue.js application, each Vue instance is created (new Vue()) through a series of initialization procedures, such as setting up the data listener, compiling the template, mounting the instance to the DOM, and updating the DOM when the data changes. Generally, this process is referred to as the “life cycle” of an application in a front-end application framework. At the same time, a set of related process methods (in the form of callbacks) are defined at different stages of process evolution during the “lifecycle” of a Vue application. The front-end framework refers to this set of procedure methods as “lifecycle hook functions,” which give users the opportunity to add custom code to these callbacks. Thus, these “lifecycle hook functions” are similar to callbacks in event methods, but only meaningful if they exist in the “lifecycle” of the front-end framework.

Details of the “lifecycle” of the vue.js framework

As shown in the figure, the “life cycle” of the Vue instance begins with the creation (” new Vue() “). Here are some of the most common life cycle phases:

  • BeforeCreate: called after Vue instance initialization and before data Observer and Event watcher event configuration.

    Initialize some default declared periodic functions and default events. In this case, the data in data and methods is not initialized

  • Created: called immediately after the Vue instance is created.

    The data in both data and methods is initialized

  • BrforeMount: called before the Vue instance mount begins, when the relevant render function is first called.

    <div id= "app" >{{MSG}} </div> -> generate a compiled final template string in memory -> render the template string as a DOM in memory

Note: Instead of mounting the template to the page, we render the template in memory.

{{MSG}}

  • Mounted: called after the Vue instance is mounted, this el has been replaced by the newly created VM.$el.

    The compiled template is actually transferred to the page

    < div id= "app" > < /div> < div id= "app" >{{MSG}} < /div

  • BeforeUpdate: called when data is updated, before the virtual DOM is patched.

    The data on the page is still old, but the data in the data is up to date, and the page and the latest data have not been saved

  • Updated: This hook function is called after the virtual DOM is rerendered and patched due to data changes.

    The data on the page and in data is up-to-date, and the page is synchronized with the latest data

  • Avtivated: called when a component cached by keep-alive is active.

  • Deactivated: called when a component in the keep-Alive cache is disabled.

  • BeforeDestroy: called before the Vue instance is destroyed, at which stage the Vue instance is still fully available.

    Before destroying, data and all methods on the instance, as well as filters, instructions... They're all in a usable state. They haven't actually been destroyed

  • Destroyed: called after the Vue instance is destroyed. When the hook function is called, all instructions for the Vue instance are unbound, all event listeners are removed, and all child instances are destroyed.

    Destroy, data and all methods on the instance, as well as filters, instructions... Are both unavailable

<script>
  // define Vue entry
  var vm = new Vue({
      el: '#id-div-vue-lifecycle',
      data: {
          msg: ''
      },
      beforeCreate: function() {
          // this.$data.msg += 'beforeCreate' + '<br/>';    //'msg' of undefined"
          console.log('Lifecycle hook --- beforeCreate.');
          console.log('$el: ' + this.$el);        //$el: undefined
          console.log('$data: ' + this.$data);    //$data: undefined
      },
      created: function() {
          // this.$data.msg += 'created' + '<br/>';
          console.log('Lifecycle hook --- created.');
          console.log('$el: ' + this.$el);              //$el: undefined
          console.log('$data: ' + this.$data);          //$data: [object Object]
      },
</script>            
Copy the code

Vue life cycle Service applications in real scenarios

  • BeforeCreate can add some loading effect at this time, and remove at created
  • Created: Ajax requests asynchronous data to obtain and initialize data
  • Mounted Is executed when the DOM needs to be manipulated. It can be used in conjunction with $. NextTick to update the DOM after a single event
  • Updated: Any data updated, if unified business logic processing
  • Watch: Monitor specific data changes and handle them accordingly