Vue 实践小结

记一次 Vue 复习实践小结，编码技术总得时不时拿出来实践一番，不然很多细节的东西就会随着时间流逝，并且通过每一次实践你总能发现一些自己之前没有注意到的知识点，加深自己对一门语言或者框架的理解。

话不多说，让我们开始吧。

理清 Vue 属性相关

我一直分不清，Vue 对象的属性哪些是函数，哪些是对象，以至于自己在用的时候相当混乱，借这次实践，我把系统归类了一下，也算一个小结：

单独讲一讲 data 属性

在下面这种方式创建 Vue 对象时，因为该对象不会被复用，所以 data 的写法既可以写成返回一个对象，也可以写成返回一个函数

// 方式一：
var vm = new Vue({
   
  data: {
    a: 1 }
})
// 方式二：
var vm = new Vue({
   
  data: function() {
   
    return {
   
      a: 1
    };
  }
});
// 方式三：
var vm = new Vue({
   
  data() {
   
    return {
   
      a: 1
    };
  }
});

其中，方式三是方式一的语法糖。

如果，Vue 是使用 Vue.extend() 的形式或者 .vue 文件的形式创建，data 属性必须是采用上面的二，三的写法，返回一个函数。因为可能在多处调用这个自定义的组件，所以为了不让多处的组件共享同一 data 对象，只能返回函数。

其他常用属性汇总

1. 数据相关：

   1. props: Array<string> | Object
   2. computed: { [key: string]: Function | { get: F