前端学习——VUE计算属性和侦听器

一 计算属性

模板内可以使用表达式进行计算，比如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

所以对于计算逻辑，可以使用计算

1.1 基础例子

可以看到，在data中，并没有声明reversedMessage，使用时以函数{{ reversedMessage() }}方式进行调用，但是在却可以用其进行文本插值。
计算属：我们在computed计算属性中声明的数据，每次调用时，会查看他的响应式依赖

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

1.2 计算属性缓存 vs 方法

我们也可以通过调用方法来达到同样的效果，如下：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

Q：下面的now值会更新吗？

computed: {
  now: function () {
    return Date.now()
  }
}

演示：

<div id="app">
	<p>msg: {{msg}}</p>
	<p>reverseMsg: {{reversedMsg}}</p>
	<p>computedNow: {{computedNow}}</p>
	<p>functionNow: {{ getNow() }}</p>
	<button @click="changeMsg">click_change_msg</button>
</div>

var vm = new Vue({
	el : "#app",
	data : {
		msg : "msg"
	},
	computed:{
		reversedMsg:function(){
			return this.msg.split('').reverse().join('');
		},
		computedNow:function(){
			return new Date().toLocaleString();
		}
	},
	methods:{
		getNow:function(){
			return new Date().toLocaleString();
		},
		changeMsg:function(){
			vm.$data.msg+="_1"
		}
		
	}
});

1.3 计算属性 vs 侦听属性

我们在之前的文章中学习过VUE实例属性与方法

vm.$data === var_data; // => true

vm.$el === document.getElementById('example') // => true

vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

VUE实例中的el和data属性都已经展示过，watch则是侦听属性。如下例中，firstName和lastName将被监听：

<div id="app">
	<p>姓: {{firstName}}</p>
	<p>名: {{secondName}}</p>
	<p>姓名: {{fullName}}</p>
	<button @click="changeSecondName">click</button>
</div>

var vm = new Vue({
	el : "#app",
	data : {
		firstName : "Wu",
		secondName : "Bingyu",
		fullName : "WuBingyu"
	},
	computed:{

	},
	methods:{
		changeSecondName:function(){
			this.secondName = new Date().toLocaleString();
		}
	},
	watch:{
		secondName:function(val){
			this.fullName = this.firstName + val;
		}
	}
});

但是在这种情况下，假如firstName也需要改变，则就需要两个watch里的函数来监听。若使用计算属性，就可以解决这个问题：
因为声明在computed中的fullName，调用时会判断他的响应式依赖，从而实现响应式更新

var vm = new Vue({
	el : "#app",
	data : {
		firstName : "Wu",
		secondName : "Bingyu",
	},
	computed:{
		fullName: function () {
		  return this.firstName + ' ' + this.secondName
		}
	},
	methods:{
		changeSecondName:function(){
			this.secondName = new Date().toLocaleString();
		}
	}
});

1.4 计算属性的setter

计算属性默认只有getter，setter需要显示声明。setter可以用来更新他的响应式依赖，如下：

<div id="app">
	<p>姓: {{firstName}}</p>
	<p>名: {{secondName}}</p>
	<p>姓名: {{fullName}}</p>
	<button @click="changeSecondName">changeFullName = Wu1 秉yu</button>
</div>

var vm = new Vue({
	el : "#app",
	data : {
		firstName : "Wu",
		secondName : "Bingyu",
	},
	computed: {
	  fullName: {
		// getter
		get: function () {
		  return this.firstName + ' ' + this.secondName
		},
		// setter
		set: function (newValue) {
		  var names = newValue.split(' ')
		  this.firstName = names[0]
		  this.secondName = names[names.length - 1]
		}
	  }
	},
	methods:{
		changeSecondName:function(){
			this.fullName = "Wu1 秉yu";
		}
	}
});

二 侦听器

侦听器可以设置中间状态、执行异步操作

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

引入js文件

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      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
        })
    }
  }
})

#疑问

Javascript怎么引用其他的js文件？