watch

immediate 为true

父元素created中， mounted中

activated, deactivated 是组件keep-alive时独有的钩子

computed 计算属性

watch：是监听某一个值的变化，初始化时不会监听；如果要在数据变化的同时进行异步操作或者是比较大的开销时，推荐watch
computed：有缓存，如果计算的值没有发生改变，是会走缓存的；而且一定要return。

// 通过computed 直接获取 url中的参数id
computed:{
  id(){ return	this.$route.query.id }
}

computed 的执行顺序

如下图所示： 数据都是在 created之后才能获取到，所以都在子元素的created之后触发；路由的创建 和 在父组件created中就声明的数据kong其执行的顺序是在子元素created之前，所以在子组件created之后便会触发；

而如果数据kong在mounted 中改变的 那么会在子组件的mounted才会触发，数据在 父created 改变的，会替换data中声明的kong数据，只会触发一次；

mounted 中改变kong created 中改变kong

watch 监听属性

watch:{
  "$route": {
    // 另一种写法 handler: 'fun', // 字符串 fun 为methods中定义的方法
    handler: function () {},
    deep:true, // 对象深度监听
    immediate: true // 首次绑定的时候，是否执行handler
}

主要看 immediate 的触发时机

条件：mounted中赋值 ，immediate 为 true

结果： 数据会触发两次（一次data中的初始值，一次改变的值）并且早于computed 计算属性的；

在vue进行实例化的时候，将调用 initWatch(vm, opts.watch);进行初始化watch的初始化，

疑问 ？ watch的变更不是在ceated之后吗？

代码首先执行值computed被引用处，然后继续执行computed代码

所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。

immediate 为true

watch 的 immediate 为 false 时 不会立即触发 而是 mounted父 执行 this.kong.a = 2 之后才会触发handler

immediate 为false

条件：父元素 created 中或者data 中赋值时

结果：只会在immediate为true时 触发

父元素 created 中赋值

immediate为true时在beforeCreate子之后ceated子之前触发

watch的触发早于computed的触发

父元素中created或者data里面的赋值 只会在子元素的ceated之前触发，即只能使用immediate为true时才能监听到

父元素mounted中及之后的赋值需在子元素的最早在mounted里面监听到

标签：触发,computed,created,watch,immediate,mounted
来源： https://www.cnblogs.com/voxov/p/15259178.html