2020-9-3 VUE计算属性与侦听器

tech2024-10-01  11

一、computed 与 methods 的区别

• computed 是属性调用,methods 是函数调用

• computed 带有缓存功能,而 methods 没有

下面我们来看例子:

<div id="app"> <div>{{ message }}</div> <div>{{ message.split('').reverse().join('') }}</div> <div>{{ reversedMessage }}</div> <div>{{ getReversedMessage() }}</div> <div>{{ fullname }}</div> </div> <script src="./vue.js"></script> <script> // 创建 Vue 实例,ViewModel const vm = new Vue({ el: '#app', // View data: { // Model 数据 message: 'Hello Vue.js', firstname: '小明', lastname: '吴' // fullname: '吴小明' }, methods: { getReversedMessage() { return this.message.split('').reverse().join('') } }, computed: { // 计算属性 // reversedMessage() { // getter // return this.message.split('').reverse().join('') // } reversedMessage: { get() { console.log('调用 getter 方法') return this.message.split('').reverse().join('') } // set() {} }, fullname() { return this.lastname + this.firstname } } }) </script>

我们可以发现: ①、computed 的方法我们以属性访问的形式来调用,{{ reversedMessage }},{{ fullname }} ②、而 methods 里的方法我们必须加上()来调用,否则会出现报错,{{ getReversedMessage() }}

二、computed 的缓存属性

计算属性是基于它们的响应式依赖进行缓存的:就是说计算属性的值会被缓存,只有当其依赖项发生改变后,才会重新计算新的值并继续进行缓存

计算属性 vs 方法(methods)

计算属性值可被缓存,如果依赖项未发生改变,每次直接使用计算属性的缓存值就行了,而方法的调用,每调用一次,都会重新执行方法主体的任务(逻辑运算)

三、侦听器(watch 与其 immediate 属性)

watch: { // 侦听属性 firstname(newVal, oldVal) { // console.log('firstname 变化', a, b, c) this.fullname = this.lastname + newVal } }

计算属性 vs 侦听属性:

通常,计算属性是可以由多个数据项生成一个计算值,而侦听属性可以由一个数据项的变化影响多个其它数据项。

计算属性可以被缓存,而侦听属性不能缓存。

计算属性中不能使用到异步任务,而侦听属性中可以使用异步任务。

watch: { obj: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true } }

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

最新回复(0)