In the previous article, we talked about data binding of vue, but the data generated by data is static data. If you need to modify it, you need to use this.xxx = xx to modify it explicitly in the code, but not automatically.

The data source of vue is not only data, but also several other kinds, which can be changed dynamically.

props

The data stream of vue is one-way from top to bottom, which is transmitted through props. For example:

child.vue:

<template>
  <p>{{message1}}</p>
  <p>{{message2}}</p>
</template>
<script>
  export default {
    name: 'child',
    props: {
      message1: String,
      message2: {
        type: String,
        default: 'default message'
      }
    }
  }
</script>

parent.vue:

<template>
  Child(:message1="data1", :message2="data2")
</template>

<script>
  import Child from 'child'
  export default {
    name: 'child',
    components: {
      Child
    },
    data () {
      return {
        data1: '123',
        data2: '321'
      }
    }
  }
</script>

props can limit types or set default values, which can cause errors if incoming types do not match. When the data of the parent component is updated, the data of the child component is also updated.

Watched

vue can explicitly monitor the change of a data, trigger the listening function when the data changes, and pass in the new data as a parameter.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

When firstName and lastName are reassigned, two watch functions are triggered and fullname is reassigned. Of course, it is not recommended to implement simple assignment with watched, but instead with computed.

watched functions can be customized to implement functions, or even embedded asynchronous requests, which cannot be compared with computed. For example, one of the official websites Example

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // If the question changes, the function runs
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    // _ debounce is a function that restricts the operating frequency through lodash.
    // In this example, we want to limit the frequency of access to yesno.wtf/api
    // ajax requests are not sent until the user has finished typing
    // Learn more about. debounce function (and its cousin)
    // _ throttle), refer to: https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        var vm = this
        if (this.question.indexOf('?') === -1) {
          vm.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        vm.answer = 'Thinking...'
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // This is the number of milliseconds we stopped waiting for the user to enter
      500
    )
  }
})
</script>

computed

Official Documents

Expressions in templates are very convenient, but they are actually used only for simple operations. Placing too much logic in the template can make the template overweight and difficult to maintain. This can be achieved by calculating attributes.

The first example of watched above can be implemented with computer:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

It's obviously much better than watched. In addition, computed caches the results and clears the cache only when the dependencies change. If you don't want caching, you can use functions to perform calculations