vue学习路线（5.el与data的两种写法）

一、el的两种写法

1. el: "#root"，new Vue的时候配置el属性， el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串，也可以写成 el:document.getElementById('root')

      new Vue({
        el: "#root", //第一种写法
        data: {
          year: 2025,
        },
      });

2.vm.$mount('#root')，先创建vue实例，随后再指定el的值。mount意思为挂载，vm.$mount的作用是，手动地把未挂载的vue实例挂载到指定的DOM元素上，这种方式更加灵活。

      const vm = new Vue({
        data: {
          year: 2025,
        },
      });
      console.log(vm); //输出vue实例
      vm.$mount("#root"); //第二种写法

源码解读：

在创建vue实例的时候，vue的构造函数自动运行 this._init(options)（启动函数）

init中调用vm.$mount(vm.$options.el)，将实例挂载到dom上，至此启动函数完成。

二、data的两种写法

1.对象式

 const vm = new Vue({
     data: { // data写法一：对象式
       year: 2025,
     },
 });

2.函数式

由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了， 因为箭头函数没有自己的this，只能往外找，this指的是全局的window。

 const vm = new Vue({
      data(){
         console.log(this)//此处的this是vue实例对象
         return {
           year: 2025,
         }
      }
 });

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错