Frame-level data request

axios (third-party libraries - others packaged library)
fetch (javascript native in)
Vue development side of the requested data

vue-resource (Vue request library before his package used), but the author has given vue-resource updated
vue-resource authors recommend that we use axios
vue-resource usage and 90% similarity axios +
vue2.0 we basically use are fetch / axios
vue-resource is the jsonp
vue-resource if used in vue, the present example is mounted (component) $ HTTP attributes body
- For example this. $http( options ) this.$ http.get() this.$http.post

axios and fetch the requested data type is not jsonp

axios and fetch all promise
axios result we will once again requests the package (make safety improvement)
Case:

  new Vue({
    el: '#app',
    methods: {
      getData () {
        //进行get请求
        // axios.get()    -- $.get()
        // axios.post()    ---$.post()
        // axios(options)      -- $.ajax(options)

        // var p = axios({
        //   url: './data/data.json'
        // })

        // console.log( p )  Promise对象

        axios({
          url: './data/data.json',
          method: 'get',//默认就是get请求
        })
          .then( res => console.log( res ))
          .catch( error => conosle.log( error ))


      },
      postData () {
        // 进行post请求
      },
      get_myself_php_data () {
        axios({
          url: 'http://localhost/get.php',
          params: {
            a: 1,
            b: 2
          }
        })
          .then( res => console.log( res ))
          .catch( error => console.log( error ))
      },
      get_be_data () {
        // 跨域请求线上数据 - 卖座
        axios({
          url: 'https://m.maizuo.com/gateway',
          headers: {
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154549400038873748996477"}',
            'X-Host': 'mall.film-ticket.film.list'
          },
          params: {
            cityId: 330100,
            pageNum: 1,
            pageSize: 10,
            type: 1,
            k: 7675918
          }
        })  
          .then( res => console.log( res ))
          .catch( error => console.log( error ))

      }
    }
  })

in the post request axios

    var params = new URLSearchParams() //得到params对象，用来接收参数
    // params.append( key, value )  key就是参数名，value就是参数值
    params.append( 'a', 2 )
    params.append( 'b', 2 )
    axios({
      url: 'http://localhost/post.php',
      method: 'post',
      headers: {
        'Content-Type': "application/x-www-form-urlencoded" //请求头设置为表单提交的请求头
      },
      data: params
    })
      .then( res => console.log( res ))
      .catch( error => console.log( error ))

To fetch a manual data formatting, but axios data is internally formatted
Method fetch get request data, parameters to be directly connected to the url
There are three format data fetch processing method
- .json () json format type data, converts json string type objects into json
- .text () formatted text
- .blob () formatted binary data
If you write post fetch request, there are pit, carrying data according to the official website of the document there is a problem
fetch post processing
- Setting request header
- To carry the parameters new URLSearchPrams

----------------------------- listener attributes watch ----------------- ----------

watch

effect

Defined in the data used to monitor data, when the data defined in the data changes, then watch the key will trigger
the object is a watch
watch: {}
You can watch a plurality of types of keys

Use (Key)

method

  watch: {
    fn () {}
  }

Object: (depth monitor)

 watch: {
   fn: {
     handler(){},
     deep: true
   }
 }

Computed Property

Use

Inside storage method

  computed: {
    fn () {
      return ''   //必须要有返回值
    }
  }

Objects inside the store

  computed: {
    newName: {
      get () {
        return '' //get里面要有return
      },
      set ( val ) { //val就是修改后的值

      }
    }
  }

NOTE: The above get, set us unify a name called: memory, others called getter / setter
Both get set, there is a subject, and there was the class
get set is to calculate the properties of this understanding is wrong

watch vs computed

watch is used to monitor certain data, when data is changed, it will automatically trigger the watch, then we can make some tasks
is computed in order to expose a global variable, the global variable is generated by a certain logic
When selected watch? What is the choice computed? When selecting methods?

Large amount of data, and we choose to watch asynchronous operation scenarios: on Raja load, pull down to refresh
computd use two meet on it
- Exposure to a similar global variable data
- Logic may be processed
methods of use: Event Program program (user interaction)

------------------------------------------------ mixed mixins --------------------------------------------------

mixins

Actual Meaning: the option component pulled out and managed separately, multiplexed

There are two forms
- Local mixed
- Global mixed

principle

Data-driven
when data has changed, the view will be updated, this is called data-driven, that is, data-driven view
Principle deeply responsive
data model is just plain JavaScript objects. And when you modify them, the view will be updated
Two-way data binding principles
when we use the v-model command bound form elements, then we can get the data directly in view, when the view changes, the data will be updated

To sum up: three are applied to the same underlying principle, the underlying principle is provided by the Object.defineProperty property es5

vue achieve underlying principle is mainly dependent memory (getter / setter)
We use the data hijacking and publish events Subscribe to implement two-way data binding, when we define data vue data options, vue will pass observer objects (observer) the data of all the options key, after the Object.defineProperty getter and setter set, when we bind elements by v-model instruction is triggered automatically getter, getter returns an initial value, so that we can see the data in the view, the view when content changes, will trigger setter, setter notifies VUE, the view has been updated, the virtual VUE regenerates the DOM, and then by comparing the old and new virtual the DOM, the object to generate patch, then the patch corresponds to the view rendered

Vue.set / this. $ Set of principles (subscript and does not respond to the array length)

Bottom: Object.assign