Vue.js学习日记(3)——计算属性和侦听器

1.计算属性

模板不仅可以是简单的声明式逻辑,也可以是较为复杂的表达式。

<div id="element">
    <!--简单声明-->
    {{message}}
    <!--复杂表达式,表示变量message的翻转字符串-->
    {{message.split(‘‘).reverse().join(‘‘)}}
</id>

如果表达式过于复杂,将不利于直接理解。当需要在模板中多次引用message的翻转字符串时,操作也会变得繁琐。

所以,对于任何复杂逻辑,都应当使用计算属性。下面是基础例子:

<div id="element">
    <p>message: {{message}}</p>
    <p>revered message:{{reversedMessage}}</p>
</div>
var vm = new Vue({
   el: ‘element‘,
   data:{
        message: ‘Hello‘
   },
   computed:{
        //计算属性的getter
        reversedMessage: function(){
        // this 指向 vm 实例
        return this.message.split(‘‘).reverse().join(‘‘);
        }
   }
})

可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.reversedMessage依赖于vm.message,因此当vm.message发生改变时,所有依赖vm.reversedMessage的绑定也会更新。

2.计算属性缓存vs方法

事实上,还可以通过在表达式中调用方法来达到同样的效果:

<div id="element">
    <p>revered message:{{reversedMessage()}}</p>
</div>
var vm = new Vue({
   el: ‘element‘,
   data:{
        message: ‘Hello‘
   },
   methods:{
        reversedMessage: function(){
             return this.message.split(‘‘).reverse().join(‘‘);
        }
   }
})

在这里,我们将reversedMessage定义为一个方法而不是一个计算属性。两种方式的最终结果最终是完全相同的。然而,不同的是,计算属性是基于它们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。

相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

3.计算属性vs侦听属性

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性。

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
    }
  }
})

开发人员很容易滥用watch,通常更好的做法是使用计算属性而不是命令式的watch回调。

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

4.计算属性的setter

计算属性默认只有getter,不过在需要时你也可以提供一个:

var vm = new Vue({
  el: ‘#demo‘,
  data{
         firstName:" ",
         lastName:" ",
  },
  computed: {
      fullName:{
            //getter
            get: function(){
                 return this.firstName + ‘ ‘ + this.lastName;
            },
            //setter
            set: function(newValue){
                 var names = newValue.split(‘ ‘);
                 this.firstName = names[0];
                 this.lastName = names[names.length - 1];
            }
      }
  }
})

现在,运行vm.fullName = ‘John Doe‘ 时,setter会被调用,vm.firstName和vm.lastName也会相应地被更新。

原文地址:https://www.cnblogs.com/lilihaishiluan/p/9877339.html

时间: 2024-10-14 09:17:54

Vue.js学习日记(3)——计算属性和侦听器的相关文章

Vue.js 实战教程 V2.x(7)计算属性和侦听器

7计算属性和侦听器 7.1计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的. 在模板中放入太多的逻辑会让模板过重且难以维护. 所以,对于任何复杂逻辑,你都应当使用计算属性. 基础例子 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMe

1.3 Vue中的计算属性和侦听器

Vue中的计算属性和侦听器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue中的计算属性和侦听器</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

VueJs(7)---计算属性和侦听器

计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以

5.计算属性和侦听器

计算属性 所以,对于任何复杂逻辑,你都应当使用计算属性.  vm.reversedMessage 的值始终取决于 vm.message 的值. 计算属性缓存 vs 方法 你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果: 不同的是计算属性是基于它们的响应式依赖进行缓存的. 只在相关响应式依赖发生改变时它们才会重新求值.这就意味着只要 message 还没有发生改变, 多次访问 reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数. 相比之下,每当触发重

Vue计算属性和侦听器

计算属性 模板内的表达式非常便利,但是在模板中放入太多的逻辑会让模板过重切难以维护.对于任何复杂逻辑都应该使用计算属性. <p>{{ reverseMsg }}</> var vm = new Vue({ el: '#example', data: { message: 'hello' }, computed: { reverseMsg: function() { return this.message } } }) 这里声明一个计算属性reverseMsg.我们提供的函数将作用属

vue之计算属性和侦听器

一.使用计算属性 模板内的表达式是非常便利的,但适用于简单运算.在模板中放入太多的逻辑会让模板过重且难以维护. <script src="vue.js"></script> <div id="app"> <p>{{ msg.split("").reverse().join("") }}</p> </div> <script> var vm= n

计算属性和侦听器

一.计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于任何复杂逻辑,你都应当使用计算属性. <div

VUE 计算属性 vs 侦听属性

计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS.然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调.细想一下这个例子: <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { fi

js事件流、事件处理程序/事件侦听器

1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,为截获事件提供了机会.然后是实际的目标接收到