生命周期函数以及vue的全局注册

Posted 2020-12-26 l8l8

beforeCreate 在创造实例之前
created 创造实例以后
beforeMount 在挂载前
render 渲染节点到页面上
mounted 挂载以后
beforeUpdate 修改之前
updated 修改以后
beforeDestory 销毁之前
destroyed 销毁之后

在组件激活 <keep-alive></keep-alive>时可以调用的钩子函数
activated 
在组件卸载 <keep-alive></keep-alive>时调用的钩子函数
deactivated 

在watch中可以深度监听

wacth：{
    obj:{
        handler(newValue,OldValue)=>{
            immediate:true,
            deep:true
        }
    }
}

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    a: function (val, oldVal) {
      console.log(‘new: %s, old: %s‘, val, oldVal)
    },
    // 方法名
    b: ‘someMethod‘,
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // -> new: 2, old: 1

Vue API
全局配置（Vue.config）
silent
类型： Boolean 
取消Vue所有的日志和警告 
Vue.config.silent = false
=================
optionMergeStrategies
类型：Function 
自定义合并策略的选项。 
合并策略选项分别接受第一个参数作为父实例，第二个参数为子实例，Vue实例上下文被作为第三个参数传入。

Vue.config.optionMergeStrategies._my_option = function(parent, child, vm) {
    return child + 1
}
const Profile = Vue.extend({
    _my_option: 1
})
=================
Vue.directive(id, [definition])
注册或获取全局指令。

// 注册
Vue.directive(‘my-directive‘, {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})
// 注册（传入一个简单的指令函数）
Vue.directive(‘my-directive‘, function () {
  // 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive(‘my-directive‘)

后端路由：根据用户的不同的请求返回不同的内容。
vue-router 是根据hash值实现的。
根据监听hashchange事件。
 npm i vue-router --save
1）import VueRouter from "vue-router"
2） Vue.use(VueRouter)
3) new VueRouter