watch监听中 立即监听和深度监听

谁践踏了优雅 2021-08-13 18:23 600阅读 0赞

wacth通常用来监听数据的变化如下代码，默认是被监听数据变化时执行，

其中handler默认情况下不用写，下图是需要这个监听立即被执行，就是首次进来没变化的时候就执行设置属性，

不需要立即执行就不用添加immediate这个属性

immediate:true

  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. <body>
  3.     <div id="app">
  4.         <p>FullName: {
  5.    {fullName}}</p>
  6.         <p>FirstName: <input type="text" v-model="firstName"></p>
  7.         <p>{
  8.    {obj.name}}:<input type="text" v-model="obj.name"></p>
  9.     </div>
  10. </body>
  11. <script>
  12.     var app = new Vue({
  13.         el:'#app',
  14.         data(){
  15.             return{
  16.                 firstName: 'Dawei',
  17.                 lastName: 'Lou',
  18.                 fullName: '',
  19.             }
  20.         },
  21.         watch:{
  22.             firstName:{
  23.                 handler(newName,oldName){
  24.                     this.fullName = newName + ' ' + this.lastName;
  25.                 },
  26.                 immediate:true
  27.             },   
  28.         }
  29.     })
  30. </script>

还有一个常用的属性就是深度监听 deep:true

  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. <body>
  3.         <div id="root">
  4.                 <p>obj.a: {
  5.    {obj.a}}</p>
  6.                 <p>obj.a: <input type="text" v-model="obj.a"></p>
  7.           </div> 
  8. </body>
  9. <script>
  10.     new Vue({
  11.         el: '#root',
  12.         data: {
  13.             obj: {
  14.                  a: 123
  15.             }
  16.         },
  17.         watch: {
  18.             obj: {
  19.             handler(newName, oldName) {
  20.                 console.log(newName, oldName);
  21.             },
  22.             immediate: true,
  23.             deep:true
  24.             }
  25.         } 
  26. })
  27. </script>

上面的代码如果不加deep:true 那么console中就不会执行，只执行第一次，输出结果为20191121103608179.png

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到。

这个时候就可以使用deep深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样消耗过大。

优化，直接监听obj.a

  1. watch: {
  2.   'obj.a': {
  3.     handler(newName, oldName) {
  4.       console.log(newName, oldName);
  5.     },
  6.     immediate: true,
  7.     // deep: true
  8.   }
  9. }

watch一般写在组件内，随着组件配合路由的切换，组件的注销watch也会随之注销。

发表评论

表情：
评论列表 （有 0 条评论，600人围观）

还没有评论，来说两句吧...

相关阅读