标签：触发 computed created watch immediate mounted

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。