刷新网页瞬间变化？立刻揭秘 immediate 属性的神奇效果

你们有没有发现一些事儿，就是有时候刷新网页之后，有些东西瞬间变了，但是还有一些变化得比较慢或者干脆不变化？这到底怎么回事儿？咱们今天就来聊一聊这个话题。

好，现在我们来聊聊 immediate 这个属性！当我们把其设成 true 的时候监听对象就能立刻给出结果喔～打个比方说，你刷新浏览器后控制台就马上出现内容。不过请注意，这时候网页的数据可没变，这样的话，在控制台上看到的 newValue 就是咱们事先写进代码里面去的那个预设值，至于 oldValue ，则会显示出“未定义”这种状态，小伙伴们应该能理解？

但要是咱们手动调整了下newValue.id的数值，那输出又得变啥样儿？结果来了要是没设定immediate或直接把它设成假的，那你刷个页面试试看，绝对没什么反应。就是说，除非那个被监听的对象有变动，否则控制台肯定连个屁都不放。

data() {
   return {
    value:''
   };
  },
  watch:{
   value:{
    handler:'init',
    immediate:true
   }
  },
  methods: {
   init(){
    alert(1)
   }
  }

接着来了解下深度监听（deep）这一特性。将其设定成true以后，就能深入到物体内部，观察到数值的所有变动。而如果没启用这个功能，那我们只能看到表面上的东西，一点儿也别想观测到物体内部的小小变化。

  {{student.studentName}}
 
 
student:{
     studentName:'xi'
    }
watch:{
  student:{
    handler:function (newValue,oldValue) {
     console.log(newValue,'new')
     console.log(oldValue,'old')
    },
     deep:true,
     immediate:true
   }
}

好了，今天的分享就到这里。希望这段话对你们有帮助~以后有啥要帮忙的就尽管来找我们！你明白我说的话没？其实这个问题还是挺有趣的！为啥有些东西刷个页就能变，有些东西怎么刷都不变？关键就在于 immediate 跟 deep 的设置不一样。想要马上监视对象还得深入研究对象里面的值？那就把 immediate 跟 deep 都设置成 true 呗！这样你就能立马掌握最新数据。如果你还有啥不明白的话可以直接在评论区留言我们等着你！别忘了点赞和分享给别人看看！