vue 计算属性和侦听器的使用小结

1. 计算属性和侦听器

1.1 计算属性

!DOCTYPE htML>
    html>
      head>
        meta charset="utf-8">
           script src="https://cdn.statiCFile.org/vue/2.4.2/vue.min.js">
    /script>
      /head>
      body>
        div id="app">
    			p>
{
{
 message }
}
    /p>
    			p>
{
{
 reversedMessage }
}
    /p>
        /div>
        script>
      new Vue({
        el: '#app',        data: {
					message: 'hello'        }
,				computed: {
										reversedMessage: function () {
						return this.message.splIT('').reverse().join('')					}
					/*					// 相当于					reversedMessage: {
						get(){
							return this.message.split('').reverse().join('')						}
					}
					*/				}
      }
    );
        /script>
      /body>
    /html>
    

解释：我们在属性computed中定义了计算属性reversedMessage，这里提供的函数将作为计算属性reversedMessage的getter函数。

1.2 setter

计算属性默认只有getter，不过我们可以提供一个setter。

!DOCTYPE html>
    html>
      head>
        meta charset="utf-8">
           script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
      /head>
      body>
        div id="app">
    			p>
{
{
 message }
}
    /p>
    			p>
{
{
 reversedMessage }
}
    /p>
    			input type="text" v-model="reversedMessage" />
        /div>
        script>
      new Vue({
        el: '#app',        data: {
					message: 'hello'        }
,				computed: {
					reversedMessage: {
						get(){
							return this.message.split('').reverse().join('')						}
,						set(value){
							this.message = value.split('').reverse().join('')						}
					}
				}
      }
    );
        /script>
      /body>
    /html>
    

1.3 缓存

!DOCTYPE html>
    html>
      head>
        meta charset="utf-8">
           script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
      /head>
      body>
        div id="app">
    			p>
{
{
 message }
}
    /p>
    			p>
{
{
 reversedMessage }
}
    /p>
    			p>
{
{
 reversedMessage1() }
}
    /p>
        /div>
        script>
      new Vue({
        el: '#app',        data: {
					message: 'hello'        }
,				methods: {
					reversedMessage1: function(){
						return this.message.split('').reverse().join('')					}
				}
,				computed: {
										reversedMessage: function () {
						return this.message.split('').reverse().join('')					}
				}
      }
    );
        /script>
      /body>
    /html>
    

注意：虽然通过计算属性和方法，都可以达到同样的效果，但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

1.4 侦听属性

通过vue实例的watch属性可以侦听数据的变化。

!DOCTYPE html>
    html>
      head>
        meta charset="utf-8">
           script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
      /head>
      body>
        div id="app">
    			p>
{
{
 message }
}
    /p>
    			button @click="reverse=!reverse">
    反转/button>
        /div>
        script>
      new Vue({
        el: '#app',        data: {
					message: 'Vue',					reverse: false        }
,				watch: {
					// message: function(newVal, oldVal){
					reverse: function(newVal){
						console.LOG(newVal)						this.message = this.message.split('').reverse().join('')					}
				}
,      }
    );
        /script>
      /body>
    /html>
    

我们可以通过实例属性vm.$watch达到同样的效果。

!DOCTYPE html>
    html>
      head>
        meta charset="utf-8">
           script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
      /head>
      body>
        div id="app">
    			p>
{
{
 message }
}
    /p>
    			button @click="reverse=!reverse">
    反转/button>
        /div>
        script>
      VAR vm = new Vue({
        el: '#app',        data: {
					message: 'Vue',					reverse: false        }
      }
    );
						// vm.$watch('reverse', function (newVal, oldVal) {
			vm.$watch('reverse', function (newVal) {
				console.log(newVal)				this.message = this.message.split('').reverse().join('')			}
    );
        /script>
      /body>
    /html>
    

以上就是vue 计算属性和侦听器的使用小结的详细内容，更多关于vue 计算属性和侦听器的资料请关注其它相关文章！

• vue3.0中的watch侦听器实例详解
• Vue2和Vue3如何使用watch侦听器详解
• Vue中侦听器的基本用法示例
• 解决vue侦听器watch,调用this时出现undefined的问题
• Vue学习笔记之计算属性与侦听器用法
• Vue 2.0 侦听器 watch属性代码详解
• Vue基础之侦听器详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！