vue 高级使用技巧

记录 vue 相关开发过程中使用技巧

---

仅做为自己学习的记录，都从网上搜集

妙用 hook 事件

1. 监听子组件的生命周期

<template>
  <child @hook:mounted="removeLoading" />
</template>

2. $once和hook监听实例自身beforeDestroy

<script>
  export default {
    created() {
      // TODO
      // 通过 $once和hook监听实例自身的beforeDestroy
      this.$once("hook:beforeDestroy", () => {
        //TODO
      });
    },
  };
</script>
复制代码

巧用 $attrs 、 $props 和 $listeners

$attrs 用于记录从父组件传入子组件的所有不被props捕获以及不是class与style的参数，而$listeners用于记录从父组件传入的所有不含.native修饰器的事件

Vue.component("custom-dialog", {
  // 通过v-bind="$attrs"和v-on="$listeners"把父组件传入的参数和事件都注入到el-dialog实例上
  template: '<el-dialog v-bind="$attrs" v-on="$listeners"></el-dialog>',
});
 
new Vue({
  data: { visible: false },
  // 这样子就可以像在el-dialog一样用visible控制custom-dialog的显示和消失
  template: '<custom-dialog :visible.sync="visible">',
});

 $porps用于记录从父组件传入子组件的所有被props捕获以及不是class与style的参数

Vue.component('grand-child', {
  props: ['a','b'],
  template: '<h3>{{ a + b}}</h3>'
})
 
// child和grand-child都需要用到来自父组件的a与b的值时，
// 在child中可以通过v-bind="$props"迅速把a与b注入到grand-child里
Vue.component('child', {
  props: ['a','b'],
  template: `
  <div>
    {{a}}加{{b}}的和是：
    <grand-child v-bind="$props"/>
  </div>
  `
})
 
new Vue({
  template:'
    <child class="child-width" :a="1" :b="2">',
})

method可以赋值为高阶函数返回的结果

<script>
  import { debounce } from "lodash";
 
  export default {
    methods: {
      search: debounce(async function (keyword) {
        // ... 请求逻辑
      }, 500),
    },
  };
</script>

watch 的数组格式

<script>
  watch:{
      'value':[
          {
              handler:function(){
                  fn1()
              },
              immediate:true
          },
          {
              handler:function(){
                  fn2()
              },
              immediate:true,
              deep:true
          }
      ]
  }
</script>

$watch 自定义 监听数据

mounted() {
    this.$watch(
      () => {
      	// 返回监听 value
        return this.$refs.searchRef.fromModels.education_id;
      },
      val => {
       // TODO
      }
    );
  },

$options

$options是一个记录当前Vue组件的初始化属性选项

this.value = this.$options.data().value; // 重置某一个值
Object.assign(this.$data,this.$options.data.call(this)); // 重置实例整个data, 由于data是只读及保持this 指向当前实例

弹窗里 重置表单为初始化状态

<template>
  <div>
    <el-button @click="visible=!visible">打开弹窗</el-button>
    <el-dialog @open="initForm" title="个人资料" :visible.sync="visible">
      <el-form>
        <el-form-item label="名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
 
<script>
 
export default {
  name: "App",
  data(){
    return {
      visible: false,
      form: {
        gender: 'male',
        name: 'wayne'
      }
    }
  },
  methods:{
    initForm(){
      this.form = this.$options.data().form
    }
  }
};
</script>

动态刷新（重新加载）特定组件

 this.$router.go(0) // 刷新整个页面
// v-if可以实现 true (加载)和false(卸载) （不推荐）
// 使用 $forceUpdate() （可以使用）
// 使用组件中的 :key （推荐）