Vue前端框架 —— Vue 实例中 el 和 data 的两种写法

el 与 data 的常见写法

在 Vue 2.0 中创建 Vue 实例时，通常情况下 el 与 data 这两个配置项都是按照一种固定的方式写的，像下面这样。

 除了上面那一种常用写法之外，el 与 data 都分别有另一种写法。el 的另一种写法使用起来会更灵活，data 的另一种写法在组件中使用较为频繁。

el 的第二种写法

在原来代码的基础上将创建的 Vue 实例赋值给一个变量，官方推荐使用 "vm" 当做变量名。将 Vue 实例赋值给 vm 之后在控制台中输出一下 vm（ Vue 实例 ） 

下图就是 vm 的输出结果，输出结果为一个实例对象。展开后会出现很多以美元符号 ' $ ' 和下划线 ' _ ' 开头的方法和属性，其具体说明我已在图片中做了注释。因为展开之后这些属性和方法很直观的就能看到，所以这些属性和方法都是属于 vm 的。但 el 第二种写法要用到的以 ' $' 开头的方法并不在 vm 中，而是在 vm 的缔造者 Vue 的原型对象中。

 想要看到 vm 缔造者 Vue 的原型对象中的属性和方法，就要在当前的实例对象中找到 " [[Prototype]] " 或者 " __proto__ " 属性，展开后在众多的方法和属性中找到 " $mount" 方法，这就是本小节的主角，mount 这个单词本身也有挂载的意思。

使用 $mount 代替实例中的 el 配置项。

 

     
Hello, {{ name }}
 

 

 data 的第二种写法

 data 的第二种写法也是通过配置项配置在 Vue 实例中的，但不同的是第一种写法是对象式写法，将 data 的值配置为一个对象。而第二种写法是函数式写法，将 data 定义成一个函数，在函数中返回一个对象，这种形式常用在组件中。

• 对象式：data:{}
• 函数式：data(){}

   
Hello, {{ name }}

需要注意的是在函数式的写法中，一定要有 return 返回值，在 return 中再去定义需要的属性。

还有一点需要注意的是，使用函数式的时候，一定要用普通函数定义，不能使用箭头函数去定义，否则会引发 this 指向的问题。

使用普通函数，查看控制台输出的 this，可以看到 this 指向的是 Vue 实例对象。

使用箭头函数，查看控制台输出的 this，可以看到 this 指向的是全局的 window。

 

总结 

1. el 的两种写法：
   1. 创建 Vue 实例的时候配置 el 属性。
   2. 先创建 Vue 实例，并将实例赋值给一个变量（vm），随后再通过vm.$mount('#root') 指定 el 的值。
2. data的两种写法：
   1. 对象式：data:{}
   2. 函数式：data(){}
   3. 在非组件的代码中使用这两种形式都可以，但是在组件中必须使用函数式的写法，否则会报错。
3. 一个重要的原则：
   1. 由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。（例如：data 的函数式就是由 Vue 管理的函数）