vue2 几个非常好用的小技巧

Watchers

1、普通监听

watch选项还支持以点分隔的路径作为键

export default {
  watch: {
    // Note: only simple paths. Expressions are not supported.
    'some.nested.key'(newValue) {
      // ...
    }
  }
}

2、Deep Watchers 深度 监听

默认情况下，watch是浅层的：回调只会在被监视的属性被分配了一个新值时触发——它不会在嵌套属性更改时触发。如果你想对所有嵌套的突变触发回调，你需要使用深度监视

export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        
      },
      deep: true
    }
  }
}

深度监视需要遍历被监视对象中的所有嵌套属性，在大型数据结构上使用时成本可能会很高。仅在必要时使用，并注意性能影响。

3、Eager Watchers 热切观察者

默认情况下，watch是惰性的：在被监视的源发生更改之前，不会调用回调。但在某些情况下，我们可能希望急切地运行相同的回调逻辑——例如，我们可能希望获取一些初始数据，然后在相关状态发生变化时重新获取数据。
我们可以通过使用带有处理函数的对象和immediate:true选项声明观察者的回调来强制立即执行它：

export default {
  watch: {
    question: {
      handler(newQuestion) {
        
      },
      // force eager callback execution
      immediate: true
    }
  }
}

4、Callback Flush Timing

当您改变反应状态时，它可能会触发您创建的Vue组件更新和观察者回调。
默认情况下，在Vue组件更新之前调用用户创建的观察者回调。这意味着，如果试图在watcher回调中访问DOM，则DOM将处于Vue应用任何更新之前的状态。
如果要在Vue更新DOM后在watcher回调中访问它，则需要指定flush:“post”选项：

export default {
  watch: {
    key: {
      handler() {},
      flush: 'post'
    }
  }
}

5、this.$watch()

还可以使用$watch（）实例方法强制创建观察者：

export default {
  created() {
    this.$watch('question', (newQuestion) => {
      
    })
  }
}

Template Refs

<input ref="input">
<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

引用的实例将与子组件的this相同，这意味着父组件将拥有对子组件的每个属性和方法的完全访问权限。这使得在父级和子级之间创建紧密耦合的实现细节变得容易，因此组件引用应该只在绝对需要时使用——在大多数情况下，您应该首先尝试使用标准道具和发射接口实现父/子级交互。
expose选项可用于限制对子实例的访问：

export default {
  expose: ['publicData', 'publicMethod'],
  data() {
    return {
      publicData: 'foo',
      privateData: 'bar'
    }
  },
  methods: {
    publicMethod() {
      /* ... */
    },
    privateMethod() {
      /* ... */
    }
  }
}

slot 插槽

1、普通插槽

2、具名插槽

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

使用方法一

<BaseLayout>
  <template v-slot:header>
    <!-- content for the header slot -->
  </template>
</BaseLayout>

方法二、

3、 动态插槽名称

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- with shorthand -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

4、 作用域插槽

如渲染范围中所述，插槽内容无权访问子组件中的状态。
然而，在某些情况下，如果槽的内容可以同时使用父范围和子范围中的数据，那么它可能会很有用。为了实现这一点，我们需要一种方法，让孩子在渲染数据时将数据传递到插槽。
事实上，我们可以做到这一点-我们可以将属性传递给插槽插座，就像将道具传递给组件一样：

<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

当使用单个默认插槽与使用命名插槽时，接收插槽道具有点不同。我们将首先展示如何使用单个默认插槽接收，直接在子组件标签上使用v形插槽：

<!-- <MyComponent> template -->
<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

也可以使用解構的方法

<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

5 具名插槽

命名作用域插槽的工作原理类似——插槽道具可以作为v-slot指令的值进行访问：v-slot:name=“slotProps”。

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>