Vue数据相关属性总结

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

首先,整理一下数据相关属性有:

  • data

  • v-model

  • computed

  • props

  • watch 

data

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

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

其引用方式如下:

app.message = '...'
// 或者在template中,如:绑定到title属性上
// 也可用{{}}在模板中实现数据绑定
{{ message }}

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

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

v-model

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

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

// 定义方法,组件与表单控件相同

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

// 表单控件中v-model的本质实现

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

// 自定义组件中v-model的本质实现

可见,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 ...
    }
  }
})
{{ reversedMessage() }}

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

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

props

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

Vue.component('child', {
  props: ['myMessage'],
})

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

你可能感兴趣的:(vue.js)