计算属性,method,watched Property,setter,watchers

1.计算属性
在模板中绑定表达式很方便,但是只能是一些简单的操作 ,太过复杂的时候,就会显得笨重,不易于维护。例如: 看着很复杂。所以最好只有一个,就需要用到计算属性(computed)

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

基础例子:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm =new Vue ({
    el:'#example',
    data :{
    message:'hello'
    },
    //下面就是计算属性了,他把三个操作都定义在了一个函数里面
    //vm.reversedMessage 的值始终取决于 vm.message 的值
    computed:{
    reversedMessage:function(){
        return this.message.split('').reverse().join('')
    }   
    }
})

结果就是下面

Original message: "hello"
Computed reversed message: "olleh"

2.计算缓存 VS method方法

<p>Reversed message: "{{ reverseMessage() }}"</p>
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

使用method方法我们同样能得到和计算属性一样的答案。但是这里有一个区别。
当我们使用计算属性时,message的值只要没改变,不管访问多少次的reversedMessage,得到的值永远是之前计算的结果,
因为计算属性有缓存,类似于有一个记录。而method会一直调用执行函数,所以就不会有缓存。

3.计算属性 VS Watched Property

<div id="demo">{{ fullName }}</div>

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
    }
  }
})
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

4.计算setter 计算属性默认只有getter。当然你也可以提供一个setter 想理解先明白
类方法:使用static修饰,属于整个类的,不是属于某个实例的,只能处理static域或调用static方法;类方法是属于整个类的,而实例方法是属于类的某个对象的
实例方法:属于对象的方法,由对象来调用。实例方法也叫做对象方法。
getter 是一种获得属性值的方法,setter是一种设置属性值的方法。

computed:{
 fullname:{
 get: function(){
 return this.firstname + '' + this.lastname
 },
 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 也会被对应更新。 5.观察watchers

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

不懂

vue笔记
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。