Vue常用方法整理1、内部监听生命周期函数2、外部监听生命周期函数3、Vue.observable创建状态管理4、Vue

1、内部监听生命周期函数

// 监听窗口发生变化，resize组件
window.addEventListener('resize', () => {})
// 通过hook监听组件销毁钩子函数，并取消监听事件
this.$once('hook:beforeDestroy', () => {
   window.removeEventListener('resize', () => {})
})

2、外部监听生命周期函数

<!--通过@hook:updated监听组件的updated生命钩子函数-->
<!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
<Input @hook:updated="change" />

3、Vue.observable创建状态管理

创建

import Vue from 'vue'

// 通过Vue.observable创建一个可响应的对象
export const store = Vue.observable({
  userInfo: {},
  roleIds: []
})

// 定义 mutations, 修改属性
export const mutations = {
  setUserInfo(userInfo) {
    store.userInfo = userInfo
  },
  setRoleIds(roleIds) {
    store.roleIds = roleIds
  }
}

调用

<template>
  <div>
    {{ userInfo.name }}
  </div>
</template>
<script>
import { store, mutations } from '../store'
export default {
  computed: {
    userInfo() {
      return store.userInfo
    }
  },
  created() {
    mutations.setUserInfo({
      name: 'hello'
    })
  }
}
</script>

4、Vue.extend使用

import Vue from 'vue';
import Test from './test.vue';

let test = null;

// 通过Vue.extend将组件包装成一个子类
const TestConstructor = Vue.extend(Test);

// 挂载一下方法
TestConstructor.prototype.abc = function() {};

const Loading = (options = {}) => {
  // 如果组件已渲染，则返回即可
  if (test) {
    return test;
  }
  // 要挂载的元素
  const parent = document.body
  // 组件属性
  const opts = {
    ...options
  }
  // 通过构造函数初始化组件 相当于 new Vue()
  cosnt instance = new TestConstructor({
    el: document.createElement('div'),
    data: opts
  })  
  // 将loading元素挂载到parent上  
  parent.appendChild(instance.$el)  
  // 将组件实例赋值给loading
  test = instance;
  return instance;
}

export default test;

放到全局

Vue.prototype.$test = Test
// 在export之前将Loading方法进行绑定
export default Test
// 在组件内使用
this.$test()

5、watch用法

 watch: {
    // 在值发生变化之后，重新加载数据
    test(newValue, oldValue) {
      // 判断搜索
      if (newValue !== oldValue) {
        this.$_loadData()
      }
    }
  }

 watch: {
    test: {      
    // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
      handler(newValue, oldValue) {},
      // 配置立即执行属性
      immediate: true,
      deep: true, // 深度监听    
    } 
  }

部分内容参考前端进击者