Common grammar

<div v-text='n+1' /> === {{n+1}}
<div v-html='x'/> // Display the contents in bold v-for="(value,key) in object or array" :key="key"// The key must be addedCopy the code

The difference between watch computed methods

Watch: {[key: string] : string | Function | Object | Array} is to monitor the data cache, watch is asynchronous, and generally focuses on performing a Function. You can’t use arrow functions in watch because this points to the window

Computed: {[key: string] : Function | {get: the Function, the set: the Function}} is calculate attribute, cache, focuses on the dependence between the changes and cache

methods:{ [key: string]: Function }

New Vue({data:{obj:{a:'a'}}} watch:{obj(){handler:{console.log('obj changed')} deep:true Obj will also change. It's basically listening for all the properties in OBj. }}).$mount(#app) $mount(#app)Copy the code
  • The biggest difference between computed and methods is that computed has caching: If the attributes that computed attributes depend on do not change, then computed attributes do not recalculate. Methods means seeing and calculating once.
  • Compare watch with computed, which computes a property (nonsense), and watch, which might do something else (such as report data)

Differences between computed and Watch:

  • Computed is a computing attribute, and watch is a listening attribute
  • No parentheses are required for computed calls, automatic == caching == based on dependencies, and computed properties are not recalculated if there is no change in computed property == dependent == properties.
  • Watch has two options: immediate, which indicates whether to perform the first rendering, and deep, which indicates whether to listen for attributes in the == object. If it changes, it will execute the function inside

Vue’s lifecycle hook function

  • beforeCreate
  • created
  • beforeMount
  • Mounted: Specifies that data is requested within this period
  • beforeUpdate
  • updated
  • beforeDestory
  • destoryed

Vue implements communication between components

  • Parent and child components: Communicate through events using V-Ons
    • The component cannot modify external data for props
    • $emit('update:value',value+1)Can trigger events and pass parameters
    • $eventYou can get$emitThe parameters of the
  • Father-grandson component: Use v-ON twice to realize father-grandson communication through father-grandfather communication and father-son communication
  • Any component: Use eventBus = new Vue() to communicate, eventBus.Emit is the primary API
  • Any component: Communicate using Vuex

Vue data responsive

  • This is the core idea behind vUE’s UI, which updates automatically when the user changes data
  • Use Object.defineProperty to turn all of these properties into getters/setters. Object. DefineProperty is not shim for ES5 (Shim can introduce a new API into an old environment and only implement it with existing means in the environment.) , so VUE does not support IE8 or later
  • Due to JavaScript limitations, Vue cannot detect the addition or deletion of object attributes. The solution is to manually call Vue. Set or this.$set. useVue.set(object, propertyName, value)Method to add a responsive property to a nested object.
  • Disadvantages: Cannot respond to some new attributes because it cannot be listened on. Vue3 solves this problem
  • Data: internal data, props: external data

Vue.set( target, propertyName/index, value )===this.$set

Function:

  1. The new key
  2. Automatically create agents and listeners
  3. Trigger UI update (but not immediately)

Example: this. $set (this obj, ‘b’, 100)

Add a property to the reactive object and make sure the new property is also reactive and triggers view updates. It must be used for adding a new property to reactive object, because the Vue cannot detect common new property (such as this. MyObject. NewProperty = ‘hi’)