vue执行顺序

生命周期

执行顺序

父组件beforeCreate --> inject --> props --> methods --> data --> computed --> watch --> provide --> 父组件created --> 父组件beforeMount  --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount  -->  子组件 mounted  --> 父组件mounted -->父组件beforeUpdate -->子组件beforeDestroy--> 子组件destroyed --> 父组件updated

父子组件销毁顺序
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

data

1. vue data 为什么是一个函数？

注册了一个组件本质上就是创建了一个组件构造器的引用，而真正当我们使用组件的时候才会去将组件实例化
export default {
  data() {
    // data是一个函数,data: function() {}的简写
    return {
      // 页面要初始化的数据
      name: 'liming',
    };
  },
};

如果data是一个纯碎的对象,则所有的实例将共享引用同一份data数据对象,无论在哪个组件实例中修改data,都会影响到所有的组件实例
如果data是函数,每次创建一个新实例后,调用data函数,从而返回初始数据的一个全新副本数据对象，这样每复用一次组件,会返回一份新的data数据,类似于给每个组件实例创建一个私有的数据空间,让各个组件的实例各自独立,互不影响,保持低耦合

// 声明构造器函数
function Person() {}

Person.prototype.data = {
  // 原型下挂载一对象,并有name属性
  name: 'liming',
};

var p1 = new Person();
var p2 = new Person();
p1.data.name = '川川';
console.log(p1.data.name); // 川川
console.log(p2.data.name); // 川川
挂载在原型下属性如果是一个对象,实例化出来的对象(p1,p2)都指向的是同一份实体

原型下的属性相当于是公有的

function Person() {
  this.data = this.data();
}

Person.prototype.data = function() {
  return {
    name: 'liming',
  };
};

var p1 = new Person();
var p2 = new Person();

p1.data.name = '李明'; // 如果是函数的形式去定义属性,它是有自定的作用域的,在修改的时候不会影响到别人
console.log(p1.data.name); // 李明
console.log(p2.data.name); // liming