Vue数据相关属性总结

vue中的数据相关属性不够简单，而且相同实现还能互相转化，有时也拿不准该用哪种属性。接下来，本文将整理一下各种数据相关属性的使用场景及限制，供使用vue的初学者参考。

首先，整理一下数据相关属性有：

• data

• v-model

• computed

• props

• watch 

data

data属性是vue中最简单的数据属性，代表这个vue实例的一项数据，其定义方式如下：

const app = new Vue({  
  data: {    
    message: '...',  
  }
})

其引用方式如下：

app.message = '...'
// 或者在template中，如：绑定到title属性上
<div :title="message"></div> 

// 也可用{{}}在模板中实现数据绑定
<div>{{ message }}</div>

注意一下，Vue组件定义时，data必须是function：

const Component = Vue.extend({  
    data: function () {    
        return { a: 1 }  
    }
})

v-model

v-model可以在表单控件或组件上建立双向绑定关系，本质上是一项语法糖，与data属性配合使用。

实现双向绑定的定义方法如下：

// 定义方法，组件与表单控件相同
<input v-model="something">

这只是一个语法糖，本质上是绑定了input控件的value属性与input事件。

// 表单控件中v-model的本质实现
<input :value="something" @input="something = $event.target.value">

而组件中的本质实现如下：

// 自定义组件中v-model的本质实现
<custom-input :value="something" @input="something = argunments[0]">

可见，v-model在自定义组件中的使用将会自动绑定上input事件，自定义组件在检测到value改变时，可以触发input事件：this.$emit('input', newValue) 将value的改变传递到父组件的something属性中。

computed

计算属性，用于在模板中绑定复杂的逻辑，当依赖的属性改变时该计算属性也随之改变。

定义方法：

const app = new Vue({  
  computed: {    
    reversedMessage() {      
      return ...    
    }  
  }
})

计算属性的特性“当依赖的属性改变时该计算属性也随之改变”，也可以由函数的方式来实现。函数方式实现的代码如下所示：

const app = new Vue({
  methods: {
    reversedMessage() {
      return ...
    }
  }
})
<div>{{ reversedMessage() }}</div>

两种方式结果虽相同，但计算属性是基于依赖缓存，只有在它的相关依赖发生改变时才会重新取值，而不必每次都执行函数更新属性值。

计算属性的引用方法同data属性，可作为模板中数据绑定也可绑定为组件属性，此处不再累述。

props

props用于父组件向子组件中传递数据，其在组件中定义与使用方法如下：

Vue.component('child', {
  props: ['myMessage'],
})
<child my-message="...">
<child :my-message="tempValue">

注意：props中驼峰命名法而在组件属性中是短横线命名法。

watch

watch用于观察属性发送变化后，做额外处理。

与computed属性的差别在于作用对象不同，watch观察变化的源头，而computed属性是变化的目标，当然，两者可以互相转换。两者如何取舍在于：变化的源与目标哪部分的属性更多，如果多个源属性变化影响一个目标属性则建议使用computed；相反，如一个源属性变化影响了多个目标属性，则建议采用watch。

如欲实现由first name和last name组合一起的full name，可由watch实现：

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

而用computed属性实现，则更精简一些：

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

总结

Vue中数据相关属性众多，确实让初学者一时不知该如何选择。通过本文，我们可以知道每个属性被设计出来的目的、使用场景，及特性甚至更深层的实现原理，如此便可应对大部分选择属性的情形。