Vue中的methods、computed计算属性和watch监听属性的使用和区别

简介: Vue中的methods、computed计算属性和watch监听属性的使用和区别

在Vue中,methods、computed和watch是三种不同的方式来处理数据和响应数据变化的方法。

methods: methods是Vue实例的一个属性,可以定义一系列的方法,并通过调用这些方法来实现一些功能。methods中的方法可以接收参数,也可以调用其他方法。在模板中可以使用v-on指令来绑定methods中的方法。

例如,下面是一个methods的示例代码:

new Vue({
  data: {
    message: 'Hello World'
  },
  methods: {
    sayHello: function () {
      console.log(this.message)
    }
  }
})

在模板中,我们可以通过v-on:click来绑定methods中的方法:

<button v-on:click="sayHello">Click me</button>

computed: computed是Vue实例的一个属性,可以定义一些计算属性。computed中的属性会根据依赖的数据自动更新,只要依赖的数据发生改变,计算属性就会重新计算并返回新的值。computed属性是通过getter函数来实现的。

例如,下面是一个computed的示例代码:

new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在模板中,我们可以直接在插值表达式中使用computed属性:

<p>{{ reversedMessage }}</p>

watch: watch是Vue实例的一个属性,可以监听指定的数据变化,并在数据变化时执行指定的函数。watch可以监听一个或多个数据的变化,并可以执行一些异步操作。

例如,下面是一个watch的示例代码:

new Vue({
  data: {
    message: 'Hello World'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

在模板中,我们可以通过给data属性赋值来改变数据,并触发watch的监听函数:

<input v-model="message">

以上就是methods、computed和watch的使用和区别。methods主要用于绑定事件和实现一些功能的方法,computed主要用于计算属性,watch主要用于监听数据的变化并执行相应的操作。

相关文章
|
2天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
19 3
|
1天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
2天前
|
JavaScript
【vue】vue2 获取本地IP地址
【vue】vue2 获取本地IP地址
8 1
|
2天前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
12 1
|
2天前
|
JavaScript 前端开发
|
JavaScript
Vue -computed传参数
vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 &lt;input v-model="newItem(key,val)" type="text"/&gt; computed:{ newIt...
2980 0
|
2天前
|
JavaScript 前端开发 UED
Vue:为什么要使用v-cloak
Vue:为什么要使用v-cloak
|
2天前
|
JavaScript API
vue 侦听器
vue 侦听器
|
2天前
|
JavaScript
vue 传递 props
vue 传递 props
|
2天前
|
JavaScript
vue 组件注册
vue 组件注册