Talk about options in Vue in detail

Options options in Vue

Five types of properties of options

• Data: data, props, propsdata, computed, methods, watch
• DON: el，template，render，rebderError
• Lifecycle hook functions: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed, erroCaptured.
• Resources: directives, filters, components
• Combination: parent, mxins, extends, provide, inject

Beginner Properties

• el (hang at point)

new Vue({
    el："#app"
    template:`<div>I'm Xiao Ming</div>`
})
Available$mountreplace
new Vue({
    template:`<div>I'm Xiao Ming</div>`
}).$mount("#app")

• data (internal data) supports objects and functions, and uses functions first.
  • Will be monitored by Vue
  • Will be proxyed by Vue instance
  • Every time data is read and written, it will be listened to by Vue.
  • Vue will change in data to update the UI

Object
new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }
}).$mount('#app')
function
vue非完整版只支持function
new Vue({
    template:"<div>{{n}}</div>",
    data(){
        return {
            m:5
        }
    }
})$mount('#app')

• methods (method) event handling function or normal function

new Vue({
    template:"<div>{{n}}{{ add()}} <button @click="add">Button</button></div>",
    data:{
        n:0
    },
    methods:{
        add(){
    	('I can be an event handler or a normal function')
}
        }
}).$mount('#app')

• Components (vue component: pay attention to case) three ways

Register global components
('Deon1', {
  template: "<h2>Global Component</h2>"
})
Register local components
const deon2 = {
  template: "&lt;h2&gt;Local components {{n}}&lt;/h2&gt;",
   //In the creation of data, function must be used  data() {
    return {
      n: "Xiao Ming"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3:{
      template:"<h2>Component 3</h3>"
  }
  },
  template: `
    &lt;div&gt;page
    &lt;Deon1&gt;&lt;/Deon1&gt;
    &lt;Deon2&gt;&lt;/Deon2&gt;
 	&lt;Deon3&gt;&lt;/Deon3&gt;
    &lt;/div&gt; 
  `
}).$mount('#app')

Add components using vue file

document

<template>
  <div>I'm a file{{ name }}</div>
</template>
<script>
export default {
  data() {
    name: "Component 4";
  },
};
</script>
<style scoped>
div {
  border: 1px solid red;
}
</style>

import Deon4 from './'
('Deon1', {
  template: "<h2>Global Component</h2>"
})
const deon2 = {
  template: "&lt;h2&gt;Local components {{n}}&lt;/h2&gt;",
  //In the creation of data, function must be used  data() {
    return {
      n: "Xiao Ming"
    }
  }
}
new Vue({
  components: {
    Deon2: deon2,
    Deon3: {
      template: "<h2>Component 3</h3>"
    },
    Deon4
  },
  template: `
    &lt;div&gt;page
    &lt;Deon1&gt;&lt;/Deon1&gt;
    &lt;Deon2&gt;&lt;/Deon2&gt;
    &lt;Deon3&gt;&lt;/Deon3&gt;
    &lt;Deon4&gt;&lt;Deon4&gt;
    &lt;/div&gt; 
  `
}).$mount('#app')

• Four commonly used life cycle hook functions
  • created: The instance appears in memory
  • mounted: The instance appears on the page and triggers
  • updated: The instance has changed and triggered
  • destroyed: The instance was destroyed triggered

new Vue({
    template:"<div>{{n}}</div>",
    data:{
        n:0
    }，
     created() {
    ("The instance appears in memory and triggers");
  },
  mounted() {
    ("The instance appears on the page to fire");
  },
  updated() {
    ("The instance has changed triggered");
  },
  destroyed() {
    ("The instance was destroyed and triggered");
  }
}).$mount('#app')

• props (external data) Parent component wants child group to pass values
  • name="n" (pass in string)
  • :name="n" (incoming data)
  • :fn="add": (passed in function)

new Vue({
  components: {
    Deon1: {
      props: ["m"],
      template: "<div>{{m}}</div>"
    }
  },
  template: `<div><Deon1 :m="m"></Deon1></div>`,
  data: {
    m: 666
  }
}).$mount('#app')

computed (calculated attribute)

• No need to add brackets
• It will cache based on whether the dependency changes (if the dependency does not change, it will not be re-closed)
• type：{ [key: string]: Function | { get: Function, set: Function } }

use

• The calculated attribute is the calculation data
• Example 1Username display
• Example 2List display

cache

• If the dependency attribute does not change, the change will not be recalculated
• Getter/setter will not be cached by default, Vue has done special processing
• How to cache? lookExampleThis is an example not an implementation of Vue

Example：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // Read only    aDouble: function () {
      return  * 2
    },
    // Read and set    aPlus: {
      get: function () {
        return  + 1
      },
      set: function (v) {
         = v - 1
      }
    }
  }
})
   // => 2
 = 3
       // => 2
 // => 4

Watch (listening)

• The data changes, and the function will be executed
• usage
• This.$watch usage
• deep: The property of the listening object is called when it changes, no matter how deep it is nested
• immediate: It is called immediately after listening starts
• type：{ [key: string]: string | Function | Object | Array }

use

• Execute a function when the data changes
• Example 1Revoke
• Example 2Simulation computedThis is stupid, usually not

What is change

• lookExample

Originally let obj = {a:'a'} Now obj={a:'a'} Please ask
Obj has changed?
See simple types, see complex types (objects) addresses
This is actually the rule of ===

Example：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      ('new: %s, old: %s', val, oldVal)
    },
    // Method name    b: 'someMethod',
    // This callback will be called when the property of any listened object changes, no matter how deep it is nested    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true//Is the monitoring deep    },
    // The callback will be called immediately after listening starts    d: {
      handler: 'someMethod',
      immediate: true
    },
    // You can pass in the callback array, they will be called one by one    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch 's value: {g: 5}
    '': function (val, oldVal) { /* ... */ }
  }
})
 = 2 // => new: 2, old: 1

Notice,The watcher function should not be defined using arrow functions(For examplesearchQuery: newValue => (newValue)). The reason is that the arrow function binds the context of the parent scope, so this will not point to the Vue instance as expected.Will be undefined

deep: What does true do?

• If it changes, is the object considered change?

• If the answer you need is (not changed), then use deep: true

• If the required answer is (not changed), then use deep: false

• Deep means whether you look deep when listening to the object

Difference between computered and watch

computed compute attribute

• computed is a calculation property, that is, data obtained through calculation based on a certain value or props;
• The value of computed is cached after the getter is executed. Only when the data it depends on changes, getter will be called again for calculation;
• Asynchronous does not support it. It is invalid when there is an asynchronous operation in computed and cannot monitor data changes.
• No need to add brackets when calling

watch listener

• watch is a listener that can listen to a certain data and then perform corresponding operations;
• Caching is not supported, data changes will directly trigger the corresponding operation;
• The listened function receives two parameters, the first parameter is the latest value; the second parameter is the input previous value;
• Supports asynchronous operations;
• deep option: The property of the listened object is called when it changes, no matter how deep it is nested
• immediate: When true, it is called immediately after listening starts

Summarize

This is the end of this article about the options in Vue. For more related Vue options, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!