Vue el和data的两种写法（5）

el的另一种写法：

一般我们写el是这种形式：

        new Vue({
            el: '#root',
            data: {
                name: 'Pickachu'
            }
        })

这种写法叫对象式，这就要求我们在new Vue的时候就确定了我们要绑定哪个容器。

上述写法也可以改成：

        const v = new Vue({
            // el: '#root',
            data: {
                name: 'Pickachu'
            }
        })
        v.$mount('#root');

这里实例化了一个Vue对象v,然后调用了$mout()方法，此方法在它的原型链上，作用是指定绑定的容器。这种写法叫函数式，它比对象式写法更灵活，例如我们可以在外层包上一层setTimeout，让它在一段时间后再绑定容器。

这个函数为什么叫mount？

mount有挂载的意思，Vue工作的过程是把容器里的模板交给Vue实例进行解析，再把解析好的内容挂载到页面的指定位置。

data的写法也是分为对象式和函数式。

对象式就是我们之前的key-value式的写法，函数式要求我们把data写成一个函数，函数的返回值一个对象。

例如：

const v = new Vue({
            el: '#root',
            // data: {
            //     name: 'Pickachu' 对象式
            // }
            data: function(){
                return{name: 'Pickachu'
            }     //声明式   
        }
        })

注意此处function是Vue调用的，所以this指向的Vue实例对象。如果你用箭头函数的话，由于箭头函数没有this，它就会往外找，this就虎指向window。建议不要在这里使用箭头函数。

一个重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

我们在对象里写方法一般可以把：和function省略，所以这里可以写成：

const v = new Vue({
            el: '#root',
            data(){
                return{name: 'Pickachu'
            }     //声明式   
        }
        })

写法的选择：初学阶段随意，data在学习组件后必须用函数式写法，否则容易报错。