vue易错备忘录

computed（计算属性）

拥有缓存属性；

vue 提倡使用计算属性；
只有当依赖的数据发生变化时,关联的数据才会变化,
当**一个属性受多个属性**影响时就需要用到computed
适用于计算或者格式化数据的场景；
例如：购物车计算价格
只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.对于复杂逻辑，vue 提倡使用计算属性；最大特点就是缓存；

watch（监视属性）

**一个数据影响多个数据**
一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
例子：搜索数据

created

	html加载完成之前，执行。
	执行顺序：父组件-子组件。
	creadted钩子函数主要是用来初始化数据。

mounted

    html加载完成后执行。
    执行顺序：子组件-父组件。
    mounted钩子函数主要是用来执行DOM操作。

---

beforeCreate(){
    //实例刚在内存中被创建出来,还没初始化好,data和methods属性之前调用次函数

  },
  created(){
    //实例已经在内存中创建完成,此时data和methods属性初始化完成,页面HTML加载完成之前
    //(未开始编译模板)调用次函数.执行顺序:父组件->子组件

  },
  beforeMount(){
    //此时已经完成了模板的编译,但是还没有挂载到页面中,在挂载开始之前调用此函数
  },
  mounted(){
    //此时已经将编译好的模板,挂载到页面指定的容器中显示,页面加载完成之后调用次函数,执行顺序:
    // 子组件->父组件
  },
  beforeUpdate(){
    //状态更新之前调用次函数,此时data中的状态值是最新的,但是页面上显示的数据还是旧的,因为此时还没有
    //开始重新渲染demo节点
  },
  updated(){
    //状态更新完成之后调用次函数,此时data中的状态值和界面上显示的数据,都已经完成了更新,页面已经被重新渲染好
    //dem节点
  },
  beforeDestroy(){
    //实例销毁之前调用次函数,在这一步实例仍然完全可用
  },
  destroyed(){
    //实例销毁后调用次函数,该钩子被调用后,对应vue实例的所有指令都被解绑,所有的时间监听器被移除,所有的子实例也都被销毁
  }