HTML import CDN error

const Vue =window.Vue

The file name is in lowercase and the component name is in uppercase

The file name prevents the computer system from being case insensitive, and the component name prevents conflicts with the native label

Data A data responsive process

Es6 Geter setters (unbracketed functions)

letObj2 = {name:"High"The name:"Yuan yuan", get name (){return thisThe last name +thisThe name}}console.log (obj. Name)/ / gao
Copy the code
  • Object and you want to add a get set

Obj.defineProperty (Virtual attribute)

var _age=0
Obj.definePropertty(obj2,'age', {get(){
    return this._age
  },
  set(value){
    return this._age=value
  }
})
Copy the code

The proxy agent

let myData={n:0}

let data = proxy({data:myData})

function proxy(x){
  const {data} = x //const data = x.data
  
  let value =data.n
  delate data // Delete immediately to prevent changes!
  Object.defineProperty(data,'n', {get(){
      return value
    },
    set(newValue){
      if(newValue<0)return 
      value =newValue
    }
  }) / / to monitor data
  
  const obj={}
  Object.defineProperty(obj,'n', {get(){
      return data.n
    },
    set(value){
      if(value<0)return
      data.n=value
    }
  })
  
  return obj // obj is the proxy
}
Copy the code

There is no write data in data to add

Vue. Set and enclosing $set

  • role
  1. The new key
  2. Automatically create agents and listeners (if not already created)
  3. Trigger UI update (but not immediately)
  • For example,
// This is the vm proxy's (data)
this.$set(this.object,'m'.100)
Copy the code

Array mutation method (automatically help you set)

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
class VueArray extends Array{
  push(..args){
    const oldLength =this.length //this is the current array
    super.push(... args)for(leti=oldLength; i<this.length; i++){ Vue.set(this,i,this[i])
    }
  }
}
Copy the code

computed

  • Properties used for computation
  • Update the results based on changes in the variables passed in
  • Variables are not defined in data, they’re defined in computed, and writing it like writing it has a return value. The function name is rendered directly in the page template, without parentheses
  • Caching based on reactive dependencies. If any of its values have not changed, it calls the data cached last time, thus improving the performance of the program. However, methods will recalculate every time it is called. In order to consume unnecessary resources, the calculated attribute is selected

watch

  • Listen for a property and execute a function when the property changes
  • The watch is triggered when something changes
  • Simple types look at values, complex types (objects) look at addresses
  • You can use Watch when you have some data that needs to change as other data changes, or when you need to perform asynchronous or expensive operations when data changes

grammar

grammar1
watch: {o1:() = >{}, // Do not use the arrow function, this refers to the global object
  o2:funtion(value,oldValue){}, // The values of n before and after the change
  o3(){},
  o4:[f1,f2] // execute f1 and f2,
  o5:'methodName'.//method
  o6: {handlder:fn,deep:true.immediate:true},
  'object.a':function(){} // Attributes in the object} syntax2
vm.$watch('xxx',fn,{deep:.. .immediate:.. })Copy the code

Deep: true,

  • Listen to the inner layer of the object, as long as the data inside the change to listen to
  • Example: Object. When a changes, object changes
  • False is the

immediate:true

  • Listen on the first render